本文将介绍 npm 包 redux-thunk-effects 的使用方法。这个包可以在 Redux 应用中帮助处理异步操作，使代码更易维护和扩展。
安装
在项目目录中使用以下命令安装 redux-thunk-effects：
npm install redux-thunk-effects --save
配置
创建 store
在创建 store 的时候需要添加 redux-thunk 的 middleware，这个 middleware 将会处理所有基于 redux-thunk-effects 的 action，它的配置如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ --------------- ---- ------------- ------ - ------------------- - ---- --------------------- ------ ----------- ---- ------------ ----- ---------------------- - --------------------- ----- ----- - ------------ ------------ -------------------------------- ----------------------- -- ------ ------- -----
创建 action
在 action 中，我们需要使用 createEffect 方法来创建一个 effect。createEffect 函数接收一个函数作为参数，这个函数会返回一个 Promise，用于描述异步操作。
在 effect 中，我们通常需要通过 API 调用数据。
import { createEffect } from 'redux-thunk-effects'
export const fetchUser = createEffect((id) => {
return fetch(`/api/users/${id}`).then(response => response.json())
})在这个例子中，fetchUser action 调用了 createEffect 函数来创建一个 effect，该 effect 进行了一个异步的 API 调用，将 Promise 对象作为返回值。
创建 reducer
在 reducer 中，我们需要为所创建的 action 添加相应的处理逻辑。我们需要在 reducer 中添加相应的 case，来处理 effect 的返回值。
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------
------ ----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -------------------
------ - --------- ----- -------------- -
--------
------ -----
-
-在这个例子中，我们为 FETCH_USER_SUCCESS 这个 action 设置了相应的处理逻辑。
触发 action
我们可以在组件中通过 dispatch 函数来触发我们所创建的 action，并在触发后获取 effect 的返回值。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - --------- - ---- -----------------
----- ---- ------- --------------- -
------------------- -
-------------------------------------------------
-
-------- -
----- - ---- - - ----------
------ ---------- - --------- - -------------------
-
-
----- --------------- - ----- -- --
----- ---------------
--
------ ------- ------------------------------在这个例子中，我们使用 dispatch 来触发 FETCH_USER_SUCCESS 这个 action，并使用 mapStateToProps 函数将 effect 的返回值绑定到组件中。
总结
通过使用 redux-thunk-effects，我们可以更加方便地处理纯异步的 action，并将其和同步的 action 结合在一起。同时，在处理异步操作的时候，我们还可以通过 Promise 来更灵活地处理 effect 的返回值。
这些方法不仅可以使我们的代码更加简洁和易于维护，同时还提供了一个良好的结构，使得我们可以轻松地扩展和调整我们的应用。
示例代码
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ --------------- ---- -------------
------ - -------------------- ------------ - ---- ---------------------
-- ----------
------ ----- ------------------ - --------------------
------ ----- --------- - ----------------- -- -
------ --------------------------------------- -- ----------------
--
-- -----------
------ - ------------------ - ---- -----------------
------ ----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -------------------
------ - --------- ----- -------------- -
--------
------ -----
-
-
-- --------
------ ----------- ---- ------------
----- ---------------------- - ---------------------
----- ----- - ------------
------------
-------------------------------- -----------------------
--
------ ------- -----
-- -----------------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - --------- - ---- -----------------
----- ---- ------- --------------- -
------------------- -
-------------------------------------------------
-
-------- -
----- - ---- - - ----------
------ ---------- - --------- - -------------------
-
-
----- --------------- - ----- -- --
----- ---------------
--
------ ------- ------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ce1