轻松掌握 Redux：Redux 工具包综合指南

在 React 开发领域，有效管理状态对于构建健壮的应用程序至关重要。 Redux 长期以来一直是状态管理的流行选择，但它的复杂性可能会让新手望而却步。输入 Redux Toolkit，这是一个强大的工具，可以简化使用 Redux 的过程。在这篇博客中，我们将探讨 Redux Toolkit 是什么、为什么应该使用它以及如何通过五个简单的步骤掌握它。

什么是 Redux？

Redux 是 JavaScript 应用程序的可预测状态容器。它允许开发人员在单个存储中管理应用程序状态，从而更轻松地跟踪随时间的变化。 Redux 遵循三个基本原则：

1. 单一事实来源：整个应用程序状态存储在存储内的单个对象树中。
2. 状态是只读的：更改状态的唯一方法是通过调度操作，这些操作是描述发生的情况的普通对象。
3. 使用纯函数进行更改：要指定状态如何响应操作而变化，您可以编写纯减速器。

虽然 Redux 在管理复杂状态方面提供了显着的优势，但它通常需要大量的样板代码和配置。这就是 Redux Toolkit 发挥作用的地方。

什么是 Redux 工具包？

Redux Toolkit 就像 Redux 的神奇工具箱。它通过提供一组工具和最佳实践来简化编写 Redux 代码的过程，帮助开发人员更快、更轻松地创建高效且可维护的应用程序。 Redux Toolkit 的主要功能包括：

• 简化商店设置：降低了配置商店和中间件的复杂性。
• 内置最佳实践：鼓励编写 Redux 逻辑的最佳实践，减少样板代码。
• 强大的数据获取：包括 RTK 查询，以实现高效的数据获取和缓存。

为什么使用 Redux 工具包？

Redux Toolkit 对于管理 React 应用程序中的复杂状态特别有用。以下是它的一些亮点场景：

• 用户身份验证：有效管理用户会话和身份验证状态。
• 缓存 API 响应：存储 API 响应以最大程度地减少不必要的网络请求。
• 同步全局应用程序状态：保持不同组件之间的全局状态无缝同步。

凭借其内置功能和简化的 API，Redux Toolkit 可以更轻松地处理现代 Web 应用程序中的常见用例。

Redux 工具包入门

要开始使用 Redux Toolkit，请遵循以下五个简单步骤：

第1步：安装Redux工具包

首先，您需要安装 Redux Toolkit 和 React-Redux，它提供了将 React 与 Redux 集成的绑定。

npm install @reduxjs/toolkit react-redux

此命令会安装这两个包，让您可以在 React 应用程序中充分利用 Redux Toolkit 的全部功能。

第 2 步：创建商店

接下来，您将设置 Redux 存储。该存储就像一个存放应用程序数据的大盒子。使用 Redux Toolkit，创建商店非常简单：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

在此示例中，我们从 Redux Toolkit 导入 configureStore 并创建一个包含计数器切片减速器的存储。

第 3 步：创建切片

切片就像 Redux Toolkit 中的蛋糕片！它们代表应用程序数据的一小部分以及修改该数据的操作。创建切片的方法如下：

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

在此代码片段中，我们定义了一个初始状态为 0 的 counterSlice 和两个修改状态的减速器（增量和减量）。

第 4 步：使用 Provider 包装您的应用程序

要在 React 应用程序中使用 Redux Toolkit，您需要向应用程序组件提供 Redux 存储。您可以通过使用 包装主应用程序组件来完成此操作。来自react-redux的组件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

此设置可确保应用程序中的所有组件都可以访问 Redux 存储。

第 5 步：分派操作并使用选择器

现在您的商店已设置并提供给您的应用程序，您可以使用选择器分派操作并检索数据。

调度动作

Action 就像告诉 Redux 做什么的信使。使用 Redux Toolkit，发送操作非常简单：

import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function CounterComponent() {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>Add 1</button>
      <button onClick={() => dispatch(decrement())}>Subtract 1</button>
    </div>
  );
}

在此组件中，我们使用 useDispatch 钩子来访问调度函数并在单击按钮时发送操作。

使用选择器

要从 Redux 存储中读取值，您可以使用 useSelector 钩子：

import { useSelector } from 'react-redux';

function CounterDisplay() {
  const counter = useSelector((state) => state.counter);

  return <div>Count: {counter}</div>;
}

在这里，我们使用 useSelector 从存储中检索计数器的当前值。

结论

通过这五个简单步骤掌握 Redux 使您能够有效管理 React 应用程序中的复杂状态。通过利用 Redux Toolkit，您可以使用更少的样板代码编写更干净的代码，同时遵循最佳实践。

无论您是处理用户身份验证还是同步全局应用程序状态，Redux Toolkit 都能提供可靠的解决方案来简化您的开发流程。凭借其直观的 API 和用于数据获取和缓存的 RTK 查询等内置功能，您会发现自己比以往更快地构建强大的应用程序。

当您继续使用 React 和 Redux Toolkit 时，请考虑探索更高级的主题，例如中间件集成、使用 thunk 或 sagas 进行异步操作处理，以及使用记忆技术优化性能。快乐编码！

引用：
[1] https://redux.js.org/introduction/installation
[2] https://redux.js.org/tutorials/quick-start
[3] https://www.freecodecamp.org/news/redux-and-redux-toolkit-for-beginners/
[4] https://redux-toolkit.js.org/usage/usage-guide
[5] https://redux-toolkit.js.org/usage/nextjs
[6] https://redux-toolkit.js.org/introduction/getting-started
[7] https://dev.to/raaynaldo/redux-toolkit-setup-tutorial-5fjf
[8] https://redux-toolkit.js.org/tutorials/typescript

以上是轻松掌握 Redux：Redux 工具包综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！