Redux 的运作原理：通俗易懂，一文掌握

前端

2024-01-27 02:35:06

Redux 原理浅析：通俗易懂，手把手带你入门

Redux 是一个广受推崇的状态管理库，最初用于 React 框架中，它有效地解决了层层传递数据的痛点。为了深入理解 Redux 的运作机制，本文将以浅显易懂的方式解析其核心概念：dispatch、reducer 和 state。

1. Dispatch：触发状态改变的信号

Redux 中的 dispatch 机制类似于发号施令的指挥官。当应用程序需要更新状态时，它会发出一个 action，而 dispatch 的职责便是将 action 传递给 reducer。

2. Reducer：状态更新的执行者

Reducer 是 Redux 中的核心部件，它接收 action 并根据 action 中指定的操作更新 store 中的状态。Redux 遵循一个单向数据流的原则，这意味着状态只能通过 reducer 进行修改。

3. Store：状态的中央仓库

Store 是一个对象，它包含应用程序的整个状态。当 reducer 更新状态时，Store 会自动通知订阅它的组件，以便它们及时更新 UI。

Redux 原理示例

为了更好地理解 Redux 的工作原理，让我们来看一个简单的示例：

// action
const ADD_TODO = 'ADD_TODO';

// reducer
const todoReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
};

// store
const store = createStore(todoReducer);

// 使用 dispatch 添加一个 todo
store.dispatch({ type: ADD_TODO, payload: '新 todo' });

在上面的示例中：