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。