JSFiddle - React, Tailwind, and code Playground

by tmtron

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="https://unpkg.com/redux@latest/dist/redux.js"></script>
    <script src="https://unpkg.com/redux-actions@latest/dist/redux-actions.js"></script>
  </head>
  <body>
    <button id="increment">INCREMENT</button>
    <button id="decrement">DECREMENT</button>
    <div id="content" />
    <script src="main.js"></script>
  </body>
</html>

JavaScript

const { createStore } = window.Redux;
const { createActions, handleActions, combineActions } = window.ReduxActions;

const content = document.getElementById('content');

const defaultState = { counter: 0 };
const { increment, decrement } = createActions({
  INCREMENT: (amount = 1) => ({ amount }),
  DECREMENT: (amount = 1) => ({ amount: -amount })
});

const reducer = handleActions(
  {
    [combineActions(increment, decrement)]: (
      state,
      { payload: { amount } }
    ) => {
      return { ...state, counter: state.counter + amount };
    }
  },
  defaultState
);
const store = createStore(reducer, defaultState);

const render = () => {
  content.innerHTML = store.getState().counter;
};
store.subscribe(render);
render()

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(increment());
});

document.getElementById('decrement').addEventListener('click', () => {
  store.dispatch(decrement());
});