As you may have heard, using Redux can hugely impact the user experience of your web page. If you haven't, well now you have. This is because the entire state of your application is kept in this fancy object that Redux calls, a "store". Redux is a state management library, so it utilizes this "store" object to manage the state of your application.
If you're familiar with React, which I hope you are if you're reading this, you've probably built out stateful components before. Ya know, the things that kind of look like this:
You can see here that our state is being managed on this specific component. Also, as you may know, you can re-render components by changing their state. Sometimes you need to affect the state of one component, based on the state of another. This is where Redux can come in as your hero and save you a ton of time, and hopefully from getting a headache. Let's get into some Redux.
First thing's first, I need to introduce you to a few terms:
- Payload Essentially a "chunk" of data/information.
- Action A payload of information to relay data to the store. They are the only source of information for the store. Using store.dispatch(), you are able to send this information.
- Reducer This is basically a JavaScript native reduce function that you'd access on an array, but a little more fun. This function takes the previous state and an action, then returns the new state. This is incredibly important as it provides the new state of our application.
- Middleware This simply provides a middlepoint between dispatching an action, and the moment it reaches the reducer. This is typically used for logging, routing, talking to an asynchronous API, and more.
- Store A container for the state of your application.
Now that we've got the terminology out of the way, how does this work? Lets make a small counter on our state which can increment and decrement. This means we will need an action or two. One to increment the counter on the state, and one to decrement the counter on the state. This action is an object that has a "type", which is basically a name or a description that the reducer will read. So, lets name them exactly what they are. Increment and Decrement:
These are basic JavaScript functions that return an object. The object has a "type" property, which will be used in the reducer. Don't over-think it, it's just like saying, "Hey, Reducer, do this to the state". You'll see how this is handled. Key take-away; these are simply functions that are returning objects, and when they are used, you actually invoke them so they have the value of that object when they are being passed to our store.
Bringing us to our next point, our reducer. As described above, this reducer is similar to the array method Array.prototype.reduce, which takes the current array, a function, then returns a new array. Here's a redux reducer:
Our "counter" function is taking the current state of the counter, or a default of 0, and an action, which as we learned before, is just an object. The switch statement is checking the "type" property, which just describes what the object is wanting to do, and we have two cases set here. One to handle the "type" that is set to 'INCREMENT', and one that handles 'DECREMENT'. This takes our state(the counter on the state specifically) and increases it by one or decreases it by one depending on the "type" specified in the action object.
This is part one of my Redux segment, next week I should have another post ready to go more in-depth and clarify a few more things. Feel free to leave some comments on things that could use better explanation or things you'd like to hear more about!
If you don't want to wait, here's the Redux "getting started", which can offer more clarification!
Top comments (2)
Nice article! Just getting started with Redux and this was a good introduction. Thank you.
Thanks a ton, glad I could help!