随着 Web 应用程序变得越来越复杂，管理状态变得越来越具有挑战性。如果您发现自己陷入了不可预测的状态变化和难以跟踪的数据流的网络中，那么您并不孤单。这就是 Redux 发挥救星作用的地方。
Redux 是 JavaScript 应用程序的状态管理库，以其有效性而闻名，尤其是与 React 一起使用时。通过提供可预测且集中的方式来管理应用程序状态，Redux 简化了跟踪数据如何随时间变化以及应用程序的不同部分如何相互交互的过程。
但是为什么 Redux 是必要的呢？在任何大型应用程序中，状态更改都可能发生在多个位置，因此很难查明特定数据在何处以及如何更改。调试和维护此类应用程序可能会成为一场噩梦。 Redux 通过将整个应用程序的状态存储在一个称为存储的集中位置来解决这些挑战。这种集中式方法不仅简化了状态管理，还增强了应用程序的可预测性和可测试性。
本指南将带您详细了解 Redux，从理解其核心概念到在 React 应用程序中设置和使用它。读完本文后，您将牢牢掌握 Redux，并有能力将其应用到您的项目中。
要真正理解 Redux，必须熟悉三个基本概念：store、action 和 reducer。让我们更深入地了解每个概念。
Redux 的核心是存储，它是一个集中存储库，保存应用程序的整个状态。商店是应用程序数据的唯一真实来源。无论您的应用程序变得有多大或多复杂，所有状态都存储在一个位置，从而更易于管理和调试。
将商店想象成一个巨大的 JavaScript 对象，其中包含应用程序运行所需的所有信息。无论是用户数据、UI 状态还是服务器响应，所有内容都存储在该对象中。这种集中式方法与在各个组件内本地管理状态的传统方法形成鲜明对比，这可能会导致跟踪状态更改的不一致和困难。
Redux 中的存储是不可变的，这意味着一旦设置了状态，就无法直接更改。相反，只要需要更改，就会创建一个新状态。这种不变性对于维持应用程序的可预测性至关重要，因为它确保每个状态更改都是有意的且可追踪的。
Redux 中的操作是描述应用程序中的事件或更改的纯 JavaScript 对象。它们就像传递有关应用程序中发生的情况的信息的信使。每个操作都有一个定义操作性质的类型属性，以及一个可选的有效负载属性，其中包含与该操作相关的任何其他数据。
例如，在待办事项列表应用程序中，操作可能表示添加新的待办事项、完成现有项目或删除项目。每个操作都有一个唯一的类型，例如 ADD_TODO、TOGGLE_TODO 或 DELETE_TODO，并且可能包含其他数据，例如待办事项的 ID 或文本。
操作被分派到存储，并由减速器处理（我们将在接下来讨论）。通过清楚地定义应用程序中发生的情况，操作有助于保持清晰且易于理解的数据更改流。
Reducer 是 Redux 中的纯函数，定义应用程序的状态应如何响应操作而改变。它们以当前状态和操作作为参数并返回一个新状态。术语“纯函数”意味着reducer的输出仅取决于其输入（当前状态和操作），并且不会产生任何副作用，例如修改外部变量或执行异步操作。
在 Redux 中，reducers 负责实际的状态更新。当分派一个操作时，Redux 将当前状态和操作传递给适当的减速器，然后计算并返回新状态。此过程确保状态以可预测且可追踪的方式发生变化。
例如，待办事项列表应用程序的减速器可能如下所示：
function todoReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.payload.id
? { ...todo, completed: !todo.completed }
: todo
);
default:
return state;
}
}
在此示例中，todoReducer 处理两种类型的操作：ADD_TODO 和 TOGGLE_TODO。根据操作类型，它可以向状态添加新的待办事项或切换现有项目的已完成状态。减速器总是返回一个新的状态对象，确保原始状态保持不变。
现在我们已经介绍了 Redux 的核心概念，是时候看看它们如何在现实世界的应用程序中结合在一起了。在本节中，我们将逐步介绍在简单的 React 应用程序中设置和使用 Redux 的过程。
使用 Redux 的第一步是安装必要的软件包。 Redux 本身是一个独立的库，但与 React 一起使用时，您还需要安装react-redux，这是一个提供将 Redux 与 React 组件集成的绑定的包。
要安装 Redux 和 React-Redux，请打开终端并在项目目录中运行以下命令：
npm install redux react-redux
此命令会安装 redux 和 react-redux，我们将使用它们将 React 组件连接到 Redux 存储。
安装 Redux 后，下一步就是创建存储。存储保存应用程序的状态并提供用于调度操作和订阅状态更改的方法。
在此示例中，我们将为简单的待办事项列表应用程序创建一个商店。首先创建一个处理状态更改的减速器函数：
import { createStore } from 'redux';
// This is our reducer function
function todoReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.payload.id
? { ...todo, completed: !todo.completed }
: todo
);
default:
return state;
}
}
// Create the store
const store = createStore(todoReducer);
在此代码中，todoReducer 函数处理两种类型的操作：ADD_TODO 用于添加新的待办事项，TOGGLE_TODO 用于切换项目的完成状态。 Redux 中的 createStore 函数用于创建存储，并传入 todoReducer 作为参数。
动作在 Redux 中至关重要，因为它们描述了应用程序中发生的事情。但是，每次想要分派操作时手动创建操作对象可能会变得很麻烦。这就是动作创建者发挥作用的地方。动作创建者是返回动作对象的函数。
让我们定义一个动作创建器来添加待办事项：
function addTodo(text) {
return {
type: 'ADD_TODO',
payload: { id: Date.now(), text, completed: false }
};
}
addTodo 函数接受一个文本参数并返回一个类型为 ADD_TODO 的操作对象和包含待办事项数据的有效负载。这个动作创建器简化了分派动作的过程，使代码更具可读性和可维护性。
您还可以定义其他操作创建者，例如toggleTodo，用于切换待办事项的完成状态：
function toggleTodo(id) {
return {
type: 'TOGGLE_TODO',
payload: { id }
};
}
存储和操作就位后，您现在可以调度操作来更新状态。分派一个动作是你通知 Redux 应用程序中发生了一些事情，触发适当的减速器来更新状态的方式。
以下是如何调度操作来添加和切换待办事项：
store.dispatch(addTodo('Learn Redux'));
store.dispatch(addTodo('Build an app'));
store.dispatch(toggleTodo(1621234567890));
当您分派 addTodo 操作时，Redux 会使用当前状态和操作调用 todoReducer，并且该缩减器会返回一个包含添加的待办事项项的新状态。同样，当您调度toggleTodo操作时，reducer会更新指定待办事项的完成状态。
要读取应用程序的当前状态，可以使用商店提供的 getState 方法。此方法返回存储在 Redux 存储中的整个状态对象：
console.log(store.getState());
// Output: [{ id: 1621234567890, text: 'Learn Redux', completed: true },
// { id: 1621234567891, text: 'Build an app', completed: false }]
除了读取状态之外，还可以使用 subscribe 方法订阅状态变化。此方法允许您在状态更改时执行回调函数，这对于更新 UI 或执行其他副作用以响应状态更新非常有用：
const unsubscribe = store.subscribe(() => {
console.log('State updated:', store.getState());
});
订阅完状态变化后，可以通过调用 subscribe 返回的函数来取消订阅：
unsubscribe();
要将 Redux 与 React 集成，您需要将 React 组件连接到 Redux 存储。这就是react-redux包发挥作用的地方，它提供了Provider、useSelector和useDispatch实用程序。
首先将整个应用程序包装在 Provider 组件中，并将 Redux 存储作为 prop 传递。这使得 Redux 存储可用于 React 应用程序中的所有组件：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './App';
import todoReducer from './reducers';
// Create the Redux store
const store = createStore(todoReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
接下来，使用 useSelector 和 useDispatch 挂钩将您的组件连接到 Redux 存储。 useSelector 允许您访问状态，而 useDispatch 允许您分派操作：
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from './actions';
function TodoList() {
const todos = useSelector(state => state);
const dispatch = useDispatch();
const handleAddTodo = (text) => {
dispatch(addTodo(text));
};
const handleToggleTodo = (id) => {
dispatch(toggleTodo(id));
};
return (
<div>
<button onClick={() => handleAddTodo('New Todo')}>Add Todo</button>
<ul>
{todos.map(todo => (
<li
key={todo.id}
onClick={() => handleToggleTodo(todo.id)}
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
{todo.text}
</li>
))}
</ul>
</div>
);
}
export default TodoList;
In this example, the TodoList component displays a list of todo items, with the ability to add new items and toggle their completion status. The useSelector hook retrieves the state from the Redux store, while the useDispatch hook allows the component to dispatch actions.
By connecting your React components to Redux in this way, you can ensure that your application's state is managed consistently and predictably.
While Redux is a powerful tool for managing state in complex applications, it also comes with its own set of best practices and potential pitfalls. Understanding these will help you avoid common mistakes and make the most of Redux in your projects.
In this comprehensive guide, we've covered the fundamentals of Redux, from its core concepts to setting up and using it in a simple React application. Redux is a powerful tool for managing state in complex applications, but it also comes with its own learning curve and best practices.
通过了解存储、操作和化简器，您可以控制应用程序的状态并确保其行为可预测且一致。通过提供的分步指南，您现在应该能够在自己的项目中设置 Redux 并开始像专业人士一样管理状态。
但是，Redux 是一个广阔的主题，具有许多高级功能和用例。为了加深您的理解，请考虑探索以下内容：
请记住，掌握 Redux 需要时间和练习。你使用它的次数越多，你就会变得越舒服。不断尝试，不断学习。
以上是了解 Redux：初学者综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！
