prerequisite-concepts
Getting StartedTutorialAPIFAQBest PracticesGitHubNeed help?
🌜
🌞
Search
Prerequisite Reducer Concepts#
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 toArray.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
orMath.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 amapStateToProps
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:
Previous
« Structuring Reducers
Next
Basic Reducer Structure »
Docs
Community
More
Copyright © 2015–2021 Dan Abramov and the Redux documentation authors.
Last updated