Redux 存储组件：在 React 应用中管理复杂的组件状态-JavaScript中文网-JavaScript教程资源分享门户

在 React 应用中，一个组件的状态可能会非常复杂。当我们需要在多个组件之间共享状态时，传递 props 可能会变得非常繁琐。Redux 是一个流行的状态管理库，可以帮助我们更好地管理组件状态。

什么是 Redux？

Redux 是一个 JavaScript 库，它提供了一种可预测的状态管理机制。Redux 的核心思想是：整个应用的状态都保存在一个单一的对象中，称为“store”。组件通过派发“actions”来改变这个状态，而“reducers”则负责处理这些 actions 并更新 store 中的状态。组件可以通过“connect”函数来订阅 store 中的状态，并在状态变化时得到通知。

Redux 的优点

可预测的状态管理：Redux 的状态管理机制非常明确，因此我们可以轻松地预测应用的状态。
可重用的状态逻辑：Redux 的状态逻辑可以被多个组件共享，因此我们可以避免重复的代码。
易于测试：Redux 的状态逻辑可以被单独测试，因此我们可以更快地发现应用中的错误。

在 React 应用中使用 Redux

在 React 应用中使用 Redux 需要安装两个库：redux 和 react-redux。redux 是 Redux 的核心库，而 react-redux 则提供了一些与 React 集成的功能。

创建一个 Redux store

创建一个 Redux store 只需要调用 createStore 函数，并传入一个 reducer 函数。reducer 函数负责处理 actions 并更新 store 中的状态。

// www.javascriptcn.com code example
import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

在组件中使用 Redux

在组件中使用 Redux 需要使用 react-redux 提供的 connect 函数。connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 函数用于将 store 中的状态映射到组件的 props 上，而 mapDispatchToProps 函数用于将 actions 映射到组件的 props 上。

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

function Counter(props) {
  return (
    <div>
      <button onClick={props.increment}>+</button>
      <span>{props.count}</span>
      <button onClick={props.decrement}>-</button>
    </div>
  );
}

function mapStateToProps(state) {
  return { count: state.count };
}

function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

在上面的例子中，Counter 组件通过 connect 函数订阅了 store 中的状态，并将 increment 和 decrement actions 映射到了组件的 props 上。当用户点击“+”或“-”按钮时，组件会派发相应的 actions 并更新 store 中的状态。

示例代码

下面是一个使用 Redux 的 TodoList 组件的示例代码。这个组件可以添加、删除和标记任务为已完成。

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

function TodoList(props) {
  const handleAdd = () => {
    const text = prompt('请输入任务');
    if (text) {
      props.addTask(text);
    }
  };

  const handleDelete = (id) => {
    props.deleteTask(id);
  };

  const handleToggle = (id) => {
    props.toggleTask(id);
  };

  return (
    <div>
      <h1>TodoList</h1>
      <button onClick={handleAdd}>添加任务</button>
      <ul>
        {props.tasks.map((task) => (
          <li key={task.id}>
            <span
              onClick={() => handleToggle(task.id)}
              style={{
                textDecoration: task.completed ? 'line-through' : 'none',
              }}
            >
              {task.text}
            </span>
            <button onClick={() => handleDelete(task.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function mapStateToProps(state) {
  return { tasks: state.tasks };
}

function mapDispatchToProps(dispatch) {
  return {
    addTask: (text) => dispatch({ type: 'ADD_TASK', payload: { text } }),
    deleteTask: (id) => dispatch({ type: 'DELETE_TASK', payload: { id } }),
    toggleTask: (id) => dispatch({ type: 'TOGGLE_TASK', payload: { id } }),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

在上面的例子中，TodoList 组件通过 connect 函数订阅了 store 中的任务列表，并将 addTask、deleteTask 和 toggleTask actions 映射到了组件的 props 上。当用户点击“添加任务”按钮时，组件会弹出一个对话框，让用户输入任务的文本。当用户点击任务的文本时，组件会将任务标记为已完成。当用户点击任务的“删除”按钮时，组件会删除这个任务。

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

Redux 存储组件：在 React 应用中管理复杂的组件状态