What Is Redux Exactly?

30 / 04 / 2024

Read Time 5 minutes

title image unsplash austin chan

You’ve seen Redux mentioned in nearly every “Getting Started with React” article you’ve read. Terms like actions, reducers and store keep cluttering your understanding. Let’s break down what Redux is from a top-down approach and then look at some code. 

Redux, State Management and State 

Redux is a predictable state container. What does that mean? It means that Redux provides tools for you to help manage state within your applications in a predictable way. Redux makes this process “predictable” by defining a pattern you must follow to make changes to your state. This pattern follows an immutable approach. 

State management is a way of allowing us as developers to add, remove, update and access state in our applications. 

State is the current representation of all the actions the user has performed. Clicking a button to get a list of data from an API is state. Tracking if the user is typing with a variable called isTyping is state. Filling in information on a form is state. 

Global and Local State 

These are terms you’ll see often and a part of what Redux solves. 

Local state is local to a given component. Like with our previously mentioned isTyping variable. That variable is only relevant to the component that is making use of it or even just the input field that is making use of it. 

Say we fetch a user’s profile details from an API. What if we need to show the user’s name on the DashboardComponent.js and then on a ProfileComponent.js? Would you make two API calls to the same endpoint to get the same data or would you rather make a single call, store that data somewhere and allow both components to have access to that data? This data would then be regarded as being global state because the entire application can access it. This is the type of situation that Redux helps solve. 

Is Redux the only solution? 

Hell no. Redux is one of the oldest and most popular forms of state management in React but it is by no means the only approach. Libraries like mobx-state-tree and recoil provide you with alternative ways of managing state. Also, Redux is just a pattern with corresponding npm libraries. You could take this pattern and implement it on your own or in other technologies/stacks/languages like what they’ve done in Flutter. 

How does Redux work? 

Redux was created by Dan Abramov and Andrew Clark in 2015. They decided to build off of Flux and implement some of it’s key concepts like a unidirectional data flow pattern. 

Flux and Redux’s data flow looks like this: 

1 flux architecture 

Actions 

Actions are payloads of information that are dispatched to the store. Dispatching an action is the only way to manipulate the store. 

2 example action

Actions follow the general model of a FSA (Flux Standard Action) which is a human-friendly model that allows us to more easily reason with actions. 

Note: It’s suggested that the type is a string constant and if your app’s scale is increasing, then you move those constants into their own module. This avoids using string literals and potentially having a typo between the type value in your action and then type value we’ll perform a switch on in our reducer. For this demonstration, we’ll just use a string literal for simplicity’s sake. 

Action Creators 

We create action objects by defining an action creator. Action creators are functions that we call to create an action for us. 

This provides us with an object that has a function property called newItem. If we provide that object with a data value of say “Chocolate”, it’ll produce an action like the one we saw in initial example of an action object. 

3 example action creator

Dispatcher 

The dispatcher’s job is to simply dispatch actions. The reducer will listen out for any dispatched actions and then act accordingly. 

Before the React Hooks era, you could make use of store.dispatch() to dispatch your actions for you. 

With React Hooks, you can write an implementation like this: 

4 dispatch example 

Then just wrap any action or action creator method in dispatch(). 

Reducers 

Reducers are functions that specify how are state must change in response to each action. Action objects are only telling us which action happened and provide any relevant data. It’s the reducer’s job to actually build the new state. 

To build off of our current example: 

5 reducer example 

  1. We’ve created our initialState object that just has a property of items which is an empty array to begin with. 
  1. We’ve defined a reducer that takes in two arguments, state and action. 
  1. The state represents the current state and is provided an initial value thanks to our initialState variable. 
  1. action is the action that has just been dispatched to the reducer. 
  1. We perform a standard switch case on the action.type to see if it’s match. 
  1. Making use of spread operator in ES6 (check this out if you’re unfamiliar with ES6 awesomeness), we return a new state object that has the payload value from the action appending to our list array. 

 

That’s pretty much it for describing and setting up the unidirectional data flow in your application. 

Our next post will look at implementing Redux into your React application a little bit more indepth. We’ll build an app called “ShopDrop” that allows for users to add items to their shopping list, mark them as in their basket, remove an item from their list or clear the whole list. 

This should give you some more insight into Redux’s role in a full scale React app. 

 

View
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website.

These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Necessary

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-Necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.