学习 Redux：入门到运用完整指南-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一种用于 JavaScript 应用程序的状态管理容器。它可以让你以一种可预测的方式管理应用程序的状态，并且易于调试和维护。Redux 假设整个应用程序的状态都被存储在单个状态对象中，并且应用程序的状态在时间上是不可变的。在本文中，我们将一步步学习如何使用 Redux，以及如何将它应用到实际项目中。

Step 1：安装与配置 Redux

首先，我们需要安装 Redux。可以通过 npm 包管理器将 Redux 安装到你的项目中。在终端中输入以下命令：

npm install redux --save

安装 Redux 后，我们需要在我们的项目中引入它。在你的项目中的任何需要使用 Redux 的文件中，我们要引入它：

import { createStore } from 'redux';

现在，Redux 已经配置完成了，我们可以开始构建我们的应用程序。

Step 2：理解 Redux 中的核心概念

Redux 由三个重要的核心概念组成：state（状态）、action（动作）和 reducer（规约）。状态是应用程序中的数据，动作是改变状态的原因，而规约则是根据动作来更新状态的函数。Redux 不允许直接修改应用程序的状态，而是通过 dispatching（分配）动作来完成状态的修改。页面上的所有组件都可以订阅状态的更改，当状态更改时，它们将被告知，并更新相应的部分。

以下是 Redux 状态管理的基本工作流程：

其中，Action creator 会促使 store 中对状态采取相应的操作。Reducer 会改变状态并发布主题，所有已注册的 store 将进行更新。

Step 3：构建一个基本的 Redux 应用程序

现在让我们来构建一个基本的 Redux 应用程序。假设我们要创建一个代表 TODO 列表的应用程序。第一步是定义状态。在我们的例子中，状态将是一个 Todo 数组：

const initialState = {
    todos: []
};

现在我们需要一个规约来处理相关的动作。我们将创建一个函数，接收现有的状态和动作作为参数，然后返回新状态，这就是 Redux 的整个思想。

// javascriptcn.com code example
function todoReducer(state = initialState, action) {
    switch(action.type) {
        case 'ADD_TODO':
            return {
                todos: [...state.todos, action.payload]
            };
        default:
            return state;
    }
}

如上所述，我们创建的规约接收两个参数：当前的状态和一个动作，然后根据动作对状态进行更改。在我们的例子中，我们只有一个动作（Add Todo），因此我们只需要定义一个 case 语句来处理它。当收到 add_todo 动作时，我们添加一个新的 todo 对象到当前状态的 todos 数组中。

接下来，我们需要实例化一个 Redux store，它将保存我们的应用程序状态，并允许应用程序中的组件订阅状态更改。我们可以使用 createStore 方法来创建一个新的 store：

const store = createStore(todoReducer);

现在，我们已经准备好了 Redux Store。我们还需要一个组件来处理明确更新状态的动作。这个组件被称为容器，因为它将存储在 Redux Store 中。

// javascriptcn.com code example
import React, { Component } from 'react';
import { connect } from 'react-redux';

class TodoList extends Component {
    render() {
        return (
            <div>
                <ul>
                    {this.props.todos.map(todo => (
                        <li key={todo.id}>{todo.text}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(TodoList);

我们使用了 react-redux 中的 connect 函数将 TodoList 组件连接到 Redux Store。在这个例子中，mapStateToProps 函数返回状态中的 todos 数组。我们现在可以在 TodoList 组件中使用 props.todos 属性来访问我们应用程序的 todo。

最后，我们需要一些代码来触发我们定义的动作。

// javascriptcn.com code example
const addTodoAction = {
    type: 'ADD_TODO',
    payload: {
        id: 1,
        text: 'Learn Redux'
    }
};

store.dispatch(addTodoAction);

现在，当这个动作被分派时，store 中的状态将被更新，所有连接到这个 store 的组件也将被更新。

Step 4：结论

这是一个基础的 Redux 应用程序的入门指南，展示了如何定义状态、创建规约、实例化一个 Redux Store、连接组件并分派动作。Redux 的强大之处在于它简化了状态管理，同时也提供了强大的调试工具。React 与 Redux 一起使用是非常常见的，因为两者都具有封装性和可重用性。这意味着可以完全分离组件和业务逻辑的代码。当你深入学习 Redux 时，你将发现 Redux 是更具表现力、模块化和可扩展性的应用程序架构方案之一。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672b9d52ddd3a70eb6d312d1