The Ultimate Manager: Redux II Actions + Reducers

#react #redux #javascript

Rewind

In my previous post, I introduced Redux. We learned what Redux is and we began to uncover some of Redux's key fundamentals, like the store. Today, I thought it would be beneficial to get into the finer details of Redux through talking about Actions and Reducers.

Wait, what is Redux again?

To quickly recap, Redux is a state management library. Redux takes an application's state and moves it outside of the application into a single location that we call the store. By doing so, it allows all of our application's components to access state at any moment. This is huge!

So, where do Actions + Reducers come in?

Since the store holds the state of an application, and since an application is always changing and updating, the store must have a way to be updated to reflect those changes in state. Simply, the store is updated through actions and reducers.

Actions

Actions are plain JS objects made up of properties in key-value pair syntax. Actions contain the information about what in the state could be changed / why the state has changed. Specifically, actions must have a "type" property to indicate the type of action to be invoked. Actions must also have a "payload" property that contains the information about the change. Below is an example of an action:

{ 
  type: "ADD_CAT",
  payload: {
    name: "Cosmo",
    age: 3,
    weight: 45
  }
}

Reducers

Reducers are functions that take the state as its first argument and an action as its second argument to return a new state. Some interesting features about reducers include: (1) a reducer function can handle multiple actions so it is coded in the switch-case syntax and (2) reducers are pure functions.

Pure functions are functions that always return the same result given the same input. We use pure functions because they do not produce side effects. This is major in complex applications!

Here is an example of a reducer:

export default function addingCat(state, action) {
       switch(action.type) {
          case 'ADD_CAT': 
             return {payload: state.payload}
          default: 
             return state 
       }
}

So, to update the state we must do the following things:

create an action
create a reducer function
pass the action and the state to the reducer

This will return a new state! Since, state is immutable (meaning it cannot be changed), the updated state is a completely new state, not the previous state in an updated version.