概念:
- redux: 状态管理库,集中存储和管理状态
- reducer: 纯函数,接收当前state和action,返回更新后的state
- dispatch:修改store的唯一方法;分发action,store 会调用reducer来更新状态
- action:是个对象
- action创建函数:返回action变量,如果要想返回一个函数的,需要使用中间件redux-thunk
redux工作原理基于以下几个核心原则:
- 单一状态树:全局store中,使得状态管理变得集中和可预测
- 状态不可变性(state只读):状态树中的状态是不可变的,需要更新时创建一个新的状态对象,并返回它。这确保了状态的变更可以被追踪和预测
- 纯函数式处理状态:Reducer是一个纯函数,它接收当前的state和一个action作为参数,并返回一个新的state。纯函数的特点是对于相同的输入(state和action),它总是返回相同的输出(新的state)。这使得状态的变化变得可预测和易于调试。
- 组件订阅机制: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库会为你处理这些工作。