使用Redux工具包在React中实现状态(简单方法)

RDUX工具箱主题

简介

本教程将向你介绍Redux工具包，并教你如何按照最佳实践正确使用它。当你完成本教程时，你应该能够建立自己的Redux应用程序。

什么是Redux？

Redux是一个用于管理和更新应用程序状态的库，使用的事件称为动作。它是一个集中的状态存储，需要在整个应用程序中使用（而不是道具钻取），并有规则确保状态只能以一种可预测的方式更新。

什么是Redux Toolkit？

Redux Toolkit是一个用于React.js的一体化状态管理库。它可以帮助你轻松创建和管理全局状态，并减少锅炉板代码。Redux toolkit基本上是对Redux和其他依赖包的扩展，用于状态管理的功能。它简化了大多数Redux任务，防止常见的错误，并使Redux应用程序更容易编写。

状态管理如何在Redux中工作？

Redux的数据流

假设你已经创建了一个名为incrementValue的动作*（动作是一个触发相应的reducer的函数*）和reducer*（reducer是一个函数或一段代码，它实际上是根据动作事件更新全局状态，即store*）。

假设你有一个带有按钮的组件，用于基于onclick事件增加计数器的值。当你触发onclick事件时，它将发出一个名为incrementValue的动作。该动作会对相应的还原器进行解析，并更新商店中的全局状态。商店的注册用户将收到最新状态细节的通知。请看上面附上的参考图片。

在你的应用程序中实施Redux工具包的步骤

1. 创建一个新的react应用并安装所有需要的依赖项
2. 清理模板代码
3. 使用useState（可选）创建一个计数器应用
4. 实现一个存储、分片和行动
5. 订阅和调度事件
6. 最后的想法

让我们通过使用redux工具包建立一个简单的 让我们通过使用redux toolkit建立一个简单的计数器应用程序来看看这一点。

1.创建一个新的react应用并安装所有需要的依赖项

在创建一个react应用之前，确保你已经安装了Node.js。一旦你安装了依赖项，使用下面的代码段来创建一个新的react应用。

npx create-react-app counter-app

使用下面的命令来安装依赖包。

npm install @reduxjs/toolkit react-redux react-bootstrap bootstrap

在public/index.html文件中添加以下代码段。这是为bootstrap cdn准备的。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

现在使用npm start命令运行该应用。打开这个网址，如果你看到像这样的东西。

默认的反应式应用

那么你已经成功创建了你的react应用。

2.清理模板代码

删除App.js中的所有内容，并添加以下代码段。

import './App.css';

这就是它的样子

锅炉板代码

3.使用useState创建一个计数器应用（可选）

创建一个状态变量计数器来存储当前值。以及创建函数来增加和减少计数器的值。

import './App.css';

function App() {

  // create a function called increment that adds 1 to the counter

  // create a function called decrement that subtracts 1 from the counter

  return (

export default App;

运行npm start命令，你会看到下面这个用户界面。

使用useState的计数器应用程序

很好🔥，你已经准备好深入了解实际的主题了。

4.实现一个存储、切片和动作

创建一个商店（src/redux/store.jsx），负责订阅和维护全局状态。

import { configureStore } from "@reduxjs/toolkit";

如下图所示，在index.js中用Provider包裹主组件。这将在你的应用程序中提供对全局状态存储的访问。

import { Provider } from "react-redux";

• 创建一个切片器（src/redux/counterSlicer.jsx），在这里你可以定义动作和还原器。

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

// Create the slice of the state

• 更新store.js

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({

5.订阅和分派事件

在App.js中订阅状态计数器（与store.jsx中定义的名称相同）。

• 在App.js中添加导入语句

import { useSelector } from "react-redux";

• 在App.js中为全局状态添加订阅器

const counterStore = useSelector(state => state.counter);

• 听取App.js中的状态变化

<div className = "col-md-2">

如果你现在运行这个应用程序，你会看到和下面一模一样的情况。但增量和减量不会工作。别担心，它很快就会开始工作了 😃

使用选择器

现在是调用动作的时候了。

• 添加导入语句

import { useSelector, useDispatch } from "react-redux";

• 创建一个dispath变量用于调用动作

const dispatch = useDispatch();

• 在增量和减量的onClick中调用dispath事件

<Button variant="primary" onClick = {() => dispatch(incrementAction()) }>

• 最后App.js

import './App.css';

现在你应该看到增量和减量的动作了 🔥。

redux toolkit在行动

6.最后的思考

真棒 🔥，你已经成功完成了这个教程。我希望听到你对你用React构建的伟大事物的反馈和评论。

如果你有什么地方被击中了，请随时评论。我一直都在工作。

请在github上找到完整的代码

---

使用Redux工具包在React中实现状态（简单的方法）最初发表在Dev Genius的Medium上，人们在那里通过强调和回应这个故事来继续对话。