Friday, September 30, 2016

My Basic understanding of Redux

I extracted these points from Dan Abramov's Egg Head Video

First Principle: 
Everything that changes in application including the Data and the UI state is contained in the single Object called State or State Tree OR
The whole state of application is a single javascript object
  1. All mutations and changes to the state are explicit

Second Principle
State Tree is READ-ONLY
  1. cannot modify or write to state tree
  2. To change state we need to dispatch an action
    1. Action is object describing the change
Any data that gets into the Redux application gets there by actions

Third Principle: To describe state mutations we have to write a pure function that takes previous state, action dispatched and returns the next state of the app, this is called the Reducer
reducer(state, action) { 
 return mutate(state) 

Bare Minimum Redux App
const { createStore } = Redux;
const store = createStore(counter);

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

render(); // Initial State

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

Observations/ Assumptions/ Assertions:
  1. UI or View layer is most predictable when it is described as a pure function of the application state (pioneered by ReactJS)
  2. State Mutations in app need to be described as a pure function (takes previous state and action dispatched and returns next state)
  3. To avoid complex reducers, use reducer composition i.e. extract reducer 
  4. Definitions

State: Minimal representation of the data in application
Action: Minimal representation of the change to the data 
  1. Action can have any structure 
    1. The only requirement is it has type property is not undefined
      1. usage of strings as the type is recommended as strings are serializable
  2. Components don’t know how actions are performed, they simply dispatch action with the accurate type and needed arguments

Pure Functions: Return value depends solely on the values of their arguments
  • do not have observable side affects, e.g.  network or db calls
  • predictable
  • do not modify values passed to them

Impure Functions: May call db, network, operate on DOM
  • have side affects
  • override values passed to them

Reducer: Takes the state and action as arguments and return new state


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

  2. Play with us in a super game in the best online casino in history. super slots only with us Play and win everywhere and at all.