Redux 教程

Redux 是一个用于管理 JavaScript 应用程序状态的库，它特别适用于 React 应用程序。以下是 Redux 的基本教程。

安装 Redux

首先，您需要安装 Redux 和 React-Redux 库。您可以使用 npm 或 yarn 来安装它们：

npm install redux react-redux
# 或者
yarn add redux react-redux

Redux 的基本概念

Action

Action 是一个描述发生了什么的普通对象。它通常是同步的，但也可以是异步的。

const ADD_TODO = 'ADD_TODO';

const addTodo = text => ({
  type: ADD_TODO,
  text
});

Reducer

Reducer 是一个纯函数，它接收当前的状态和一个 action，并返回一个新的状态。

const todos = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.text];
    default:
      return state;
  }
};

Store

Store 是一个将所有这些部分组合在一起的容器。它负责将状态传递给组件，并处理 action。

import { createStore } from 'redux';
import todos from './reducers';

const store = createStore(todos);

组件连接到 Store

使用 connect 函数将组件连接到 Store。

import { connect } from 'react-redux';

const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo}>{todo}</li>
    ))}
  </ul>
);

const mapStateToProps = state => ({
  todos: state.todos
});

export default connect(mapStateToProps)(TodoList);

扩展阅读

• Redux 官方文档

希望这个教程能帮助您更好地理解 Redux。如果您有任何问题，请访问我们的 社区论坛 进行讨论。