JSFiddle - React, Tailwind, and code Playground

mirco - redux

by hronic

HTML

<button id="inc">increment</button>
<button id="dec">decrement</button>
<div id="result"></div>

JavaScript

function createStore(reducer, initialState) {
    var currentReducer = reducer;
    var currentState = initialState;
    var listener = () => {};

    return {
        getState() {
            return currentState;
        },
        dispatch(action) {
            currentState = currentReducer(currentState, action);
            listener(); // Заметьте, что мы добавили эту строку!
            return action;
        },
        subscribe(newListener) {
            listener = newListener;
        }
    };
}
// ******************************

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

let store = createStore(counter)

store.subscribe(() => result.innerHTML = store.getState() );

inc.onclick = function(){
store.dispatch({ type: 'INCREMENT' })
}
dec.onclick = function(){
store.dispatch({ type: 'DECREMENT' })
}