Redux

redux-counter.js

/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!');

redux-store-from-scratch.js

//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 an unknown action to render initial state.
  dispatch({});
  return {getState, dispatch, subscribe };
  
};

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

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

redux-store.js

//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.md

Getting Started With Redux

There are 3 principle of redux

1st principle: ( One Application State )

• Everything changes in application including data or ui change is placed in single object called state / state tree.

2nd Principle: ( Dispatch Action )

• State tree is readonly. You can not modify or write. To change state dispatch actions.
• State : minimumal representation of the data to the app.
• Action : minimumal representation of change to the data.

Pure Function: ( Specify Reducer that tells how state is updated with action )

• return value depent solely on the given argument.
• Do not have any side effect ( network/db call )
• They dont modify value passed to them.

ImPure Function:

• call database / network
• they may override value passed to them.

UI/View Layer

• is most predictable when it is described by pure function of the application state. F(S)
• State mutation should be described by pure function.
• It takes the previous state of the whole application and the action being dispatched and return new state.
• It doesnot mutate the state.

3rd principle:

• To describe state mutation write a pure function that takes previous state of the app and the action dispatched and returns the next state of the app.
• This function is called reducer.