介绍
Redux是 React 生态中最常用的状态管理库之一，但是，它在使用上有点繁琐，而且开发者需要编写很多样板代码。这时，Redux Toolkit 就出现了。
Redux Toolkit 是一个官方支持的库，旨在为 Redux 开发者提供一些工具和最佳实践，来帮助我们更加轻松、快速地编写 Redux 应用。
在本文中，我们将介绍如何在我们的 React 项目中，使用 Redux Toolkit 来管理我们应用的状态。
安装和使用
安装 Redux Toolkit 相当简单，只需要运行以下命令即可：
npm install @reduxjs/toolkit
安装完毕后，我们可以开始使用它。Redux Toolkit 提供了一些我们在编写 Redux 应用时会用到的工具。
社会化状态管理
在 Redux Toolkit 中，我们可以使用 createSlice 函数来创建一个切片来描述我们的状态，并定义不同的 reducer 函数。例如：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------- ----- -- ----- - --
---------- ----- -- ----- - --
------ -- -- -
-
---
------ ----- - ---------- ---------- ----- - - ---------------------
------ ------- ---------------------在上面的代码中，我们创建了一个名为 "counter" 的切片。它有一个初始状态 0 和三个不同的 reducer 函数：increment、decrement、reset。我们可以使用这些 reducer 函数来更新我们的状态。
我们可以将 reducer 函数作为参数，直接传递给 Redux Toolkit 提供的 configureStore 工具函数：
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './reducers/counter';
export default configureStore({
reducer: {
counter: counterReducer
}
});在上面的代码中，我们将 counterReducer，即前面创建的 counter 切片的 reducer 函数，作为参数传递给 configureStore 函数。configureStore 函数将返回一个 Redux store，它包含我们所有的应用状态。
我们可以在我们的 React 组件中，使用 useSelector 函数来选择我们想要使用的应用状态：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ---------- ---------- ----- - ---- ---------------------
-------- --------- -
----- ----- - ----------------- -- ---------------
----- -------- - --------------
------ -
--
--------------
------- ----------- -- -
----------------------
--------------
------- ----------- -- -
----------------------
--------------
------- ----------- -- -
------------------
--------------
---
--
-在上面的代码中，我们使用了 useSelector 函数来选择我们想要使用的应用状态，即前面在 counter 切片上定义的状态。我们还使用了 useDispatch 函数来创建一个 dispatch function，它允许我们使用我们设置的 reducer 函数来更新我们的状态。
结论
Redux Toolkit 是一个非常好用的库，可以让我们更加轻松地编写 Redux 应用。在本文中，我们介绍了如何使用 createSlice 函数来创建一个切片来描述我们的状态，并定义不同的 reducer 函数。我们还学习了如何使用 useSelector 函数来选择我们想要使用的应用状态，并使用 useDispatch 函数来创建一个 dispatch 函数来更新我们的状态。
请务必在您的项目中尝试 Redux Toolkit，它可以极大地提高您的开发效率！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fc1bffbd23cf8906f7c01