在 react 开发领域，有效管理状态对于构建健壮的应用程序至关重要。 redux 长期以来一直是状态管理的流行选择，但它的复杂性可能会让新手望而却步。输入 redux toolkit，这是一个强大的工具，可以简化使用 redux 的过程。在这篇博客中，我们将探讨 redux toolkit 是什么、为什么应该使用它以及如何通过五个简单的步骤掌握它。
什么是 redux？
redux 是 javascript 应用程序的可预测状态容器。它允许开发人员在单个存储中管理应用程序状态，从而更轻松地跟踪随时间的变化。 redux 遵循三个基本原则：
- 单一事实来源：整个应用程序状态存储在存储内的单个对象树中。
- 状态是只读的：更改状态的唯一方法是通过调度操作，这些操作是描述发生的情况的普通对象。
- 使用纯函数进行更改：要指定状态如何响应操作而变化，您可以编写纯减速器。
虽然 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(
,
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 (
);
}
在此组件中，我们使用 usedispatch 钩子来访问调度函数并在单击按钮时发送操作。
使用选择器
要从 redux 存储中读取值，您可以使用 useselector 钩子：
import { useSelector } from 'react-redux';
function CounterDisplay() {
const counter = useSelector((state) => state.counter);
return Count: {counter};
}
在这里，我们使用 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
