Codepocalypse Now Redux (or when to dispatch a fetch to your API in the Redux life cycle)
By: Aaron Blum
Tags: Flatiron School, React, JavaScript, Bootcamp, Redux

Codepocalypse Now Redux (or when to dispatch a fetch to your API in the Redux life cycle) aaron blum Nov 17, 2019·6 min read

This is me in the midst of learning Redux.

Can I just say how much I learn from the Net Ninja? Tons. I know that ninja’s are supposed to always hide their identity- this is rule number three of being a ninja, after always carry a big sword, and learn your skills from a real Samurai of course. But the Net Ninja’s name is Shaun and he is from the UK. Every time he says HTML or browser with a British accent I silently giggle to myself.

Before I move on, I just want to give him a shout out and link a couple playlists that really helped me while I was learning Redux:

The Complete React and Redux Tutorial Playlist by the Net Ninja — This is what I started with to learn React. It was immensely helpful to learn how to pass up and down props between components. Then, at the end, he starts going into Redux, which was a great primer for the next playlist series.

React, Redux, and Firebase App — This playlist was great to get a little further into Redux. And although I stopped watching when he starts doing stuff with Firebase, I eventually want to go back and look at how to use Firebase.

React-Redux Docs- I also just have to link the React-Redux docs because when I felt like I had gotten enough out of the previously linked playlists to try it on my own, I really made use of the React-Redux docs.

Project Week

Last week was project week for our Digits cohort at Flatiron School in Chicago. It was MOD 4 (React) and my project partner and I wanted to create a dating app. I was feeling a bit ambitious and I thought to myself, why not learn and use Redux in our project? I knew it wouldn’t be easy but I was still willing to give it a shot. We really weren’t supposed to get into Redux until after project week and before we entered MOD5. But, part of this program, and part of learning how to become a programmer is learning how to learn, and then teaching yourself new things on your own (also, just have to give a big shoutout to our Tech Coach Jess- she helped me understand a lot of concepts and figure out a lot of things with Redux). So, as I said, I wanted to test my ability to go out there and learn a new abstraction or framework, to see if I was actually using my time wisely in this bootcamp. It turns out that I was and I am.

It wasn’t easy. Throughout this bootcamp, in every MOD, I have gone into it thinking, oh, yeah, I got this, I can learn this no problem. And then what happens? It’s always harder than I think. And that’s the nature of learning how to program. It is always harder than you think. But if you put hard work and time into it, and a lot of patience, it is definitely possible to learn anything.

The Redux Part

I’m not going to go into everything that Redux is. This blog post is just going to assume that you know that Redux is a way to hold state in your app that is different than how React holds state within each component and passes it up and down the ladder.

This is how I think about how Redux thinks about state. Redux holds state like a library. You can define the state that is contained within your library. Meaning that if you want your library to hold a section called Users, that contains employee objects, and a section called Relationships, that contains relationship objects, and a section called Locations, that holds restaurant location objects, you can do that. These sections, and the library in which they live, are referred to as a STORE in Redux. The store, or in our case, the library, is agnostic to all the components in a React app. The components don’t care where the store live in your React tree, and the store doesn’t care where the components live. How do the components access data in the state? Well, they subscribe to the library (store). If an User list component is subscribed to the library, in the ComponentDidMount function, you can have your component automatically checkout a list of all the users using the MapStateToProps function.

This is amazing. It means that a component can just dynamically update from any part of the store when you tell it to!

So When Do I FETCH?

One of the harder parts for me to figure out was when to fetch from my API. According to the Redux data flow, it goes like this: Component > Dispatch Action > Reducer > Component.

Here is a diagram of the process from the inimitable Net Ninja:

A component can MapStateToProps (to subscribe to sections of the store) or DispatchActionToProps (to update the store). During the Dispatch Action is where one does the Fetching.

A Component calls DispatchActionToProps by returning an object with a key (the name of the function you want to assign to Props) and its value (the function you are importing from your actions file (check the ComponentDidMount picture to see how to call the mapDispatchToProps function).

We happened to be using OAuth for our site, so this ‘GET’ fetch will look a little different than one without authentication but the basic principles are still there. (Lines 1–22)

Lines 1 and 3 set the action type and the payload in the object that will get sent to the reducer. Lines 4–22 do the fetching. I am setting a req object with the method and headers (if it was a POST I would include a body as well). Then, on line 14 there is a fetch, on line 15 a response, and on lines 16–17, the dispatch to send to the reducer with the payload (actually I’m mapping over the data first, but it’s the same idea).

Once the fetch is done, then it is time for the reducer to update the state in the store. This is done by using a switch and case method (it’s just an if statement, really).

The reducer is accepting the ‘action’ from the dispatch. In this case we called the type ‘FETCH_USERS’ and the payload ‘users’. The big thing here is that you should not be overwriting or mutating the state, only updating it. That’s why on line 5 I am just spreading the state, then adding the ‘action.users’ object that I received from the dispatch.

That’s it! Now, any component that is subscribed to the users section of the store on a componentDidMount will dynamically update with the new users info! Easy, right??

Conclusion

When do you do a fetch during the Redux data flow? You do it in your dispatch action, just before updating the state! Hope this was helpful.