Redux 的工作流程

小王学前端️2024-03-21 1:07

Redux 是一个用于管理 JavaScript 应用程序状态的库。它的工作流程主要包括以下步骤：
1、Action 创建：当用户与应用程序交互时（例如点击按钮），会触发一个 Action。Action 是一个描述了发生了什么的普通 JavaScript 对象。

2、Dispatch Action：Action 通过 store.dispatch() 方法发送。

3、Reducer 处理：Reducer 是一个纯函数，它接收当前的 state 和一个 action，然后返回一个新的 state。

4、Store 更新：Store 保存了应用程序的整个 state 树。当一个新的 state 被 reducer 返回后，store 会更新，然后新的 state 会被传递给 UI。

以下是这个过程的伪代码：

javascript 复制代码

// Action 创建
const action = {
  type: 'ADD_TODO',
  text: 'Learn Redux'
};

// Dispatch Action
store.dispatch(action);

// Reducer 处理
function todoApp(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return Object.assign({}, state, {
        todos: [...state.todos, {
          text: action.text,
          completed: false
        }]
      });
    default:
      return state;
  }
}

// Store 更新
const store = createStore(todoApp);

这个过程中，Redux 提供了一种机制，允许 UI 组件订阅 store 的更新。当 store 更新时，UI 组件可以重新渲染，以反映新的 state。