Redux
基础
对于初学者,有大量概念需要记忆
可预测的状态容器
可预测 | 集中管理 | 易于定位 debug
概念
store
state
emit action
pure reducer
// 创建 store,绑定 reducer
let store = createStore(counterReducer)
介绍了适用场景 Redux is more useful when:,使用前需要思考适用场景 https://redux.js.org/tutorials/essentials/part-1-overview-concepts
action event type "domain/eventName" Action Creators
dispatch 触发事件
reducer event listener, update state reducer fn 实现形式不限制,if-else 也可以
getState 获取
selectors alias
数据流
单向数据流流程:
- state 描述某一时刻应用条件
- 基于 state 渲染 UI
- 事件触发,state 更新
- 基于新状态 re-render UI
redux 应用数据流:
- UI 组件仅关心的数据变化时,re-render
https://redux.js.org/tutorials/essentials/part-1-overview-concepts#redux-application-data-flow
什么时候使用 redux
Most form state probably shouldn't be kept in Redux.
官方 toolkit
configureStore
slice reducer/action 集合,某个特性
自动生成 action
thunk 转换程序,异步逻辑
createSlice 配置描述,很像 vuex 的 store 文件,内置 immer 库,支持同步写法
手写不可变更新逻辑,意外修改 state,是 redux 使用最常见错误
redux-thunk 中间件
redux dev tool
diff 数据项变化
trace 定位 action 触发位置
redux-saga library
saga 专门处理副作用 中间件 Generator
fork 派生 用途 非阻塞任务
最终导出,rootSaga, rootReducer
takeEvery or takeLatest saga 有多个时
https://github.com/redux-saga/redux-saga-beginner-tutorial
Redux 最大的问题不在于 boilerplate,而在于违反 code locality,也就是处理相近逻辑的代码必须放在相近的位置。你想看完一个 action 前后所有逻辑?那你至少要打开三四个文件,看看它是如何被 dispatch 的,看看它的 reducer 做了什么。如果这是个异步操作,你还要跨越多个 action 才能理解从前到后这到底在做什么。
链接:https://www.zhihu.com/question/525009644/answer/3172271462