React Kompose Clock with Rx.js

A simple clock built with React Kompose and Rx.js

by arunoda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.min.js"></script>
<script src="https://cdn.rawgit.com/kadirahq/react-komposer/master/dist/browser.min.js"></script>
<div id="react-root">
</div>

Babel + JSX

// Import the compose function, you may get this via NPM.
// const {compose} = require('react-komposer');
// import {compose} from 'react-komposer'
const {compose} = ReactKomposer;

const defaultState = {time: new Date().toString()};
const store = Redux.createStore((state = defaultState, action) => {
  switch(action.type) {
    case 'UPDATE_TIME':
      return {
        ...state,
        time: action.time
      };
    default:
      return state;
  }
});

setInterval(() => {
  store.dispatch({
    type: 'UPDATE_TIME', 
    time: new Date().toString()
  });
}, 1000);

// Create a component to display Time
const Time = ({time}) => (<div>{time}</div>);

// Create the composer function and tell how to fetch data
const composerFunction = (props, onData) => {
  return store.subscribe(() => {
    const {time} = store.getState();
    onData(null, {time})
  });
};

// Compose the container
const Clock = compose(composerFunction)(Time);

// Render the container
ReactDOM.render(<Clock />, document.getElementById('react-root'));