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 declarative UI like React 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
- Changes are executed by pure functions called reducers. A reducer accepts the current state and an action and returns a new state or the same state.
The store is the core of the library and it wires the three principles up. The store contains three methods:
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:
- Redux follows the one-way data flow of React.
- Redux keep the state of the application in a single read-only JS object
- To change the state we dispatch actions and reducers process the changes.
- All the reducers receive all the actions.
This article is part of the training material of the ReactJS Academy React & Redux & GraphQL Bootcamp for professional developers.
Discover more about Redux in the full version of this article on the React JS Academy website. You can also book a one-week bootcamp with our React experts