React Js Redux

This is basic my note for learning and understand what exact Redux doing

If you had play with Flux, then yes you had pretty much get 80% concept

If you don’t , like me has no clue about Flux , then we could try to learn the concepts step by step:

Concept:

According to the Auther: Dan Abramov

Redux is a library to range states more easier, less API, but more predictable behaviours, it could be practice logging, hot reloading, time travel and universal application, recording and repeating

If you knew about Flux, it was came from the problem of showing message tab box from Facebook messenger by user read or not read, and mean time show different states in the same time, the core is fix this feature problem by Virtual DOM to make user better experience:
1. Improve data consistancy

2. Point root of a bug

3. More meaning unit test

so this was birth of dispatch and action part:

From view to trigger update data even, action send ddata to dispatcher, and dispatcher send payload to all stores, final View ask Store to get state

Point of Redux:

Make state changes more predictable

Reduc 3 pricipales:
1. Single source of truth ( the only data source from ):
states will all wrapped in one store, where has to dispatch the actions

2. State is read only
you could only change state by action

and action is dispatch by store:

3.  Changes are made with pure functions

pure functions == reducer,  action will send the request to reducer, reducer will received older state and return new state, keep reducer is pure and return value to be predictable, follow has 2 reducer, one is for filter and the other is for todos reducer, then use reducer to create store :

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

This part is still abstract? follow has the concept diagram:

Process of Redux:
Look upper  diagram, as you could see,  view == components, as user has some operation to trigger action from view ( components) , store.dispatch need to change event content, pass to store for reducer to return next state, state tree has update, trigger view re-render

Redux ==> compositions of store, actions , reducer

Some points in Redux:

As you look some sample code upper in Reducer , do you notice that all the function return directly argument value ? which means in Redux it only accept Pure function, so if your function has re-calculate method like Math.random() , date now() or mapping etc it will not be allowed cause it has to stay simple, less side-effect ( well, that’s why it is called reducer)

Reducer that calculates the next state tree based on the previous state tree and the action being dispatched :

this is important because once you understand this is the key procedure in Reducer then it will make you easily to start to code

Learn more? this link is good to learn the basic concept by photo application
or by the Auther which has videos to show more