The Ultimate Manager: Redux II Actions + Reducers

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:

1. create an action
2. create a reducer function
3. 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.

Recap

• Redux = state management library.
• Redux stores an application's state in the store.
• Any component can access the state through the store.
• The store is a JS object.
• The store is updated through the use of actions and reducers.
• Reducers are functions.
• Actions are JS objects.
• Pure functions always return the same result given the same input.
• Reducers can handle multiple actions.
• Reducers return new states; they do not "update" the previous state.
• State is immutable.

🌈 Thank you for reading along + learning with me! Comment below for any questions, intrigues or to help me learn. 🌈