Skip to content

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