redux 工具包的用途
我们已经知道 redux 是 javascript 应用程序的一个强大的状态管理库，特别是在使用 react 时。
但是使用 redux 很困难，因为它设置 redux 的代码很繁重。这使得维护和调试变得困难。这就是 redux toolkit 可以提供帮助的地方。
redux 工具包解决的问题
- 开店太复杂了。
- 添加许多包以与 redux 一起使用，例如中间件、工具。
- redux 需要太多代码来设置
redux 工具包是官方推荐的编写 redux 逻辑的方法。它提供了一组工具来简化开发，减少样板代码，有助于提高应用程序的可扩展性和可维护性。
redux 工具包的主要优点：
- 更少的样板代码：不再需要动作创建者和常量。
- 简化的商店设置：提供单个 api 来使用合理的默认值配置商店。
- 内置对不变性和 devtools 的支持：自动启用 redux devtools 并与 immer 集成以实现不变性。
- 更好的 typescript 支持：提供更好的打字效果并与 typescript 很好地集成。
我们可以将 redux 工具包与任何 javascript 库一起使用，因此我们使用 react 设置 redux 工具包。
在 react 应用程序中设置 redux 工具包
第 1 步：创建一个新的 react 项目
首先，让我们创建一个新的 react 应用程序。您可以使用 create-react-app 或 vite 来实现此目的。为了简单起见，我们将在这里使用 create-react-app。
npx create-react-app redux-toolkit-example cd redux-toolkit-example
第 2 步：安装 redux 工具包和 react-redux
接下来，安装必要的软件包：@reduxjs/toolkit 和react-redux。
npm install @reduxjs/toolkit react-redux
- 了解切片和减速器
切片是针对应用程序特定功能的 redux 减速器逻辑和操作的集合。 redux toolkit 提供了 createslice 函数来帮助使用最少的样板创建状态切片。
第 1 步：创建切片
让我们创建一个简单的计数器切片。在 features/counter 目录中创建一个名为 counterslice.js 的新文件：
// src/features/counter/counterslice.js
import { createslice } from '@reduxjs/toolkit';
const initialstate = {
value: 0,
};
const counterslice = createslice({
name: 'counter',
initialstate,
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
incrementbyamount: (state, action) => {
state.value += action.payload;
},
},
});
export const { increment, decrement, incrementbyamount } = counterslice.actions;
export default counterslice.reducer;
在这里，我们定义了一个名为 counter 的切片，它具有初始状态和三个减速器（increment、decrement 和incrementbyamount）。 createslice 函数会自动为每个reducer 函数生成动作创建者。
- 配置 redux 存储
现在我们有了切片，让我们配置 redux 存储。 redux toolkit 提供了一个 configurestore 函数，可以使用良好的默认值设置存储。
第 1 步：创建商店
在应用程序目录中创建 store.js 文件：
// src/app/store.js
import { configurestore } from '@reduxjs/toolkit';
import counterreducer from '../features/counter/counterslice';
const store = configurestore({
reducer: {
counter: counterreducer,
},
});
export default store;
第 2 步：为您的应用程序提供商店
将您的 react 应用程序包装在react-redux 的组件中并将其传递给商店。更新index.js文件：
// src/index.js
import react from 'react';
import reactdom from 'react-dom';
import './index.css';
import app from './app';
import { provider } from 'react-redux';
import store from './app/store';
reactdom.render(
<react.strictmode>
<provider store={store}>
<app />
</provider>
</react.strictmode>,
document.getelementbyid('root')
);
- 将组件连接到商店
要与 redux 存储交互，请使用react-redux 提供的 useselector 和 usedispatch 钩子。
第 1 步：使用 useselector
访问状态
使用 useselector 钩子从 store 访问状态
// src/features/counter/counter.js
import react from 'react';
import { useselector, usedispatch } from 'react-redux';
import { increment, decrement, incrementbyamount } from './counterslice';
const counter = () => {
const count = useselector((state) => state.counter.value);
const dispatch = usedispatch();
return (
<div>
<h1>{count}</h1>
<button onclick={() => dispatch(increment())}>increment</button>
<button onclick={() => dispatch(decrement())}>decrement</button>
<button onclick={() => dispatch(incrementbyamount(5))}>increment by 5</button>
</div>
);
};
export default counter;
第 2 步：在您的应用中使用计数器组件
在主应用程序组件中导入并使用 counter 组件：
// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';
function App() {
return (
<div className="App">
<Counter />
</div>
);
}
export default App;
- 结论和后续步骤
在这一部分中，我们介绍了在 react 应用程序中设置 redux toolkit 的基础知识，包括创建切片、配置存储以及使用钩子将组件连接到 redux 存储。在下一部分中，我们将深入研究使用 createasyncthunk 处理异步逻辑，以从 api 获取数据并管理不同的加载状态。
敬请关注第 2 部分：高级 redux 工具包 - 使用 createasyncthunk 的异步逻辑！
