介绍
redux-toolbox是一个Redux框架的辅助工具包，它提供了一些简化Redux操作的函数，让开发者可以更方便地编写Redux代码。使用redux-toolbox可以减少大量的模板代码和样板代码，提高开发效率。
安装
使用npm包管理器进行安装：
npm install @reduxjs/toolkit
或者使用 yarn 进行安装：
yarn add @reduxjs/toolkit
注意：redux-toolkit是Redux框架的升级版本，它可以自动安装Redux。
如何使用
要使用redux-toolbox，首先需要从redux-toolkit库导入工具箱的configureStore函数和createSlice函数：
import { configureStore , createSlice } from '@reduxjs/toolkit';1. 使用configureStore函数创建Redux store
-- -------------------- ---- -------
------ - -------------- - ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------- ------- -- ----- - --
---------- ------- -- ----- - --
--
---
----- ----- - ----------------
-------- ---------------------
---
------ ------- ------在上面的代码中，定义了一个counterSlice对象，其中包含了一个名为counter的Reducer，这个Reducer负责处理所有的计数器操作，包括增加和减少。然后我们通过configureStore函数来创建一个Redux store对象，将counterSlice.reducer作为参数传递给configureStore函数。
注意：configureStore函数只接受一个对象类型的参数。
2. 创建action
-- -------------------- ---- -------
------ - -------------- - ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------- ------- -- ----- - --
---------- ------- -- ----- - --
------------------ ------- ------- -- ----- - ---------------
--
---
----- ----- - ----------------
-------- ---------------------
---
------ ----- - ---------- ---------- ----------------- - - ---------------------
------ ------- ------在上面的代码中，我们添加了一个新的action，名为incrementByAmount，它负责增加一定的数值，这个数值通过action的payload属性传递。
3. 在组件中dispatch action
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ----------- - ---- --------------
------ - ---------- ---------- ----------------- - ---- ------------------------
-------- --------- -
----- ------- --------- - -----------
----- -------- - --------------
----- ---------------- - -- -- -
----------------------
--
----- ---------------- - -- -- -
----------------------
--
----- ----------------------- - -- -- -
-----------------------------------
-
------ -
-----
---------------------------
------- -------------------------------------
------- -------------------------------------
------ ------------- ------------- ------------- -- --------------------------------------------
------- -----------------------------------------------------------
------
-
-
------ ------- --------在组件中，我们使用useDispatch hook获取dispatch函数，然后在点击按钮时调用相应的action进行状态的更新。
结论
redux-toolbox是一个Redux开发中不可或缺的工具包，它可以帮助开发者快速、简洁地编写Redux代码，大大提高了开发效率。学会了如何使用redux-toolbox，可以让我们更加专注于业务逻辑的实现，而不必关心应用状态的管理细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f72238a385564ab67e9