⚡ 30 秒速记

  • 请求生命周期拆成开始、成功和失败
  • 异步编排与同步状态计算分开
  • thunk 可读取状态并派发多个动作
  • 请求编号处理竞态,幂等处理重复副作用
  • 乐观更新要有确认与回滚依据

异步状态管理要把等待过程也表达出来,而不只是拿到数据后写一次状态。 请求开始时记录加载与标识,成功或失败时更新对应结果;执行请求的逻辑放在副作用层,归约函数仍同步计算。多个请求并发时,结果要能对应到自己的参数和编号。想先改界面再等服务端确认,就准备好回滚或重新校准策略,避免失败后留下虚假的成功状态。

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

# 一、创建同步Action

Action是数据从应用传递到 store/state 的载体,也是开启一次完成数据流的开始

普通的action对象

const action = {
	type:'ADD_TODO',
	name:'poetries'
}

dispatch(action)

封装action creator

function actionCreator(data){
    return {
    	type:'ADD_TODO',
    	data:data
    }
}

dispatch(actionCreator('poetries'))

bindActionCreators合并

function a(name,id){
	reurn {
		type:'a',
		name,
		id
	}
}
function b(name,id){
	reurn {
		type:'b',
		name,
		id
	}
}

let actions = Redux.bindActionCreators({a,b},store.dispatch)

//调用
actions.a('poetries','id001')
actions.b('jing','id002')

action创建的标准

在Flux的架构中,一个Action要符合 FSA(Flux Standard Action) 规范,需要满足如下条件

  • 是一个纯文本对象
  • 只具备 type 、payload、error 和 meta中的一个或者多个属性。type 字段不可缺省,其它字段可缺省
  • 若 Action 报错,error 字段不可缺省,切必须为 true

payload 是一个对象,用作Action携带数据的载体

标准action示例

  • A basic Flux Standard Action:
{
  type: 'ADD_TODO',
  payload: {
    text: 'Do something.'  
  }
}
  • An FSA that represents an error, analogous to a rejected Promise
webapp
公众号
开发者导航
切换夜间模式
点击侧边栏上一篇
点击侧边栏下一篇
折叠侧边栏
收起全部