前言
在现代前端应用开发中，状态管理是一个非常重要的部分。redux 是一个常用的状态管理库，但是 redux 的使用有些繁琐。为了减轻 redux 的使用难度，社区中出现了很多辅助库，比如 redux-thunk、redux-saga 等等。其中有一个比较新的库 redux-subs，它可以帮助我们更方便地管理异步数据请求。
安装
npm install redux-subs
使用
引入
import { subscribe, unsubscribe, initSubStore } from 'redux-subs';使用 subscribe 注册
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ------------
------ - ------------ --------------- - ---- -------
------ - --------------- - ---- -------------
------ ----- ---- -------------
-- -- -------
----- ----- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- - ----- ------------ ---------- ----- --
---- --------------
------ ---------------- ------ --
------------ --- -----
- - -------- ---------- --------------- -
- ----
-
--------
------ -----
-
-
----- ----- - ------------
----------------- ----- ---
----------------------
-
-- ----
----- ---------- - ----- -- --------- --------- ------------- -- -- -
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
---------- ----- ----------- ----- ---------- ---
--
-- ------
--------------------- - ---- ------- ---
-- --- --- -----
--------------------
-- -------
-- --------
---------------- ----- ------------------------- -------- ---- ---
-- ------
---------------- ----- ------------------------- -------- ----- ---API 介绍
subscribe
// 参数说明 subscribe(asyncSubscriber: (param: SubscribeParam) => Promise<any>, options?: SubSubscribeOptions);
subscribe 是用于注册一个异步数据请求的函数，subscribe 函数中有两个参数：
- asyncSubscriber，异步函数：需要请求数据的异步函数，具体参数可以看 SubscribeParam 声明。
- options，可选参数：是一个可选项，具体见 SubSubscribeOptions 声明。
-- -------------------- ---- -------
-- -------------- ----
---- -------------- - -
--------- ---- -- ----- -------- --
--------- ---- -- ----- -------- --
-------------- ------- -- --------------------------------------
------------ -- -- ----- -- ----
-------------- ----- ------- -- --- -- ----------
--
-- ------------------- ----
---- ------------------- - -
----- ------- -- ----
-------------- ------- -- --------------- ---
-------- - --- -------- --- - -- -----
--unsubscribe
// 参数说明
unsubscribe(options: { key: string });unsubscribe 是用于取消注册异步数据请求的函数，需要传入一个配置对象 options，其中 key 是注册数据请求时的 key。
initSubStore
// 参数说明
initSubStore(store: any, { refreshAll }: { refreshAll?: boolean } = {});initSubStore 是用于初始化 sub store 的函数，用于注册数据请求的状态。需要传入一个 store 对象，类型为 redux 中的 store，同时可以附带配置项：
- refreshAll：默认为 false，是否刷新所有数据请求。
getStateSlice
getStateSlice 是用于获取指定 sub state。
// 参数说明 getStateSlice(name?, action?);
参数说明：
- name：数据请求的名称，必须是注册时传入的名称。
- action：获取后的数据需要经过 reduce 处理，action 形式进行处理，如果不传，则直接获取 state（开发不建议使用）。
示例
-- -------------------- ---- -------
------ - ---------- ------------ ------------ - ---- -------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
-- -- -------
----- ----- - ------ - --- ------- -- -
------ ------------- -
---- ------------
------ -------------
--------
------ ------
-
--
----- ------ - ------ - --- ------- -- -
------ ------------- -
---- -------------
------ --------------
--------
------ ------
-
--
----- ----- - ------------
----------------- ------ ------ ---
----------------------
--
-- ----
----- ---------- - ----- -- --------- --------- ------------- -- -- -
----- --- - ----- ----------------------------------------------------
----- ---- - ----- -----------
---------- ----- ------------ ------ ---- ---
--
----- ----------- - ----- -- --------- --------- ------------- -- -- -
----- --- - ----- -----------------------------------------------------
----- ---- - ----- -----------
---------- ----- ------------- ------- ---- ---
--
-- ------
--------------------- - ---- ------- ---
---------------------- - ---- -------- ---
-- --- --- -----
--------------------
-- ----------
---------------- ----- ------------------------- -------- ---- ---总结
redux-subs 可以让我们更简单的进行异步数据处理，有了 redux-subs，我们可以专注于我们的业务逻辑，而无需为复杂的 redux 状态管理花费太多时间和精力。希望本文能对你掌握 redux-subs 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671c81e8991b448e3779