Changes are made with pure functions

To specify how the state tree is transformed by actions, you write pure reducers.

Pure function

• Given the same input, will always return the same output.
• Produces no side effects.
• Relies on no external state.

Store

The place where all your application state lives

UI

//Cart
{
    products:[],
    totalItems:0
}

Actions

 Tells store that something happened and that the store should update itself in response.

UI

//Add
{
     type:'ADD_ITEM',
     payload:{
        id:1,
        name:'Book'
     }
}

//Remove
{
     type:'REMOVE_ITEM',
     payload:{
        id:1
     }
}

Reducers

 Responsible for mutating the store state when actions are dispatched

UI

reducer(state, action) {
     switch (action.type) {
          case 'ADD_ITEM':
              var cart = [...state.cart];
              cart.push(action.payload)
              return Object.assign({}, state, {cart});
          break;  

          case 'REMOVE_ITEM':
              ...
              return Object.assign({}, state);    
     }
     
}