Prerequisite Reducer Concepts

This page shows reducer patterns written by hand. See the Structuring Reducers intro for how they relate to Redux Toolkit's createSlice.

As described in "Redux Fundamentals" Part 3: State, Actions, and Reducers, a Redux reducer function:

• Should have a signature of (previousState, action) => newState, similar to the type of function you would pass to Array.prototype.reduce(reducer, ?initialValue)
• Should be "pure", which means the reducer:
  • Does not perform side effects (such as calling API's or modifying non-local objects or variables).
  • Does not call non-pure functions (like Date.now or Math.random).
  • Does not mutate its arguments. If the reducer updates state, it should not modify the existing state object in-place. Instead, it should generate a new object containing the necessary changes. The same approach should be used for any sub-objects within state that the reducer updates.

Note on immutability, side effects, and mutation

Mutation is discouraged because it generally breaks time-travel debugging, and React Redux's useSelector hook:

• For time traveling, the Redux DevTools expect that replaying recorded actions would output a state value, but not change anything else. Side effects like mutation or asynchronous behavior will cause time travel to alter behavior between steps, breaking the application.
• For React Redux, useSelector compares the value returned by your selector against the previous value by reference to decide whether a component needs to update. This means that changes made to objects and arrays by direct mutation will not be detected, and components will not re-render. See Why isn't my component re-rendering? in the FAQ.

Other side effects like generating unique IDs or timestamps in a reducer also make the code unpredictable and harder to debug and test.

Because of these rules, it's important that the following core concepts are fully understood before moving on to other specific techniques for organizing Redux reducers:

Redux Reducer Basics

Key concepts:

• Thinking in terms of state and state shape
• Delegating update responsibility by slice of state (reducer composition)
• Higher order reducers
• Defining reducer initial state

Reading list:

• "Redux Fundamentals" Part 3: State, Actions, and Reducers
• Redux Docs: Reducing Boilerplate
• Redux Docs: Implementing Undo History
• Redux Docs: combineReducers
• The Power of Higher-Order Reducers
• Stack Overflow: Store initial state and combineReducers
• Stack Overflow: State key names and combineReducers

Pure Functions and Side Effects

Key Concepts:

• Side effects
• Pure functions
• How to think in terms of combining functions

Reading List:

• Redux Style Guide: Reducers Must Not Have Side Effects
• Learning Functional Programming in Javascript
• An Introduction to Reasonably Pure Functional Programming

Immutable Data Management

Key Concepts:

• Mutability vs immutability
• Immutably updating objects and arrays safely
• Avoiding functions and statements that mutate state
• How Immer lets you write "mutating" code that produces immutable updates

Reading List:

• Redux Docs: Immutable Update Patterns
• React docs: Updating Objects in State and Updating Arrays in State
• Immer docs and Redux Toolkit: Writing Reducers with Immer
• Dave Ceddia: The Complete Guide to Immutability in React and Redux
• Immutable Data using ES6 and Beyond

Normalizing Data

Key Concepts:

• Database structure and organization
• Splitting relational/nested data up into separate tables
• Storing a single definition for a given item
• Referring to items by IDs
• Using objects keyed by item IDs as lookup tables, and arrays of IDs to track ordering
• Associating items in relationships

Reading List:

• Database Normalization in Simple English
• Idiomatic Redux: Normalizing the State Shape
• Redux Toolkit: createEntityAdapter
• Essentials: Performance and Normalizing Data
• Normalizr Documentation (stable, but no longer actively maintained)
• Querying a Redux Store
• Wikipedia: Associative Entity