在 Web 开发中，无论是前端还是后端，数据管理和状态管理都是非常重要的一环。而在前端领域，Redux 是一种非常流行的状态管理框架，提供了一种可预测的状态管理方案，得到了众多开发者的青睐。在 Redux 中，使用异步操作通常会用到 Redux-Thunk 中间件，而在使用 Redux-Thunk 的过程中，Promise 也是我们不可忽视的一部分。那么本文将针对如何利用 npm 包 promise-redux-simple 简化 Redux-Thunk 中间件的使用，提供详细的使用教程。
promise-redux-simple 简介
promise-redux-simple 是一个针对 Redux-Thunk 中间件做出封装的 npm 包，它能够很好地简化 Redux-Thunk 的使用，提供更加友好的 API 和更加易读的 Action Creator。 具体来说，它包含两部分内容：
createPromiseThunk函数：它能够让我们更加方便地创建 Redux-Thunk 函数promiseDispatchMiddleware中间件：它能够将 Promise 封装为 Redux-Thunk 函数并自动 dispatch
promise-redux-simple 的安装和使用
npm install promise-redux-simple
promise-redux-simple 中的两个核心 API 分别是 createPromiseThunk 和 promiseDispatchMiddleware。
createPromiseThunk
createPromiseThunk 是一个工厂函数，它的作用是根据不同的 promise 返回不同的 Thunk 函数。它的基本格式如下：
-- -------------------- ---- -------
----- ------------------ - ------ --------------- -- -
----- --------- ------ - ------------------- -----------------
------ ------ -- -------- -- -
---------- ---- ---
------ ----------------------
------------- -- -
----------
----- --------
--------
-------
---
--
------------ -- -
----------
----- ------
-------- ------
-------
---
---
--
--使用 createPromiseThunk 函数的方式是通过调用它创建出我们需要的 Action Creator，这个函数需要两个参数：type 和 promiseCreator。
type：用于标识这个 Action Creator 的类型，作为后续 dispatch 的参数之一。promiseCreator：一个返回 Promise 的函数，它的参数是 Action Creator 的参数。
举个例子，假设我们现在在写一个获取 GitHub 的用户信息的应用，那么我们需要获取用户信息的 API 接口是这样的：
const fetchUser = (username) => {
return fetch(`https://api.github.com/users/${username}`)
.then(res => res.json())
}如果我们直接使用的话，那么可能需要这样写一个典型的 Thunk action 构造函数：
-- -------------------- ---- -------
----- --------------- - ---------- -- -
------ -------- -- -
---------- ----- ----------------------- --
-------------------
---------- -- -
---------- ----- -------------------------- ---- --
--
------------ -- -
---------- ----- ------------------------ ----- --
--
-
-但是，如果我们使用 createPromiseThunk 函数，这个代码就变得非常简洁：
import { createPromiseThunk } from 'promise-redux-simple'
const fetchGithubUser = createPromiseThunk(FETCH_GITHUB_USER, fetchUser)其中 FETCH_GITHUB_USER 通常是一个常量，被用于网络请求的状态管理，具有如下作用：
- 便于后续 dispatch，因为它是 action 的 type 字段
- 可以定义成功和失败的场景
createPromiseThunk 实现中可以通过闭包保存这个 type 信息，在返回的函数中自动完成了 dispatch 操作。当成功时，它会自动将结果放入 payload，status 放入 action 中，当失败时，自动将错误信息放入 payload，status 放入 action 中。我们不需要再手动编写 Thunk 函数。
使用起来非常方便，且代码简洁。
promiseDispatchMiddleware
promiseDispatchMiddleware 是一个自动转换 Promise 到 Thunk action 的中间件，减少 action 创建器的开销。它的作用是封装 Redux-Thunk 中间件，自动将 Promise 进行转换并自动 dispatch。我们可以很方便地在 redux 的 createStore 函数中使用它。
import { promiseDispatchMiddleware } from 'promise-redux-simple';
const store = createStore(reducer, applyMiddleware(promiseDispatchMiddleware));这个中间件会在接收到 Promise 时帮助我们转换为对应的 Thunk action 并自动 dispatch。并且，能够自动处理 Promise 的状态，实现 loading 状态管理。可以将 Promise 直接交给 reducer 处理，从而可以在组件中展示 loading 状态，而不需要特意编写 Thunk action。
promise-redux-simple 的示例代码
下面是一个 promise-redux-simple 简单使用的示例，我们以获取 GitHub 用户信息的 API 为例：
Step1. 安装 promise-redux-simple 包
npm install promise-redux-simple --save
Step2. 配置我们的 Reducer
-- -------------------- ---- -------
------ - ------- - ---- ---------------------
------ - ------------- - ---- ----------------
------ -
------------------------
--------------------------
------------------------
- ---- ------------
----- ------------ - -
---------- ------
----- -----
------ -----
--
------ ----- ------- - --------------
-
---------- ------- ------- -- --
---------
------------------
---
-------------------------- ------- -- --
---------
---------- -----
---
---------------------------- ------- ------- -- --
---------
---------- ------
----- ---------------
------ -----
---
-------------------------- ------- ------- -- --
---------
---------- ------
------ ---------------
---
--
------------
--Step3. 编写 action
import { createPromiseThunk } from "promise-redux-simple";
import { fetchUser } from "../api/github";
export const FETCH_GITHUB_USER = "FETCH_GITHUB_USER";
export const fetchGithubUser = createPromiseThunk(
FETCH_GITHUB_USER,
fetchUser
);Step4. Store.ts
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ - ------------------------- - ---- -----------------------
------ - ------- - ---- ------------
------ -------- ----------- -
------ ------------
--------
---------------------------------------------------------------
--
-Step5. 组件中使用
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------------- ----------------- - ---- ----------------------
------ - --------- - ---- --------------------------
------ ------ ---- ----------------------
----- ---- -------- - -- -- -
----- -------- - --------------
----- - ---------- ----- ----- - - ------------
------- ---------- -- ------------
--
----- ----------- - -- -- -
-------------------------------------
-------------- -- -
-- ------- -- ------------- --- ------------------ -
---------------------------- -- -------
-
--
-------------- -- -
------------------- -- -----
---
--
------ -
---- -----------------------------
---- ------------------------- ----------------------
-- ------ ----
------
---------- -- ---- --------------------------------------------
------ -- ---- -----------------------------------------------
----- -- -
---- ----------------------------
---- --------------------- ---------------- --
-------------------
------
--
------
--
--
------ ------- ----至此，完成了 promise-redux-simple 实用技巧的介绍及示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553e081e8991b448d131d