前言
@redux-orchestrate/core 作为一个 Redux 中间件，能够帮助我们管理 Redux 中的异步流程，在我们的应用程序中起到很大的作用。在本篇文章中，我们将深入介绍 @redux-orchestrate/core，以及如何使用它来增强您的 Redux 应用程序。
概述
@redux-orchestrate/core 是一个 Redux 中间件，可用于在 action 发起到 store 中的 reducer 之前，拦截并处理异步流程。 它是一个增强 Redux store 的库，使用 @redux-orchestrate/core 可以让您的 Redux 应用程序更加灵活、可控和易于扩展。
安装
要使用 @redux-orchestrate/core，您需要在项目中安装它。您可以使用 npm 或 yarn 安装它：
npm install @redux-orchestrate/core --save
yarn add @redux-orchestrate/core
基础使用
使用 @redux-orchestrate/core 的第一步是创建一个 middleware。在该 middleware 中，您可以拦截正在处理的 action，并根据需要发送它们。
以下是一个示例 middleware，用于拦截传递给 Redux 的每个 action：
import { createOrchestrateMiddleware } from "@redux-orchestrate/core"; const middleware = createOrchestrateMiddleware(); export default middleware;
接下来，在您的 Redux store 中使用该 middleware：
import { createStore, applyMiddleware } from "redux"; import middleware from "./middleware"; import rootReducer from "./reducers"; const store = createStore(rootReducer, applyMiddleware(middleware));
到此为止，@redux-orchestrate/core 的基本用法就介绍完了。下面，让我们更深入地了解其更多功能。
更高级的用法
发送异步操作
使用 @redux-orchestrate/core，我们可以轻松处理 Redux 中的异步操作。以下是一个双重 promise 实现的示例：
-- -------------------- ---- ------- ----- ---------------- - -- -- -- ----- -------------------- --- ----- ---------------- - --------- -- -- ----- --------------------- ------- --- ----- ---------------- - ------- -- -- ----- --------------------- ----- --- ----- --------- - -- -- ---------- -- - ----------------------------- ------ -------------------------------------------- ---------------- -- ---------------- ------------ -- - --------------------------------- -- -------------- -- - ------------------------------------------ --- --展开代码
在这个例子中，我们首先发送一个 FETCH_USER_REQUEST 操作。 然后我们发起一个 API 请求，如果请求成功，则发送一个 FETCH_USER_SUCCESS 操作，并将获取的数据作为 payload 发送到 store。 如果请求失败，则发送 FETCH_USER_FAILURE 操作，并将错误信息作为 error 发送到 store 中。
与 Sagas 集成
@redux-orchestrate/core 可与 Redux-Saga 一起使用。下面是一个示例，演示了如何将 @redux-orchestrate/core 与 Redux-Saga 配合使用：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------- ------ - ----- ---- ---- - ---- --------------------- ------ - ---------------------------- ---------------- - ---- -------------------------- -------- --------------------------- - ------ ------------------- -- - ----- ------- - ------ -- - ----------- -- ----------------- --------- ------ -- -- - ------------------ --------- -- --- - --------- ---------------- - ----- ------- - ----- ------------------------- -------- ----- ------ - ----- ------- - ----- -------------- ----- ----- ----- ---------------- ------- --- - - --------- ---------- - ----- -------------------------------- -------------- ----- ------ - ----- ---------------------------- ----- -------------- -------- - ----- ---------- - ------------------------------ ----- ----- - ------------------------ -----------------------------展开代码
在这个例子中，我们首先创建了一个 eventChannel 来监听数据。 然后，我们使用 Redux-Saga 将其与我们的 Redux store 集成。 最后，我们使用 withOrchestrate 向 store 中添加了一个发送 FETCH_USER 操作的功能。
总结
如您所见，使用 @redux-orchestrate/core 可以让 Redux 应用程序更加灵活、可控和易于扩展。 本文中介绍的内容只是冰山一角，还有更多功能和用法，欢迎您在实践中深入了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668fad9381d61a3540fe6
