Redux 基础

Redux 是 JavaScript 应用的状态容器，用来集中管理应用中需要跨组件共享的状态。它本身不绑定 React，也可以和 Vue、Angular、原生 JavaScript 或服务端脚本一起使用。

Redux 的核心价值不是“把所有数据都放到全局”，而是为共享状态建立一套可预测的更新流程：状态放在统一的 store 中，状态变化由 action 描述，reducer 根据 action 计算出新的 state。

Tip

Redux 适合管理跨页面、跨组件、需要追踪变化来源的共享状态。组件内部临时状态仍然应该优先放在组件自身。

核心术语

State

State 是当前应用状态的快照，通常是一个普通 JavaScript 对象。

const state = {
  msg: '张三',
};

在 Redux 中不要直接修改 state。直接修改会让数据来源难以追踪，也会破坏 Redux 对状态变更的约束。

Action

Action 是一个描述“发生了什么”的普通对象，必须包含 type 字段。按照约定，额外数据一般放在 payload 字段里。

const setMsgAction = {
  type: 'SET_MSG',
  payload: '李四',
};

Reducer

Reducer 是一个纯函数，接收旧的 state 和当前 action，返回新的 state。

const initialState = { msg: '张三' };

function reducer(state = initialState, action) {
  if (action.type === 'SET_MSG') {
    return { ...state, msg: action.payload };
  }

  return state;
}

Reducer 不应该发请求、读写外部变量或直接修改传入的 state。它只负责根据输入计算输出。

Store

Store 是 Redux 应用的状态中心，由 reducer 创建。它保存当前 state，并提供读取、派发和订阅状态变化的能力。

import { createStore } from 'redux';

const initialState = {
  msg: '张三',
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_MSG':
      return { ...state, msg: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

常用 API

getState

getState 用来读取当前状态。

const { msg } = store.getState();

console.log(msg);

dispatch

dispatch 是更新 state 的唯一入口。调用 dispatch(action) 后，store 会执行 reducer 并保存新的 state。

store.dispatch({
  type: 'SET_MSG',
  payload: '李四',
});

console.log(store.getState().msg);

subscribe 用来监听 store 的状态变化。每次派发 action 后，已订阅的监听函数都会执行。

const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

unsubscribe();

数据流

Redux 使用单向数据流：

Store 保存应用状态。
UI 根据 state 渲染。
用户操作或业务事件触发 action。
Store 把旧 state 和 action 交给 reducer。
Reducer 返回新的 state。
UI 根据新 state 重新渲染。

flowchart LR
  State["State"] --> View["View"]
  View --> Action["Action"]
  Action --> Reducer["Reducer"]
  Reducer --> State

#Redux 基础

#核心术语

#State

#Action

#Reducer

#Store

#常用 API

#getState

#dispatch

#subscribe

#数据流