What is Redux? Learning the basics

Alex Lobera
Sep 10, 2018 · 3 min read

Redux is all about state. If you want to learn Redux you should have a clear understanding of what the state of an app is. To make sure we understand it let me ask you something. Looking at the following application, is the selected tab part of the state? Is the data that populates the chart part of the state of the application? Are both data from the API and the selected tab part of the state?

Consider a non-tech-savvy user using the previous app and performing the following actions. First, the user runs the app for the first time. The app initially displays a tab with the day option selected and a chart with data from the current day. Then the user clicks on the month tab. Then the app fetches data of the current month from an API and it displays the new chart. At that point, the user opens a different application. After a few minutes, the user switches back to our app.

Imagine you told this non-tech-savvy user that when she/he is using the application and switches to a different app, and then she/ he comes back to our app she/ he will find the app in the same “state”. What do you think the user expects to see? The user expects to see both the same chart and tab. Therefore both the UI data and the API data are part of the state.

Some devs might think mistakenly that only the data that comes from the API is part of the state. This is actually not that surprising if we consider how many years front-end developers have been storing state on the UI, using for instance data- attributes or even CSS classes.

In a state is key, and we should take good care of it.

The box metaphor

You could think of Redux as a box.

  • The box organizes the state in a simple place
  • You can ask the box what is the current state.
  • You can describe changes in the state of the box.
  • The box will notify changes to subscribers.

The three principles

  • The state of the app is stored in one JavaScript object.
  • The state is read-only, but we can change the state by describing a change with another JavaScript object called action.
  • Changes are executed by called . A reducer accepts the current state and an action and returns a new state or the same state.

The store

The store is the core of the library and it wires the three principles up. The store contains three methods:

  • getState
  • dispatch
  • subscribe

The following code implements the Redux store with 20 lines of code. Obviously, the library is more sophisticated and performant and the library’s implementation is more than the following few lines of code. This simplified version is functional and should help you understand the three main pieces that make the Redux library.

To demonstrate our implementation is functional, here is an example using it:

As you can see in the previous example, with Redux we can manage the state of an application independently of the library that we use to build the UI. You can use Redux with React, Angular, jQuery or pure JavaScript as we did in the previous example.

Key concepts

  • Redux follows the .
  • Redux keep the state of the application in a single read-only JS object
  • To change the state we dispatch actions and process the changes.
  • All the reducers receive all the actions.

This article is part of the training material of the for professional developers.

Discover more about Redux in the on the React JS Academy website. You can also book a one-week bootcamp with our React experts

LeanJS

React, GraphQL, UX, Lean news and opinion

Alex Lobera

Written by

JavaScript passionate. Loves Lean, UX, and digital products that make social impact. Currently a React & GraphQL enthusiast.

LeanJS

LeanJS

React, GraphQL, UX, Lean news and opinion