React + Redux/RxJS

by Abdul Ahmad

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.3.0/Rx.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<div id="app"></div>

Babel + JSX

//const { createStore } = Redux;

function createStore (rootReducer, initialState) {
	const action$ = new Rx.Subject();
	const store$ = new Rx.BehaviorSubject(initialState);
  action$.scan(rootReducer, store$.value).subscribe(store$);

	return {
  	dispatch: action$.next.bind(action$),
    subscribe: store$.subscribe.bind(store$),
    getState: store$.getValue.bind(store$)
  };
}


function reducer (state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function App() {
	return 'hi';
}

const store = createStore(reducer, 0);
const render = () => ReactDOM.render(
  <App state={store.getState()} />,
  document.getElementById('app')
);

store.subscribe(render);
render();