简介
redux-effect-middleware 是一个用于 Redux 的中间件，它允许您轻松地编写可重用的异步操作，并使您的代码更加易于维护和测试。这个中间件基于redux-thunk，并添加了一些额外的功能来增强您的异步操作。
安装
您可以通过 npm 进行安装：
npm install redux-effect-middleware
使用
首先，您需要在您的 Redux Store 中创建 redux-effect-middleware 的实例，并将其放在您的中间件链中。例如：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ - ---------------------- - ---- ------------------------- ------ ----------- ---- ------------ ----- ---------------- - ------------------------ ----- ----- - ------------ ------------ --------------------------------- -
接下来，您可以在您的 Redux Actions 中使用 effect 函数。effect 函数是一个返回 Promise 的函数，它允许您编写异步操作。
import { effect } from 'redux-effect-middleware'
export const fetchData = () => effect(async (dispatch, getState) => {
const response = await fetch('/api/data')
const data = await response.json()
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data })
})当您调用 fetchData Action 时，它将返回一个 Promise，在 Promise 解决时，您将收到 FETCH_DATA_SUCCESS Action，并且您可以使用数据更新您的 Redux Store。
进阶使用
用 withLoading 高阶函数包装 effect 函数
使用 withLoading 高阶函数包装 effect 函数，可以帮助您处理加载状态并进行错误处理。withLoading 可接受几个参数：
startAction: 在异步操作开始时发出的 Action。successAction: 在异步操作成功时发出的 Action，Action 将包含 effect 函数返回的结果。errorAction: 在异步操作发生错误时发出的 Action。
-- -------------------- ---- ------- ------ - ------- ----------- - ---- ------------------------- ------ ----- -------------------- - ------------- ------------ - ----- ------------------ -- -------------- ------ -- -- ----- --------------------- -------- ---- --- ------------ ------- -- -- ----- ------------------- -------- ----- -- ----- -- ------------ -- -- - ----- -------- - ----- ------------------ ----- ---- - ----- --------------- ------ ---- ---
总结
redux-effect-middleware 是一个非常便捷的中间件，可以帮助我们编写可重用的异步操作，并使我们的代码更易于测试和维护。通过 withLoading 高阶函数的使用，我们可以更好地处理加载状态并进行错误处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005892f81e8991b448ed33f