redux执行流程

1. Store：

   • 定义：存储应用的状态，是一个对象树（object tree）。
   • 作用：整个应用只有一个 Store，作为状态的唯一数据源，保存了应用的所有状态。
   • 特点：Store 是只读的，不能直接修改它的内容；只能通过触发 Action 来间接地修改 Store。

2. Action：

   • 定义：描述发生了什么，是一个普通的 JavaScript 对象。
   • 组成：通常包含一个 type 字段，用来标识 Action 的类型，以及一些额外的数据（payload），来传递变化所需的参数。
   • 例子：{ type: 'INCREMENT', payload: 1 }

3. Reducer：

   • 定义：根据 Action 修改并返回新的状态，是一个纯函数。
   • 作用：接收当前的状态和 Action，返回一个新的状态。
   • 特点：Reducer 必须是纯函数，不能改变传入的参数，只能返回新的状态对象。
   • 例子：
     javascript

     复制代码

     function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - action.payload; default: return state; } }

4. Dispatch：

   • 定义：触发 Action 以改变状态。
   • 作用：将 Action 传递给 Store，从而触发 Reducer 执行，最终导致状态的更新。
   • 使用：store.dispatch({ type: 'INCREMENT', payload: 1 })

5. Subscription：

   • 定义：监听状态变化，更新 UI。
   • 作用：通过 store.subscribe 注册回调函数，当状态发生变化时，该回调函数会被调用，用于更新 UI 或执行其他副作用操作。
   • 使用：const unsubscribe = store.subscribe(() => { /* 更新UI逻辑 */ })
   • 取消订阅：调用 unsubscribe 函数可以取消订阅。

完整流程：

1. UI 组件触发 dispatch 方法发送 action。
2. dispatch 将 action 传递给 reducer。
3. reducer 根据 action 类型和当前 state 生成新的 state。
4. store 更新 state，并通知所有订阅者。
5. 订阅者收到通知，更新 UI。