简介
redux-simple-promise 是一个用于在 Redux 中简化对异步操作进行处理的库。它基于 Redux 提供的 middleware 来添加异步处理能力，同时使用了 Promises 来处理异步操作。redux-simple-promise 的使用可以让我们在 Redux 中更加方便地管理异步流程，让代码更加简洁易懂。
安装
我们可以通过 npm 以及 yarn 来安装 redux-simple-promise。
使用 npm：
npm install --save redux-simple-promise
使用 yarn：
yarn add redux-simple-promise
使用
redux-simple-promise 的使用非常简单，只需要使用 applyMiddleware 函数将其作为 middleware 加入到 Redux 中即可。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ------------------ ---- ----------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------- ------------------- --
在 Redux 中使用 redux-simple-promise 主要有两个步骤：
创建 action
我们可以使用 redux-actions 库中的 createAction 函数来创建 action。我们可以将 action 分为三种情况：
- 请求开始：为了能够在 UI 界面中显示出请求的加载状态，我们需要在请求开始时发送一个 action 来改变状态。一般有 isLoading 属性。
- 请求成功：当异步请求成功时，我们需要根据结果来发送一个成功的 action 来更新 UI 界面，一般返回一个 data 属性。
- 请求失败：当异步请求失败时，我们需要根据错误信息来发送一个失败的 action 来显示错误提示，一般返回一个 error 属性。
import { createAction } from 'redux-actions';
export const getTodosRequest = createAction('GET_TODOS_REQUEST', (payload) => payload);
export const getTodosSuccess = createAction('GET_TODOS_SUCCESS', (payload) => payload);
export const getTodosFailure = createAction('GET_TODOS_FAILURE', (payload) => payload);发送 action
我们可以在 dispatch 中发送一个带有 Promise 属性的 action（如下所示），redux-simple-promise 会自动处理 Promise 的状态，并在成功或失败时触发相应的 action。
-- -------------------- ---- -------
----- ------- - -----------------------
------ -
----- ------------
--------
----- -
---------- ----------------
---------- ----------------
---------- ---------------
-
--示例
下面是一个完整的示例代码，我们利用 redux-simple-promise 实现了异步请求 todo list 的功能：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------------- ---------------- --------------- - ---- ------------
----- -------- - -- ---------- ------ -------- -- -- -
------------ -- -
-----------
-- ----
------ -
--
---------- - ------------------- -
--
--------------
----
----------------- -- ---- ----------------------------------
-----
----
---
--
-
----- --------------- - ------- -- --
---------- ----------------------
------ -----------------
---
----- ------------------ - ---------- -- --
--------- -- -- ----------
----- ------------
-------- -----------------------
----- -
---------- ----------------
---------- ----------------
---------- ---------------
-
--
---
------ ------- ------------------------ ------------------------------结语
redux-simple-promise 提供了一种简单高效的解决方案来处理 Redux 应用中的异步流程。当我们需要在 Redux 中处理异步操作时，可以尝试一下使用 redux-simple-promise。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b6c