redux-order 是一个 Redux 插件，它允许您在 dispatch action 前和后执行一些处理。在前端应用程序中，这非常有用，因为它可以帮助您控制应用程序的数据流和状态更新。在本文中，我们将深入探讨如何使用 redux-order 来实现这些效果。
安装
首先，您需要在项目中安装 redux-order。您可以使用 npm 进行安装：
npm install --save redux-order
然后，您需要在 Redux 的 store 中注册 redux-order 插件。在您创建 store 的地方，应该像这样使用 applyMiddleware 函数来注册插件：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ ----------- ---- -------------
----- ----- - ------------
------------
--------------------------------
--然后，您就可以开始使用 redux-order 来控制 Redux 应用程序中的数据流了。
用法
redux-order 提供了三个内置的阶段：before, after, and finalize。这些阶段用于允许您在 action 被发起和 reducer 更新状态之间执行一些处理。您可以使用这些阶段来实现数据的验证、更新状态和发送网络请求等。
before 阶段
在 action 发起之前执行的处理程序，允许您在 action 到达 reducer 之前拦截它并执行一些验证或其他处理。在 redux-order 中，before 阶段的处理程序应该返回一个对象，它应包含一个名为 action 的属性。这是因为，redux-order 期望您返回一个新的 action 对象，它将替换掉原始的 action 对象。
例如，下面是一个在 action 发起之前验证数据有效性的处理程序：
-- -------------------- ---- -------
----- -------------- - -- ------ -- --------- -- -
----- - ----- ------- - - -------
-- ----- --- ------------- -- -------------- -
----- --------- - - ---------- -------- - ----------- ------ ----- -- --------- - --
--------------------
------ - ------- --------- --
-
------ -----
--在上述代码中，validateAction 处理程序检查 UPDATE_USER action 是否缺少 name 属性。如果缺少，则它会创建一个新的 action 对象，并添加一个包含错误消息的 error 属性。然后，它将新 action 对象发送给 reducer。
after 阶段
发生在 reducer 更新之后执行的处理程序，允许您在 reducer 更新状态之后执行一些附加处理。在 redux-order 中，after 阶段的处理程序可以返回一个新的 action 对象，也可以返回一个函数。
例如，下面是一个在 reducer 更新后将新状态存储到本地存储中的处理程序：
const storeStateToLocalStorage = ({ getState }) => {
const state = getState();
localStorage.setItem('appState', JSON.stringify(state));
return null;
};在上述代码中，storeStateToLocalStorage 处理程序获取当前状态并将其字符串化。然后，它将字符串化的状态存储到本地存储中。如果返回对象是 null，redux-order 不会创建新的 action 并继续执行，否则将执行新的 action。
finalize 阶段
finalize 阶段是在派发 action 后执行的最后一个阶段。在 redux-order 中，每个处理程序都应该返回一个 Promise 对象。如果您在 finalize 阶段没有任何处理程序，则 redux-order 不会等待任何 Promise 对象。
示例代码
下面是一个示例，展示了 before、after 和 finalize 处理程序的实际使用场景：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ ----------- ---- -------------
----- -------------- - -- ------ -- --------- -- -
----- - ----- ------- - - -------
-- ----- --- ------------- -- -------------- -
----- --------- - - ---------- -------- - ----------- ------ ----- -- --------- - --
--------------------
------ - ------- --------- --
-
------ -----
--
----- ------------------------ - -- -------- -- -- -
----- ----- - -----------
-------------------------------- -----------------------
------ -----
--
----- ------------------ - -- ------ -- -- -
----- - ----- ------- - - -------
-- ----- --- ------------- -
----- - ----- - - --------
-- ---- ----- -- --------- -------
-
------ -----
--
----- --------------- - ----- -- -- -
----- ------ - ----- --------------------------------
----- ---------- - ----- --------------
-- ----------- -- ---------------------- -
-------------------------
-
------ -----
-
----- ----- - ------------
------------
------------------------------------------------------- ------------------------------------------------ -------------------------------------------- -----------------
--在上述代码中，validateAction 处理程序用于验证 UPDATE_USER action 是否包含了 name 属性，并在没有时添加一个错误信息的处理程序。storeStateToLocalStorage 处理程序用于将更新后的状态存储到本地存储中。sendAnalyticsEvent 处理程序用于在用户登录时将事件发送到第三方分析服务中。checkForUpdates 处理程序使用异步函数返回一个 Promise 对象，以检查客户端是否有任何更新。在 finalize 阶段使用这个处理程序，以确保在发生应用程序更新时重新加载页面。
总结
redux-order 是一个非常有用的 Redux 插件，用于控制数据流程和状态更新。在本文中，我们深入探讨了如何使用 redux-order 来控制整个流程，并展示了具体的代码实现。通过使用 redux-order，您可以更好地控制前端应用程序的状态更新，并在 action 被发起和 reducer 更新状态之间执行一些处理，这有助于构建更加高效的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c63