1. 前言
在前端开发中，对于大型复杂应用，使用 Redux 进行状态管理已经是一种非常普遍的选择。Redux 的可预测性和易于调试等特点，使其备受开发者青睐。而 @marswang714/redux-loop 则为开发者提供了一种方便的方式来处理副作用（例如异步请求）。
2. 安装
使用 npm 进行安装：
npm install --save @marswang714/redux-loop
3. 使用
3.1 创建 action creators
首先，我们需要创建 action creators，在此处我们需要使用 createEffect 和 createActions 方法。例如：
import { createActions } from '@marswang714/redux-loop'
export const { fetchData } = createActions('FETCH_DATA')此处的 createActions 将根据字符串 'FETCH_DATA' 自动创建 action creators（例如 fetchData.request、fetchData.success、fetchData.failure 和 fetchData.cancel 等）。这些 action creators 将在下文中使用。
另外，我们还需要针对副作用创建“effect” 函数，例如：
import { createEffect } from '@marswang714/redux-loop'
export const fetchEffect = createEffect(async (url) => {
const response = await fetch(url)
const data = await response.json()
return data
})该 fetchEffect 函数返回一个 promise，在 promise 完成之前，副作用不会被执行。如果该 promise 执行成功，则返回的结果将被作为参数传递给相应的 success action creator；如果失败，则传递给 failure action creator。
3.2 reducer
我们现在需要处理 reducer，以便能够处理我们的新 action creators。使用 loop 函数是一种方便的方式，例如：
-- -------------------- ---- -------
------ - ----- ------- - ---- -------------------------
----- --------- - ------ - --- ------- -- -
------ ------------- -
---- ---------------------
------ ----------- -------------------------------------------------
---- ---------------------
------ - --------- ----- -------------- -
--------
------ -----
-
-此处，我们使用 Effects.promise(fetchEffect())，以便将 fetchEffect 的结果传递给 action creators。同时，我们增加了另一个 action creator FETCH_DATA_SUCCESS，在响应完成时更新 state 中的数据。
3.3 组装
我们现在需要将我们的 action creators、reducer 和 middleware 组装在一起。首先，基本的 store 配置中的 middleware 必须包含 install() 方法：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ - ------- - ---- ------------------------- ------ --------- ---- ------------ ----- ----- - ------------ ---------- -------------------------- -
之后，我们可以使用我们的新 action creators 进行 dispatch，例如：
store.dispatch(fetchData.request({ url: 'https://example.com/api/data' }))4. 示例代码
为了更好的理解使用方法，我们提供一个简单的示例：
-- -------------------- ---- -------
------ - -------------- ------------ - ---- -------------------------
------ - ----- ------- - ---- -------------------------
------ - ------------ ---------------- --------------- - ---- -------
------ - ------- - ---- -------------------------
----- - --------- - - ---------------------------
----- ----------- - ------------------ ----- -- -
----- -------- - ----- ----------
----- ---- - ----- ---------------
------ ----
--
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ---------------------
------ ----------- -------------------------------------------------
---- ---------------------
------ - --------- ----- -------------- -
--------
------ -----
-
-
----- ----------- - -----------------
----- -----------
--
----- ----- - ------------
------------
--------------------------
-
------------------ -- ------------------------------
---------------------------------- ---- ---------------------------------------------- ---上述示例将从指定 URL 获取 JSON 数据，并将其存储在 Redux store 中。当数据更新时，将会在控制台中打印 state。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb581e8991b448dc60a