介绍
redux-suspense 是一个基于 React 的状态管理库 redux 和 React 的新特性 Suspense 的整合。Suspense 为我们提供了一种新的方式来处理异步请求。redux-suspense 则为我们提供了一种使用 redux 管理异步请求的方式。
redux-suspense 的使用可以让应用程序的状态管理更加简单和清晰。当我们有多个异步请求在进行时，使用 redux 可以统一管理这些请求的状态，从而避免回调地狱的问题。
下面将介绍如何使用 redux-suspense 进行状态管理以及如何处理异步请求。
安装
使用 npm 可以很方便地安装 redux-suspense：
npm install redux-suspense
使用
使用 redux-suspense 前需要安装 redux。
创建 store
在创建 store 时，需要使用 createPendingPromiseMiddleware 函数来创建 middleware，并将其添加到 middleware 链中。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------------------ - ---- ----------------- ------ ----------- ---- ------------- ----- ------------------------ - --------------------------------- ----- ----- - ------------ ------------ ----------------------------------------- --
创建 action
使用 redux-suspense，我们可以将异步请求抽象成一个 Promise。然后在 action 中返回 Promise，redux-suspense 会监听 Promise 的执行状态。
export const fetchUserData = () => ({
type: 'FETCH_USER_DATA',
payload: fetch('/api/user'),
});创建 reducer
在 reducer 中，我们可以使用 redux-suspense 提供的函数来处理 Promise 的执行状态。
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
----- ------------ - -
----- ---
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- --------------------------
------ -------------------- ------- - -------- ---- ---
---- ----------------------------
------ -------------------- ------- -
-------- ------
----- ---------------
---
---- ---------------------------
------ -------------------- ------- -
-------- ------
------ ---------------
---
--------
------ ------
-
-在 reducer 中使用 handlePromise 函数可以极大地简化 reducer 中的状态处理过程。
在组件中使用
最后，在组件中使用 usePromise 钩子函数来获取异步请求的状态，以及使用 useSelector 函数来获取组件所需的状态。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- -----------------
------ - ------------- - ---- -------------------------
------ ------- -------- ---------- -
----- -------- - --------------
----- ---- - ------------------- -- -----------------
----- ----------- - --------------------------
------------ -- -
--------------------------
-- ------------
-- --------------------- -
------ ----------------------
-
-- ------------------- -
------ ----------- ----------------------------------
-
------ -
-----
---------- -----------------
----------- ------------------
------
--
-示例代码
创建 store
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------------------ - ---- ----------------- ------ ----------- ---- ------------- ----- ------------------------ - --------------------------------- ----- ----- - ------------ ------------ ----------------------------------------- -- ------ ------- ------
创建 reducer
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
----- ------------ - -
----- ---
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- --------------------------
------ -------------------- ------- - -------- ---- ---
---- ----------------------------
------ -------------------- ------- -
-------- ------
----- ---------------
---
---- ---------------------------
------ -------------------- ------- -
-------- ------
------ ---------------
---
--------
------ ------
-
-创建 action
export const fetchUserData = () => ({
type: "FETCH_USER_DATA",
payload: fetch("/api/user"),
});在组件中使用
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- -----------------
------ - ------------- - ---- -------------------------
------ ------- -------- ---------- -
----- -------- - --------------
----- ---- - ------------------- -- -----------------
----- ----------- - --------------------------
------------ -- -
--------------------------
-- ------------
-- --------------------- -
------ ----------------------
-
-- ------------------- -
------ ----------- ----------------------------------
-
------ -
-----
---------- -----------------
----------- ------------------
------
--
-总结
使用 redux-suspense，我们可以使用 redux 来管理异步请求，可以将 Promise 的状态与组件的状态联系起来，让应用程序的状态管理更加简单和清晰。
redux-suspense 的使用需要注意一些细节，比如在 action 中返回 Promise，在 reducer 中使用 handlePromise 函数处理状态，在组件中使用 usePromise 钩子函数获取 Promise，等等。通过本文的介绍，相信你已经了解了 redux-suspense 的基本使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b45c6eb7e50355dbebb