Learning Redux

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="expect@*" data-semver="1.13.4" src="https://npmcdn.com/expect/umd/expect.min.js"></script>
    
    <script src="redux-counter.js"></script>

    
    <script data-require="redux@*" data-semver="3.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.2.1/redux.js"></script>
    
   <script src="redux-store.js"></script>
  
  </head>

  <body>
    <div id="cl"></div>
  </body>

</html>

//reducer example
function counter(state, action) {
  if(state === undefined ) {
    return 0; 
  }
  if (action.type === 'INCREMENT') {
    return state + 1;
  } else if (action.type === 'DECREMENT') {
    return state - 1; 
  }
  else { 
    return state;   
  }
} 

expect(
  counter(0, {
    type: 'INCREMENT'  
  })
).toEqual(1);  
 
expect(
  counter(1, {
    type: 'INCREMENT'
  })
).toEqual(2);

expect(
  counter(2, {
    type: 'DECREMENT'
  }) 
).toEqual(1);

expect(
  counter(1, {
    type: 'DECREMENT'
  })
).toEqual(0);  

/*
If we dispatch unknown action 
then it should return current 
state of the application.
*/
expect(
  counter(1, {
    type: 'SOMETHING_ELSE'
  })
).toEqual(1);

/*
Reducer should specify the initial 
State of the application. Here it 
should be 0 If the reducer receive 
undefined state of the argument 
then it should return 0 
*/
expect(
  counter(undefined, {
    
  })
).toEqual(0); 

console.log('Tests passed!');

/* Put your css in here */

h1 {
  color: red;
}

//REDUX STORE

/*Creating an counter reducer function*/
var counter = (state = 0, action={}) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state; 
  }
};  

/* 
Redux Store:
It holds the current application state object
It lets you to dispatch actions
When you created it helps to specify reducer to update state with action.
*/

//var createStore = Redux.createStore;
// import { createStore } from 'redux';
const {createStore} = Redux; 
const store = createStore(counter); //specify reducer

//Redux store has 3 methods:
//1. getState //gets current state of the Redux store.
console.log(store.getState());
//2. dispatch //lets you to dispatch action.
console.log(store.dispatch({type:'INCREMENT'}));
console.log(store.getState());

//3. subscribe //let u register a call back which will be called anytime an action is dispatched.

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

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

//REDUX STORE FROM SCRATCH

/*Creating an counter reducer function*/
var counter = (state = 0, action = {}) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      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(listner);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    };
  };
  dispatch({});
  return {getState, dispatch, subscribe };
  
};

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

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