Redux 简介 (Action、Reducers 和 Store)

Redux 是一个用于 JavaScript 应用程序的可预测状态容器。它帮助程序员管理复杂的状态，并使状态的变化可追踪。Redux 的核心概念包括 Action、Reducers 和 Store。

Action

Action 是一个描述状态变化的普通 JavaScript 对象。它必须包含一个 type 属性来指示所执行的操作类型，还可以包含一些额外的数据属性。

const action = {
  type: 'ADD_TODO',
  payload: {
    text: 'Do homework',
    priority: 'high'
  }
};

Action 可以通过 dispatch 方法来触发。当 dispatch 被调用时，Redux 会将 Action 分发到应用程序的各个部分，以便它们可以根据类型来执行相应的操作。Action 是 Redux 状态变化的唯一来源。

Reducers

Reducers 是一个纯函数，它负责根据接收到的 Action 来更新应用程序的状态。Reducer 接收当前的状态和要执行的 Action，然后根据 Action 的类型来返回一个新的状态。

function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.payload.text,
          priority: action.payload.priority,
          completed: false
        }
      ];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.text === action.payload.text
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state;
  }
}

Reducers 必须是纯函数，即给定相同的输入，就会产生相同的输出，而不会对外部状态产生副作用。Reducers 通常被组织在一起以处理应用程序的不同部分的状态。

Store

Store 是 Redux 应用程序中存储状态的容器。它有以下职责：

• 维持应用程序的完整状态树
• 提供获取当前状态的方法 (getState())
• 提供更新状态的方法 (dispatch(action))
• 允许注册和取消注册状态变化监听器 (subscribe(listener))

import { createStore } from 'redux';

const store = createStore(todosReducer);

Store 可以通过调用其方法来管理应用程序的状态，例如调用 store.dispatch(action) 更新状态、调用 store.getState() 获取当前状态和调用 store.subscribe(listener) 监听状态变化。

总结

Redux 是一个强大的状态管理工具，它通过 Action、Reducers 和 Store 的组合来管理应用程序的状态。它遵循单向数据流的原则，使状态变化可预测且易于追踪。理解 Redux 的核心概念对于开发复杂的 JavaScript 应用程序至关重要。

了解更多关于 Redux 的信息，请访问 Redux 官方文档。