Design Philosophy, Source Code Analysis, and Best Practices of Redux

Design Philosophy of Redux

Redux is a JavaScript state container that provides predictable state management. It treats a web application as a state machine where each view corresponds to a specific state, and all states are stored in a single object.

Key concepts include:

Store – the single source of truth.

State – a snapshot of the data at a given moment.

Action – a notification from the view that the state should change.

Action Creator – a function that creates actions.

Reducer – a pure function that receives the current state and an action and returns a new state.

dispatch – the only way to send an action to the store.

The data flow is unidirectional: the view dispatches an action, the store runs the reducer to produce a new state, and listeners update the view.

Why Use Redux?

Front‑end complexity arises from irregular interactions and asynchronous operations, which make state hard to control. Redux makes every state change predictable, centralizes actions and state, and enables easy tracing and debugging.

Compared with Flux, Redux uses a single store, removes the dispatcher, and introduces middleware that can intercept actions before they reach the reducer.

Related Architectural Concepts

Redux draws inspiration from Flux, CQRS (Command Query Responsibility Segregation) and Event Sourcing (ES). ES stores events instead of the latest object state, enabling high performance, simplified storage, and traceability, while also having drawbacks such as event loss and schema compatibility.

CQRS separates read and write models, often relying on ES for event storage.

Flux enforces a one‑way data flow with multiple stores and a dispatcher.

Source Code Analysis

The article walks through the Redux source files on GitHub.

index.js

Provides the public API and aggregates all Redux methods.

createStore.js

Creates the store, initializes the state with an internal INIT action, and exposes dispatch, subscribe, getState, and replaceReducer.

bindActionCreators.js

Wraps action creators with dispatch so they can be called directly.

combineReducers.js

Merges multiple reducers into a single reducing function.

compose.js

Composes functions from right to left, used by middleware.

applyMiddleware.js

Enhances the store by wrapping dispatch with a chain of middleware.

Typical usage:

const store = createStore(reducer, applyMiddleware(...middlewares));

The middleware chain receives { getState, dispatch }, returns a function that receives next, and finally returns a function that processes the action.

Example: redux‑thunk checks if the action is a function and, if so, invokes it with dispatch and getState.

Best Practices

Use object spread for readability.

Separate smart components (aware of state) from dumb components.

Keep async calls out of components; handle them in action creators.

Keep reducers pure and simple; move complex logic to action creators.

Never mutate state; always return a new object.

Consider immutable.js for immutable data structures.

Use promises/async‑await or redux‑thunk/redux‑saga for side effects.

Connect components to the store only where necessary, usually higher in the tree.

Avoid over‑using custom middleware.

Assess whether Redux is needed for a given project.

Author

Yingying, front‑end engineer at Meituan Waimai, responsible for the merchant management platform and sales app.