Redux in Russian
  • Read Me
  • Introduction
    • Motivation
    • Core Concepts
    • Three Principles
    • Prior Art
    • Learning Resources
    • Ecosystem
    • Examples
  • Basics
    • Actions
    • Reducers
    • Store
    • Data Flow
    • Usage with React
    • Example: Todo List
  • Advanced
    • Async Actions
    • Async Flow
    • Middleware
    • Usage with React Router
    • Example: Reddit API
    • Next Steps
  • Recipes
    • Configuring Your Store
    • Migrating to Redux
    • Using Object Spread Operator
    • Reducing Boilerplate
    • Server Rendering
    • Writing Tests
    • Computing Derived Data
    • Implementing Undo History
    • Isolating Subapps
    • Structuring Reducers
      • Prerequisite Concepts
      • Basic Reducer Structure
      • Splitting Reducer Logic
      • Refactoring Reducers Example
      • Using combineReducers
      • Beyond combineReducers
      • Normalizing State Shape
      • Updating Normalized Data
      • Reusing Reducer Logic
      • Immutable Update Patterns
      • Initializing State
    • Using Immutable.JS with Redux
  • FAQ
    • General
    • Reducers
    • Organizing State
    • Store Setup
    • Actions
    • Immutable Data
    • Code Structure
    • Performance
    • Design Decisions
    • React Redux
    • Miscellaneous
  • Troubleshooting
  • Glossary
  • API Reference
    • createStore
    • Store
    • combineReducers
    • applyMiddleware
    • bindActionCreators
    • compose
  • Change Log
  • Patrons
  • Feedback
Powered by GitBook
On this page
  • Redux Reducer Basics
  • Pure Functions and Side Effects
  • Immutable Data Management
  • Normalizing Data
  1. Recipes
  2. Structuring Reducers

Prerequisite Concepts

PreviousStructuring ReducersNextBasic Reducer Structure

Last updated 6 years ago

As described in , a Redux reducer function:

  • Should have a signature of (previousState, action) => newState, similar to the type of function you would pass to

  • 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 connect function:

  • 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, connect checks to see if the props returned from a mapStateToProps function have changed in order to determine if a component needs to update. To improve performance, connect takes some shortcuts that rely on the state being immutable, and uses shallow reference equality checks to detect changes. This means that changes made to objects and arrays by direct mutation will not be detected, and components will not re-render.

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:

Pure Functions and Side Effects

Key Concepts:

  • Side effects

  • Pure functions

  • How to think in terms of combining functions

Reading List:

Immutable Data Management

Key Concepts:

  • Mutability vs immutability

  • Immutably updating objects and arrays safely

  • Avoiding functions and statements that mutate state

Reading List:

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:

Reducers
Array.prototype.reduce(reducer, ?initialValue)
Redux Docs: 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
The Little Idea of Functional Programming
Understanding Programmatic Side-Effects
Learning Functional Programming in Javascript
An Introduction to Reasonably Pure Functional Programming
Pros and Cons of Using Immutability With React
Immutable Data using ES6 and Beyond
Immutable Data from Scratch
Redux Docs: Using the Object Spread Operator
Database Normalization in Simple English
Idiomatic Redux: Normalizing the State Shape
Normalizr Documentation
Redux Without Profanity: Normalizr
Querying a Redux Store
Wikipedia: Associative Entity
Database Design: Many-to-Many
Avoiding Accidental Complexity When Structuring Your App State