⚡ 30 秒速记

  • 存储保存当前状态与订阅者
  • 基础 dispatch 同步执行归约并通知订阅
  • combineReducers 按状态键分工
  • 动作创建器只造动作,绑定后才自动派发
  • 中间件与增强器包装能力,不改变核心数据流

Redux 核心可以理解为一个受约束的状态盒子:派发动作,计算新状态,再通知订阅者。 基础派发是同步执行归约函数,并不是把普通动作放进异步队列。组合归约函数只是按键拆开状态计算,动作创建器则负责构造描述。中间件和增强器在外层扩展能力,但最终状态变化仍要回到这条可追踪路径,便于测试和调试。

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

# 一、index.js

https://github.com/reactjs/redux/blob/master/src/index.js

  • 暴露了几个核心API
import createStore from './createStore';
import combineReducers from './utils/combineReducers';
import bindActionCreators from './utils/bindActionCreators';
import applyMiddleware from './utils/applyMiddleware';
import compose from './utils/compose';

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

# 二、createStore.js

https://github.com/reactjs/redux/blob/master/src/createStore.js

  • redux.createStore(reducer, initialState) 传入了reducer、initialState,并返回一个store对象
  • store对象对外暴露了dispatch、getState、subscribe方法
  • store对象通过getState() 获取内部状态
  • initialState为 store 的初始状态,如果不传则为undefined
  • store对象通过reducer来修改内部状态
  • store对象创建的时候,内部会主动调用dispatch({ type: ActionTypes.INIT });来对内部状态进行初始化。通过断点或者日志打印就可以看到,store对象创建的同时,reducer就会被调用进行初始化
webapp
公众号
开发者导航
切换夜间模式
点击侧边栏上一篇
点击侧边栏下一篇
折叠侧边栏
收起全部