Introduction to Redux
If you’re relatively new to JavaScript, chances are you have come across mentions of Redux. What exactly is it? Well, to begin learning about Redux, it is similarly important to have an understanding of React since Redux is used in tandem to manage the state of an application.
What is React?
In case you have not previously worked with React, React is a JavaScript framework that assists in organization and structure of an application. Specifically, it allows a user to break the app out into sections called components. I previously went more in-depth about components in a previous blog post, so I won’t get into those details here. But TL;DR: components are small chunks of code written independently that combine to create a working application allowing for ease of management.
React has a lot of cool add-on features such as a virtual DOM, Babel (a transpiler), Webpack (a bundler), and more.
When working with React, components have props and state. Props — or properties — are variables containing data about an object and can be passed to different components. Props can only be passed up to a parent component before then being passed to a child component. They cannot directly be passed to a sibling component — only up to a parent or down to a child.
State is similar to props, except that data is mutable. A components state can change and be updated as part of a class component. State should not be modified directly, but updated using setState(). It is important to note though that once you start passing around the state to different components, it is passed as props. This is because the state of a component is not accessible as state to other components, just within the specific component where it is set.
The below example is a component from a hiring application using just React and not Redux. As you can see, this specific Job component only has an array of jobs as its state. But it is passing that state as well as a host of other props this component itself has received all to the JobsIndex component in the return of the render.
So you can imagine that once an app continues to grow and becomes larger, passing around state and props can become quite unwieldy. This is where Redux is particularly useful.
What is Redux?
Now that we have a basic understanding of React, props, and state — let’s do a shallow dive into Redux. One of the most fundamental benefits of using Redux is to help manage state for larger apps. Instead of passing around all of your state/props of components, the state is stored in a separate location — aptly named the store. If you’ve previously looked up Redux or stumbled across it, chances are you’ve seen the below imagery:
This is a visual representation of passing state/props with React vs Redux. With Redux and the state being held within the store, all of the components can make requests to the store and access the state without having to go through parent components.
With Redux comes two new functionalities — actions and reducers. Actions can be considered payloads that send information from your application to the store. This is the only way the store can be updated — via actions. Actions are an object and require a type as well as the information it is delivering.
A reducer is at its foundation a function that accepts the current state as well as the action to return the new state. Actions do not actually update the state, I more consider them as carrying instructions. They do not implement, but they direct. Reducers are functions that actually return the new, updated state to the store.
So in short, the Redux store holds all of the state of an application. Any changes you want made to this state need to be outlined in an action. The actions specify instructions for the reducer about what should be updated. The reducer then accepts these instructions, retrieves the previous state from the store, and updates it per the action. Then this updated state is sent to the store and accessible by components.
Let’s take a look at an example for this. As an overview, this project is a social platform that allows users to create groups, invite members, create posts, and upload media. The particular snippet below is the GroupCard, or the component that is displayed on the user home page of each group the user is a member of. When clicked, it links to the group page containing all the posts and media.
This is a component both accessing state from the store as well as dispatching an action. The mapState function is allowing the component access to state for group, user, and user_group information. The mapDispatch function takes the event.target data within the click event to send this information to an action.
In this project I have folders separating out the components, actions, and reducers for each aspect. For these examples, both the post and group action files are being utilized. The groupId data is sent to their respective actions (getPost and getSingleGroup) where they fetch post and group data specific to that id. Then actions are sent to the reducer — specifically FETCH_POSTS and FETCH_SINGLE_GROUP with their respective data.
The example above includes the group reducer function and you can see our previous dispatched action FETCH_SINGLE_GROUP being imported from “../actions/groupActions”. You can see the case for each type of action and the state that will be then updated and available in the store.
Which Should You Use?
There is a lot of functionality bundled up into both React and Redux and my blog only skims the surface. Usually my decision of which to use comes down to the size of an application. As previously mentioned, some apps reach a point where state/props in React become more a hindrance than a help. This is where I begin to consider Redux. But why not always use Redux? Honestly, getting a Redux app set up can be a lot of work. Which for a smaller app usually just feels unnecessary.
I would suggest using both and as you become more familiar with the process of passing state/props manually in React as well as managing a store with Redux you will start to get a feeling about which would be ideal. As always, thanks for reading and happy coding!
