One of the best ways to manage your apps' centralized state is with the redux pattern. In this lesson we'll deep dive into redux and how you can use it for managing state.
There are few areas of discussion as divisive as Redux in the React community. If you’ve spent even a little time looking for content on Redux, you’ll come across a myriad of choices, opinions and rabbit holes to get lost in:
What is Redux?
Why should we use it?
Should we use it?
Should we use React-Redux, Redux-Toolkit,
useReducer, make our own version, or a third-party alternative?
Does our app need state management at all?
The trouble is, Redux can be a complex subject for beginners to grasp, both on the theoretical side and in physically implementing the various moving parts. And that’s without getting into the discussion of whether your project needs it at all!
So let’s start with the what, then explain the why, and then move on to the how, by building our own Redux demos to cement the theory.
What is Redux?#
Its power comes from the predictability that it provides when it comes to state. We can write applications that behave consistently, especially when run in different environments (such as client, server, native, etc.). We also remove the otherwise tight coupling between components, their state management responsibilities, and all the extra code they would need to carry this out.
Think of Redux as a state management concierge. We tell it what action we’d like to take against our app state, supply it with some new data, and it takes care of the rest.
Redux and its moving parts#
Redux’s implementation and key concepts can be tricky to get to grips with, but we’ll go through each of the moving parts and explain what they are and how they operate.
Take a look at this diagram:
This represents a typical state interaction between a component wanting to receive particular items from state and make changes to it, and the Redux ecosystem that allows it to happen.
The key players here include:
State - the centralized area for our app’s shared data.
Action or action creator - usually a function that a component passes its proposed changes in state data to.
Dispatch - another function that takes the result of the Action and dispatches this to a specific reducer.
Reducer - the main player; responsible for physically applying the changes to state.
Connect - a function that maps selected items of state and the dispatch method to a component’s props, so it can use them when the time is right.
Store - much like the
Context.Providerwe learnt about in the Hooks module, a Redux Store provides a wrapper around our main app to wire all the pieces together.
Let’s take a walk through these various parts of the redux lifecycle and connect up the pieces of the puzzle, exploring them a little deeper as we go.
You can also take a look at my article on Redux for more info on this process, including the
useReducerHook, which we’ll be talking about during our final lesson in this module.
Store and application state#
In more complex applications you might find that state is broken into small sections (often referred to as ‘slices’ in Redux land) which are then stitched together when the application is served.
The Redux store is like the master state, holding the entire state tree for our application. More than this, however, it wires up the various moving parts, such as reducers, dispatchers, and actions, to the centralized state.
In React, the store is usually passed to a provider that wraps around the main app mounting point.