JSFiddle - React, Tailwind, and code Playground

by Lumina Scheiderich

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js"></script>
<script src="https://unpkg.com/hyperflux"></script>
<script src="https://unpkg.com/kefir"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const { Provider, connect } = ReactRedux;

const state = {
	count: 0,
};

const actions = {
	inc: () => state => ({ count: state.count + 1 }),
	dec: () => state => ({ count: state.count - 1 }),
};

const createStore = (initialState, actions) => {
  let app;
  let state = initialState;
	const stream = Kefir.stream(emitter => {
  	app = hyperflux.app(initialState, actions, state => emitter.emit(state));
  });
  stream.observe(next => { state = next });
  // Redux listeners aren't passed anything, so we map the stream to undefined for every value.
  const notifier = stream.map(s => undefined);
	return {
  	// Making dispatch an object causes react-redux connect() PropTypes to fail, but does actually work.
    // Another solution would be to have dispatch be a function which returns the app object, but that makes
    // mapDispatch functions uglier.
  	dispatch: app,
    getState: () => state,
    subscribe: listener => notifier.observe(listener).unsubscribe,
  };
};

const store = createStore(state, actions);

// mapStateToProps
const mapCount = state => ({ count: state.count });
const mapActions = dispatch => ({ inc: dispatch.inc, dec: dispatch.dec });

// connected component
const Counter = connect(mapCount, mapActions)(props => (
	<div>Count: {props.count} <button onClick={props.inc} >+</button> <button onClick={props.dec}>-</button></div>
));

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('container')
);