redux 工作原理

106 阅读2分钟

概念:

  • redux: 状态管理库,集中存储和管理状态
  • reducer: 纯函数,接收当前state和action,返回更新后的state
  • dispatch:修改store的唯一方法;分发action,store 会调用reducer来更新状态
  • action:是个对象
  • action创建函数:返回action变量,如果要想返回一个函数的,需要使用中间件redux-thunk

redux工作原理基于以下几个核心原则:

  1. 单一状态树:全局store中,使得状态管理变得集中和可预测
  2. 状态不可变性(state只读):状态树中的状态是不可变的,需要更新时创建一个新的状态对象,并返回它。这确保了状态的变更可以被追踪和预测
  3. 纯函数式处理状态:Reducer是一个纯函数,它接收当前的state和一个action作为参数,并返回一个新的state。纯函数的特点是对于相同的输入(state和action),它总是返回相同的输出(新的state)。这使得状态的变化变得可预测和易于调试。
  4. 组件订阅机制:Redux提供了一种机制,允许UI组件订阅store的更新

redux 的流程步骤:

1. 初始化store

createStore(reducers,initialState,applyMiddleware(thunk))

2. 派发action

派发action:从ui层发出,会触发一个action的创建;创建后通过store.dispatch(action)方法发送到Redux的store中。

3. reducer 处理action

store将接收到的action 分发给 对应的reducer

4. store 更新

store接收到reducer返回的新的state后, 会自动更新内部状态树 Store还会调用所有通过store.subscribe(listener)方法注册的监听器,通知它们状态已经更新。

5. UI 组件响应

  • 可以使用getState()
  • 可以使用connect将组件和redux链接起来,这样就可以使用props获取了
  • 函数式组件使用useSelector() hooks 获取

6.store.subScribe(callback) 订阅 state 变化

只要store发生变化, 就会触发subScribe

不过,在React应用中,你通常不需要手动管理订阅和取消订阅,因为react-redux库会为你处理这些工作。