Redux: Implementing store from scratch

by amrendra kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

JavaScript

'use strict';
console.clear();

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

const createStore = (reducer) => {
	let state;
  let listeners = [];
  
  const getState = () => state;
  
  const dispatch = (action) => {
  	state = reducer(state, action);
    listeners.forEach(listener => listener());
  }
  
  const subscribe = (listener) => {
  	listeners.push(listener);
    return () => {
    	listeners = listeners.filter(l => l !== listener);
    }
  }
  
  dispatch({});
  return {getState, dispatch, subscribe};
  
}

const store = createStore(counter);

const render = () => {
	document.body.innerText = store.getState();	
}

render();
store.subscribe(render)


document.addEventListener('click', () => {
	store.dispatch({type: 'INCREMENT'});
})