Master Redux with asy Steps: A Comprehensive Guide to Redux Toolkit

在 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 中的蛋糕片！它们代表应用程序数据的一小部分以及修改该数据的操作。创建切片的方法如下：

button-with-tooltip

button-with-tooltip

93

查看详情

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中的<provider>组件包装主应用程序组件来完成此操作：

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

以上就是Master Redux with asy Steps: A Comprehensive Guide to Redux Toolkit的详细内容，更多请关注php中文网其它相关文章！