Redux By Example: Part 2

Exploring common patterns in Redux.

This article is part of a series (starting with Redux By Example: Part 1) of articles that, 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.

Array: Adding Delete

In the previous array examples, we focused on creating (adding) and reading; we now will focus on deleting (removing).

note: Because the array is a simple list of strings, we will hold off on the final Update operation (in Create, Read, Update, and Delete or CRUD) until a later example.

Run the example with the command node dist/array-delete.js .

Looking at this example’s source code:

• Like before, the application state consists of an array (initialized to be empty).
• The reducer function, myReducer, handles two types of actions: ADD and the new REMOVE.
• By using the array spread syntax in the REMOVE case, the reducer’s implementation continues to be a pure function.

List

Unlike previous array examples (simple list of strings), this example demonstrates a more complex list of objects (uniquely identified by an id).

To efficiently support getting a single object from an id (getting a single object out of an array is an expensive operation), we will store the list in two “leaves” in the object tree:

byId: This an object with the ids as keys, e.g.,

{
  a: {
    id: 'a',
    name: 'apple',
    description: 'Red, sweet, and tart',
  },
  b: {
    id: 'b',
    name: 'banana',
    description: 'Yellow, sweet, and creamy',
  },
}

ids : This is an array of the ids, e.g.,

['a', 'b']

Run the example with the command node dist/list.js.

Looking at this example’s source code:

• The application state consists of two leaves, byId (initialized as an empty object) and ids (initialized as an empty array).
• The reducer function, myReducer is formed by combining two reducer functions (each managing their leaf of the object tree) and handles two types of actions: ADD and REMOVE.
• This example introduces the ES2015 object literal shorthand syntax in the combineReducers call and the proposed (but often used in Redux applications) JavaScript object spread syntax in the ADD implementation.

note: You may have felt that it is unnecessary (it actually is) to include the entire object in the REMOVE action; the id is the only thing that is used. It was included it here as we will later incorporate another complementary module normalizr that requires this implementation.

List: Adding Fetch

One typically will load (fetch) a list from an external source, say an API, as part of the application startup.

Run the example with the command node dist/list-fetch.js.

Looking at this example’s source code:

• The FETCH implementation in both reducers needs to handle an array of objects; as opposed to the single object in ADD.
• The implementation is a bit messy as we need to convert the array in the action to an object with ids as keys (in byId) and into an array of ids (in ids).

List: Adding Update

In this last example, we flesh out CRUD with the Update operation.

Run the example with the command node dist/list-update.js.

Looking at the example’s source code:

• The reducer function ids remains unchanged; updating does not change and object’s id.
• The UPDATE implementation of the byId reducer is identical to the ADD implementation; so the change is trivial (adding one line).

The Next Part

In the next part, Redux by Example: Part 3, we will use the normalizr module to streamline the reducer’s code.

We will also introduce the concept of action creators.