Oaker的知识库

外观

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 数据项变化 image.png

  • trace 定位 action 触发位置

redux-saga library ​

Read Me · Redux-Saga

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