Redux: An Introduction (Part 2)

Review

Alright, so where did we leave off. Last week we talked about what Redux was. A JavaScript library used to create centralized state management in the form of a single object tree the store. We also discussed why it was useful to a react application bypassing the one way data flow and eliminating the need to drill props down multiple layers of components. Lastly we did a quick walkthrough of how to set redux up in a react project as well how to set up the store and how to use connect to map the state of the store to the props of a component. This week we're going to be taking a deeper dive into the reducer and the actions that control them. Let's get started.

What is a reducer?

A reducer is a function that handles the state of the store through the use of the action. It takes in the state and an action and depending on what action is passed in it doesn't alter the state but instead produces an all new one to replace the current state.

Last week we built the most basic of reducers and all we had it do was return the state which was set as the initial state like so:

const initState = {
    jedi: [
        { id: 1, name: 'Luke Skywalker' },
        { id: 2, name: 'Obi-Wan Kenobi' },
    ],
    sith: [
        { id: 1, name: 'Emperor Palpatine' },
        { id: 2, name: 'Darth Vader' },
    ]
}

const reducer = (state = initState, action) => {
    return state;
}

export default reducer;

Now lets talk about the action.

An action is an object passed into the reducer to tell it how to work with the state. It will always contain a type to identify what kind of action is to be done to the store as well as the data being passed in that is generally stored in a payload. An example action might look like this:

const action = {
  type: 'ADD_JEDI',
  payload: {
    name: 'Qui-Gon Jinn'
  }
}

Or....

const action = {
  type: 'ADD_SITH',
  payload: {
    name: 'Darth Maul'
  }
}

Now to make it so the reducer can handle the action we have to set up a check system. This will be done through the use of a switch.

const reducer = (state = initState, action) => {
    switch(action.type){
      case 'ADD_JEDI':
         return {
           ...state,
           jedi: [...state.jedi, action.payload] 
        }
      case 'ADD_SITH':
         return {
            ...state,
            sith: [...state.sith, action.payload]
        }
      default: 
         return state;
    }
}

So depending on what type of action you pass into the reducer it will hit one of the cases on the switch and return the appropriate new state.

Let's break it down just a little bit though.

So first of all to pass an action into the store that is housing this reducer we have to use dispatch.

store.dispatch(action)

Now that that's done looking at our reducer the switch is checking the type of every action being passed into it. If its ADD_JEDI it will add the payload to the jedi part of the state and if it's ADD_SITH it will add it to the sith part of the state. Here's where things are a little interesting. Remember we aren't mutating the state directly but rather returning a new state each time. So looking at a return one more time:

         return {
           ...state,
           jedi: [...state.jedi, action.payload] 
        }

First we spread the current state so we have all of that data in our new returned state. We then assign the new value of the the jedi property to add in the payload of our action. This will of course handle differently if you're removing or modifying your state in separate ways but this works in this case. Now even though the jedi property is already technically in the state since we spread it out it still reassigns that value specifically since we specified which one to modify. Now we didn't return the same state mutated but instead a brand new one with the necessary modifications in there.

Another thing to note is a switch case of course needs a default and I assigned that to just return state since there is not action type to perform on it in the first place.

Wrap Up

At this point we've covered what Redux is, how to bring it into your app and how a reducer handles state using actions. There's of course so much more to learn about Redux and it's a very powerful tool when it comes to state but this was really just an introduction to the topic and to get a taste of a different type of data handling your react projects. I'm still new to redux and will be spending more time on the site docs and bringing it into my projects personally but I hope I've imparted some of what I've picked up a long the way.

Here's a link to the official site for those learning redux like me:

https://redux.js.org/

As always thanks for checking this out and happy coding!