Redux By Example: Part 1

Learn Redux by example not through theory.

So, you have heard that the one of the more popular front-end development environments is pairing React with Redux. You likely got through the React tutorial with little trouble, understood the main gist of Redux, and then maybe had your brain melted watching the official video tutorial Getting Started with Redux.

As a reminder, the gist of Redux is:

The whole state of your app is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.

excerpt from Read Me — Redux

This series of articles, through a series of progressively more complicated examples, illustrates a number of core Redux concepts. These examples are provided as Node.js applications; without any browser or React complexities.

Hello World

First, we build the simplest Redux application; drawn from the first example provided at Read Me — Redux.

note: Because the future of JavaScript development is ES2015, and most Redux examples are written in it, we will follow suit. This, however, adds an additional level of complexity as we will need to use Babel to transpile the ES2015 code back to ES5 to run.

note: Windows users, will need to change the slashes to back-slashes in the command line examples.

To build and run:

1. Install Node.js.
2. Download and extract the repository Redux Patterns.
3. From the extracted folder, run npm install
4. Run the command ./node_modules/.bin/babel src -d dist
5. Run the command node dist/hello-world.js

Looking at this example’s source code:

• The application state consists of a single integer (initialized to 0).
• The reducer function, counter, handles two different types of actions: INCREMENT and DECREMENT.

Array

In this next several Redux applications, we illustrate one of the three Redux principles, specifically:

Changes are made with pure functions

First, run the first example with the command node dist/array.js .

Looking at this example’s source code:

• The application state consists of an array (initialized to be empty).
• The reducer function, adder, handles a single type of action: ADD.

In this context, adder is a pure function as it does not modify the state parameter (the array), but rather returns a new array consisting of the original array’s contents appended with the new value. This example use the ES2015 array spread syntax.

In contrast, the commented out lines, while likely more familiar, does modify the state parameter.

The first observation is that both the correct pure function implementation and the commented out broken implementation would produce the same output. So, why are pure functions important?

To illustrate the difference in behavior, run a broken example with:

node dist/array-broken.js.

and run a fixed example with:

node dist/array-fixed.js

The key to understanding the implications of the broken source code and the fixed source code is the purpose of the following common code.

let lastState = store.getState();
store.subscribe(() => {
  const newState = store.getState();
  console.log(newState);
  console.log(newState === lastState);
  lastState = newState;
});

The point of the common code is to efficiently detect changes in the state. Rather than the expensive operation of comparing the values of lastState (a reference to an array) and the newState(also a reference to an array) element by element, we efficiently compare the references. In broken example, both variables refer to the same array object (thus outputting true) and in the fixed example, both variables refer to different array objects (thus outputting false).

note: It is particularly important to write reducers as pure functions if you are using complementary tools, e.g., react-redux. These tools, like our example, use the === operator to detect changes in branches of the state.

The Next Part

In the next part, Redux by Example: Part 2, we will flesh out a more complicated example that includes all the Create, Read, Update, and Delete (CRUD) operations.