Redux

What is Redux?

A state management library

Independent Library

React
Angular
or any!

Why Redux?

Redux Principles

Whuut?

One single immutable state

//entire application state
{
  isLoading:  false,
  toDos:  [
      {
        title:  'Prepare Slide',
        action:  'try to be funny',
        comment:  'fail miserably'
     },
     {
        title: 'Cant think of anything',
        action: 'something something',
        comment: 'something something'
     }
  ]
}

Actions

Only way to change the state is to dispatch action

store.dispatch({
  type: 'ADD_TODO',
  data: {
    title:  'Hi',
    action:  'Umm',
    comment:  'Bye'
  }
})

Reducers

just a function that returns a new state

toDoReducer = (state = [], action) => {

  switch(action.type) {
    case ADD_TODO:
      //returns newState;
    
    default:
      return state;
  }
}

toDoReducer = (state = [], action) => {

  switch(action.type) {
    case ADD_TODO:
      return state.push(action.data);
    
    default:
      return state;
  }
}

toDoReducer = (state = [], action) => {

  switch(action.type) {
    case ADD_TODO:
      return [...state, Object.assign({}, action.data)];
    
    default:
      return state;
  }
}

Redux Flow

React : Someone just clicked the save button.

Action : I will tell the reducers.

Reducer : I will change the state.

Store : I'll notify all the components.

React : Updating the UI!

So what's the benefits

Awesome State Management
Awesome Debugging capability
Happiness