Skip to main content
Kinetic Community

Redux, the front end's backend?!

Overview

This article will attempt to give the reader some understanding of Redux. There are two explanations for Redux given. One uses a physics experiment as an analogy about Redux and the other will give a practical example.

To start let's describe Redux as a "predictable state container for javascript apps." What does that mean? The key to understanding this statement is to understand state. The easiest way to think of state is to think of water.

Note: React component state is not the same as Redux application state!

Physics Analogy

Water has three states solid, liquid or gas. Let's put some water in a jar and put the jar in front of a camera. Then we will heat and freeze the water, which will change its state. Each time the state of the water changes we will take a picture of the jar. The pictures will have timestamps for chronology.

In an experiment:

  • The jar is then heated and cooled many time.
  • At the end of the experiment the camera will have taken several pictures.
  • Each picture would show the water in its current state.
  • After the experiment we could look over the pictures and know what state the water was in at a give time.

Redux is this experiment:

  • The water represents the data of the application.
  • The water's state represents the state of the data of the application.
  • The jar holding the water represents the container that holds the application's state.
  • The heating and cooling of the jar represent the actions that change the application's data.
  • The camera represents Redux's ability to take snapshots of the data.
  • Finally, the pictures the camera took represent snapshots of the data through time. Redux can "time travel" through those snapshots.

Let's say that a developer wants to use the experiment as an application. The developer creates a UI with a image of water in a jar and two buttons. One buttons will heat the water and the other will cool the water. When the water changes state the developer wants to display the current state to the user as an image. The user will see the image of the water in the jar as an ice cube or liquid water or water as a gas. When the user interacts with the buttons they will see the image of the water in a jar change. An example would be the user heats the water and the image changes from an ice cube in a jar to a jar with liquid water.

When the user uses the button to heat the water they are causing an action to occur. This action will cause a change in the applications state. Redux will pick up the new state and tell React to update the UI. Redux uses reducers to update the state. We will go into reducers in later articles.

  • A container is what connects Redux's application state to React's UI components.

Practical Example

  1. The Kinops catalog bundle initially has no state.
  2. When the user first receives the application the bundle code takes several actions. Some examples of the actions the bundle take are fetching categories and forms.
  3. After the bundle code dispatches the fetch action it will update the application's state.
  4. The new state will have a loading property set to true. React components use the loading property to display the application's state to the user.
  5. The application receives the categories and forms data from the Kapp.
  6. The bundle code will dispatch another action to set the category and form data.
  7. The bundle code will again update the application's state with the new data. The new state will have the properties holding the categories and forms data.
  8. At the same time the loading property is set to false.
  9. React components will receive this new state as props.
  10. React components will reflect the new application state.

A container is the bundle code that dispatches actions and updates components. A third party library called react-redux does this using a component called connect. The application now has three snapshots of its state. The initial empty state (step 1), after dispatching the fetch action (step 3) and after dispatching the set action (step 6). Using Redux dev tools extension developers can "time travel" the applications state.