简介
redux-async-dispatch 是一个可以让你方便地在 Redux 应用中使用异步 action 的 npm 包。它提供了简单易用的 API，让你可以轻松地处理异步逻辑。
安装
你可以通过 npm 安装 redux-async-dispatch：
npm install --save redux-async-dispatch
使用步骤
步骤一：Redux store 中配置 middleware
在 Redux store 中配置 middleware，以便使用 redux-async-dispatch：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----------------------- ---- -----------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
---------------------- ------------------------
--
------ ------- ------步骤二：创建异步 action 和 reducer
你需要创建一个异步 action 和一个对应的 reducer。
异步 action
异步 action 使用了 redux-async-dispatch 提供的 asyncDispatch API。例如，下列代码异步地获取用户数据：
import { asyncDispatch } from 'redux-async-dispatch';
export const fetchUserData = () => {
return asyncDispatch({
types: ['FETCH_USER_DATA_REQUEST', 'FETCH_USER_DATA_SUCCESS', 'FETCH_USER_DATA_FAILURE'],
promise: () => fetch('/api/user')
})
};异步 action 返回一个带有 types 和 promise 属性的对象，用来描述该 action 的不同状态和异步处理逻辑。
types 是一个包含请求发起、请求成功和请求失败三个 action type 的数组。
promise 是一个返回 Promise 的函数，用于异步地获取数据。
Reducer
下面是该异步 action 对应的 reducer：
-- -------------------- ---- -------
----- ------------ - ---
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- --------------------------
-- ------- ----- --
------ - --------- -------- ---- --
---- --------------------------
-- ------- ----- --
------ - --------- -------- ------ --------- -------------- --
---- --------------------------
-- ------- ----- --
------ - --------- -------- ------ ------ -------------- --
--------
------ ------
-
-步骤三：在组件中使用异步 action
在组件中使用异步 action，你可以使用 connect 函数和 mapDispatchToProps 方法将 action 添加到组件的 props 属性中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------- - ---- ------------
----- ---- ------- --------------- -
------------------- -
---------------------------
-
-------- -
----- - -------- --------- ----- - - -----------
------ -
-----
-------- -- ------------------
--------- -- -
----
------------------------
-------------------------
-----
--
------ -- -----------------------
------
--
-
-
----- --------------- - ------- -- --
-------- -------------------
--------- --------------------
------ ----------------
---
----- ------------------ - -
-------------
--
------ ------- ------------------------ --------------------------
示例代码
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------
------ ----- ------------- - -- -- -
------ ---------------
------ --------------------------- -------------------------- ---------------------------
-------- -- -- ------------------
--
--
----- ------------ - ---
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- --------------------------
------ - --------- -------- ---- --
---- --------------------------
------ - --------- -------- ------ --------- -------------- --
---- --------------------------
------ - --------- -------- ------ ------ -------------- --
--------
------ ------
-
-
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------- - ---- ------------
----- ---- ------- --------------- -
------------------- -
---------------------------
-
-------- -
----- - -------- --------- ----- - - -----------
------ -
-----
-------- -- ------------------
--------- -- -
----
------------------------
-------------------------
-----
--
------ -- -----------------------
------
--
-
-
----- --------------- - ------- -- --
-------- -------------------
--------- --------------------
------ ----------------
---
----- ------------------ - -
-------------
--
------ ------- ------------------------ --------------------------总结
使用 redux-async-dispatch 能够更加方便地在 Redux 应用中处理异步逻辑，提高开发效率。掌握 npm 包 redux-async-dispatch 的使用方法，能够让你更加自信地开发 Redux 应用，提高项目的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005605e81e8991b448de815