The Ultimate Manager: Redux II Actions + Reducers
Tags: react, redux, javascript
Published: 2021-08-04 19:27:19

## Rewind

In my previous [post](https://dev.to/am20dipi/the-ultimate-manager-redux-2966), 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 <strong>the store.</strong> By doing so, it allows <strong>all</strong> 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:

```js
{ 
  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 <strong>pure functions.</strong>

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

Here is an example of a reducer:

```js
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

<strong>This will return a new state! </strong> 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.

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