This video is available to students only

Introducing Redux

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.

Introducing Redux#

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?#

Redux is an open-source library (based on Facebook’s Flux design pattern) that deals with shared state management. Specifically, it helps by giving us a robust state management design pattern that ultimately leads to a predicable state container for our JavaScript apps.

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.

It’s helpful to know that Redux isn’t a React-specific thing. The main Redux library is indeed aimed at any JavaScript-based app, but other frameworks have their own flavor of Redux too. For example, Vue.js has Vuex which is very similar to the Redux pattern.

Of course, we’ll be talking about Redux and learning about it with our React hats on, but the core principles remain relevant to just about any JavaScript project involving views.

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:

Moving parts of a Redux application

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.Provider we 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 useReducer Hook, which we’ll be talking about during our final lesson in this module.

Store and application state#

The most straightforward of the bunch to get to grips with is application state. It is simply a centralized object with various properties that represent the ‘state’ of our application at a given moment. It can contain anything your app needs, but typically it could contain collections of items, settings, preferences and so on. In a typical React project this is literally a regular old JavaScript object.

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.

 

This page is a preview of Beginner's Guide to Real World React

No discussions yet