⚡ 30 秒速记

• 用户操作派发动作，归约产生新状态
• 组件订阅需要的片段，状态变化驱动显示
• 列表数据与筛选条件分开保存
• 可推导结果用选择器，避免重复状态
• 局部交互不必全部进入全局存储

React 与 Redux 配合时，页面把操作描述成动作，存储负责产生新状态，订阅再把变化带回界面。 以待办列表为例，保存条目和筛选条件，显示列表从两者计算出来，不必再存第三份结果。组件通过连接器或钩子读取所需片段，减少对整个存储结构的依赖。只属于一个输入框的临时状态可以留在组件里，别为了统一把所有东西都全局化。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

以TODO为例分析，实际开发中并不是那么简单，下面的原型只是开发中的一个原型，这个简单的例子，有助于掌握数据处理传递的原则。

一、定义constants

这一步不是必须的

/**
 * 常量统一保存，便于管理
 */
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY = 'SET_VISIBILITY';

//controll todo wheher show or hide
export const SHOW_ALL = 'SHOW_ALL';
export const SHOW_ACTIVE = 'SHOW_ACTIVE';
export const SHOW_COMPLETED = 'SHOW_COMPLETED';

二、定义actionCreator

/**
 * 定义action creator
 */

import * as actionType from '../constant/index';

let nextTodo = 0;

export const addTodo = (text)=>({
  type:actionType.ADD_TODO,
  id:nextTodo++,
  text
})

export const toggleTodo = (id)=>({
  type:actionType.TOGGLE_TODO,
  id
})

export const setVisibilityFilter = (filter)=>{
  return {
    type:actionType.SET_VISIBILITY,
    filter
  }
}

三、定义reducer

拆分reducer

• SetVisibility.js

/**
 * 处理TODO可见与不可见的reducer
 */
import * as actionType from '../constant/index';

// 初始状态是自己设置的 后面的状态会转化
// 接收当前状态(设置默认的过滤SHOW_ALL，如设置某些选项卡的active一样)，和action返回新的state
export const visibilityFilter = (state='SHOW_ALL',action)=>{
  switch(action.type) {
    case actionType.SET_VISIBILITY:
      return action.filter;
    default:
      return state;
  }
}