Understanding Redux: Principles, Data Flow, Source Code Analysis, and a Simple Implementation

Redux is described as a "predictable state container for JavaScript apps" and has gained wide popularity (over 50k stars on GitHub).

Why use Redux? In small applications, component communication can be handled via props, routing, global events, or React Context. As applications grow, managing numerous state values (server responses, cache data, UI state) with these methods becomes complex and hard to debug. Redux provides a unified, predictable state‑management framework that scales with application size.

Redux data flow follows four steps:

Dispatch an { type: 'ACTION_TYPE', ... } object via store.dispatch(action) .

The store calls the supplied reducer function(s) to compute a new state.

Root combineReducers merges the results of multiple reducers into a single state tree.

The store saves the new state tree, making it available through store.getState() .

Three core principles of Redux:

Single source of truth – the entire application state lives in one object tree within a single store.

State is read‑only – you cannot modify state directly; you must dispatch an action that returns a new state.

Changes are made with pure functions – reducers must be pure, returning new state without side effects.

Source‑code overview (JavaScript version) :

1. index.js – entry file exporting core APIs such as createStore , combineReducers , applyMiddleware , etc.

export { createStore, combineReducers, bindActionCreators, applyMiddleware, compose, __DO_NOT_USE__ActionTypes }

2. createStore.js – creates the store with getState , dispatch , and subscribe methods.

export default function createStore(reducer, preloadedState, enhancer) { ... }

3. combineReducers.js – merges an object of reducers into a single reducer function.

export default function combineReducers(reducers) { const reducerKeys = Object.keys(reducers); return function combination(state = {}, action) { ... } }

4. bindActionCreators.js – wraps action creators so they automatically dispatch.

function bindActionCreator(actionCreator, dispatch) { return function() { return dispatch(actionCreator.apply(this, arguments)) } }

5. compose.js – composes functions from right to left.

export default function compose(...funcs) { if (funcs.length === 0) return arg => arg; if (funcs.length === 1) return funcs[0]; return funcs.reduce((a, b) => (...args) => a(b(...args))) }

6. applyMiddleware.js – creates a store enhancer that wraps dispatch with middleware.

export default function applyMiddleware(...middlewares) { return createStore => (...args) => { const store = createStore(...args); /* middleware logic */ return { ...store, dispatch } } }

Middleware example for logging actions and state:

const store = createStore(reducer);
const next = store.dispatch;
store.dispatch = (action) => {
  try {
    console.log('action:', action);
    console.log('current state:', store.getState());
    next(action);
    console.log('next state', store.getState());
  } catch (error) {
    console.error('msg:', error);
  }
}

Building a simple Redux from scratch :

Define a basic state object and a subscription mechanism:

let state = { count: 1 };
console.log(state.count);
state.count = 2;
console.log(state.count);

Introduce subscribe and changeState to notify listeners:

function subscribe(listener) { listeners.push(listener); }
function changeState(count) { state.count = count; listeners.forEach(l => l()); }

Encapsulate these in a createStore function that returns subscribe , changeState , and getState :

const createStore = function(initState) {
  let state = initState;
  const listeners = [];
  function subscribe(listener) { listeners.push(listener); }
  function changeState(newState) { state = { ...state, ...newState }; listeners.forEach(l => l()); }
  function getState() { return state; }
  return { subscribe, changeState, getState };
}

Implement a reducer‑like plan function handling INCREMENT and DECREMENT actions, and pass it to createStore :

function plan(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}
let store = createStore(plan, { count: 0 });
store.changeState({ type: 'INCREMENT' });
store.changeState({ type: 'DECREMENT' });

After this exercise, replacing plan with a true reducer and changeState with dispatch yields the full Redux workflow.

Redux DevTools – a Chrome extension that visualizes dispatched actions, state snapshots, and diffs, greatly improving debugging efficiency.

Conclusion – Redux is a compact, mature state‑management library with a rich ecosystem (e.g., react‑redux, dva). Studying its source code deepens understanding of frontend architecture and improves the ability to read other open‑source projects.