前言
随着前端技术越来越成熟，大型应用中的状态管理变得越来越重要。Redux 是一个著名的状态管理库，但使用起来相对繁琐。redux-toolkit 就是为了简化 Redux 的使用而生的。在编写本文时，redux-toolkit 版本为 1.6.1。
安装
安装 redux-toolkit 显然需要安装 Redux。
npm install --save redux
然后安装 redux-toolkit。
npm install --save @reduxjs/toolkit
使用
首先声明一个 module。
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ----- - -------------
----- ----------
------------- -
------ --
--
--------- -
---------------- -
----------- -- --
--
---------------- -
----------- -- --
--
--
---
------ ----- - ---------- --------- - - --------------
------ ----- -------------- - --------------这里我们使用 createSlice 创建了一个名为 counter 的 module，该 module 有一个初始状态 { value: 0 } 和两个 action：increment 和 decrement。对应到 Redux 中就是：
-- -------------------- ---- -------
-- ------ -----
----- --------- - --------------------
----- --------- - --------------------
-- ------ --------
-------- ----------- -
------ - ----- --------- --
-
-------- ----------- -
------ - ----- --------- --
-
-- -------
-------- -------------------- - - ------ - -- ------- -
------ ------------- -
---- ----------
------ - ------ ----------- - - --
---- ----------
------ - ------ ----------- - - --
--------
------ ------
-
-相比于传统的 Redux 引入方式，使用 redux-toolkit 显然写得更简洁。
然后我们需要将该 module 注入到 store 中。
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
------ - -------------- - ---- -----------------
----- ----- - ----------------
-------- -
-------- ---------------
--
---
------ ------- ------这里使用了 configureStore 来创建一个 store，其中的 reducer 属性是一个对象，对象的 key 是 module 的名字，value 是对应的 reducer。对应到传统的 Redux 引入方式就是：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ - -------------- - ---- ----------------- ----- ----------- - ----------------- -------- --------------- --- ----- ----- - ------------------------- ------ ------- ------
到这里我们的 redux-toolkit 集成已经完成了，接下来我们可以在 React 组件中使用该 store。
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ---------- --------- - ---- -----------------
-------- --------- -
----- ----- - ----------------- -- ---------------------
----- -------- - --------------
------ -
-----
------- ----------- -- ---------------------------------
--------------------
------- ----------- -- ---------------------------------
------
--
-
------ ------- --------这里我们使用了 Redux Hook useSelector 来获取状态，使用 useDispatch 来获取 dispatch 函数。对应到传统的 Redux 引入方式就是：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -----------------
-------- --------- ------ ---------- --------- -- -
------ -
-----
------- ------------------------------
--------------------
------- ------------------------------
------
--
-
----- --------------- - ----- -- --
------ --------------------
---
----- ------------------ - - ---------- --------- --
------ ------- ------------------------ -----------------------------到这里，我们就学会了如何使用 redux-toolkit 来简化 Redux 的使用。
实战应用
我们可以使用 redux-toolkit 来管理一个完整的应用状态。
考虑到一个网站可能需要与后端通信，我们可以定义一个异步 action：
-- -------------------- ---- -------
------ - ----------------- ----------- - ---- -------------------
------ ----- ---- --------
------ ----- ------------- - -----------------
-----------------------
----- -- -- -
----- -------- - ----- ------------------------------
------ --------------
-
--
----- --------- - -------------
----- -------
------------- -
-------- -------
----- ---
--
--------- ---
-------------- -
------------------------ ----- -- -
------------- - ----------
--
-------------------------- ------- ------- -- -
------------- - ------------
---------- - ---------------
--
------------------------- ----- -- -
------------- - -----------
--
--
---
------ ------- ------------------这里我们使用了 createAsyncThunk 来创建一个异步 action fetchUserById，该 action 会根据参数 id 发送一个 GET 请求，并返回 response 的 data。接着我们在 module 中没有定义任何 reducer，而是使用 extraReducers 定义了对应的 reducer。
对应到传统的 Redux 引入方式，这样的异步 action 可能需要写很多 boilerplate。而使用 redux-toolkit，我们只需要引入一个函数，就可以完成异步 action 的创建和 reducer 的定义。
然后我们将 userReducer 注入到 store 中，类似于之前的 counterReducer，这里不再赘述。我们可以在 React 组件中使用该 reducer 和 dispatch 函数。
-- -------------------- ---- -------
------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------------- - ---- --------------
-------- ------------- ------ -- -
----- ------- - ----------------- -- --------------------
----- ---- - ----------------- -- -----------------
----- -------- - --------------
------------ -- -
--------------------------------
-- ---------- ---------
------ -
-----
-------- --- --------- -- ----------------------
-------- --- ----------- -- -
-----
-------- ---------------
---------- -----------------
----------- ------------------
------
--
-------- --- ---------- -- ----------- -- ----- ---- ------------
------
--
-
------ ------- ------------这里使用了 Redux Hook 和 useEffect，当 userId 发生变化时我们会调用 fetchUserById 来获取用户数据，并更新组件的状态。
到这里我们就学会了如何使用 redux-toolkit 来简化 Redux 的使用，并在一个完整的应用中实践应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d11