Redux 的一个主要优势是它提供了一种可预测且可控制的应用状态管理方式。但是在真实的应用中，出现错误是不可避免的，特别是在异步操作中，如网络请求、文件读取等。Redux 提供了一些内置的错误处理方法，但是在大型应用中，我们需要更好的错误处理策略。因此，我们可以使用自定义 Middleware 来处理 Redux 中的错误。
自定义 Middleware 简介
Middleware 是 Redux 的一个扩展功能，它可以截获和操作 Redux action 和状态更改。在 Redux 中，Middleware 是可以串联的，因此可以将多个 Middleware 组成一个管道。在 Middleware 管道中，每个 Middleware 可以将其当前操作结果传递给下一个 Middleware 或者处理当前结果并停止 Middleware 管道。
自定义 Middleware 是指根据我们特定需求编写的 Middleware，它可以拦截特定的 action 或状态更改，执行某些操作，并将处理结果传递给下一个 Middleware 或停止 Middleware 管道。自定义 Middleware 可以对 Redux 应用中的错误进行处理。
自定义 Middleware 错误处理
在 Redux 中，错误处理是通过 action 的返回值来进行的。当 action 出现错误时，我们可以将一个特殊的错误 action 作为 action 的返回值，然后在 reducer 中进行处理。然而，这种方式并不能灵活地处理所有类型的错误。因此，我们可以使用自定义 Middleware 来处理错误。
自定义 Middleware 可以拦截特定的 action，如果该 action 出现错误，则可以执行相应的错误处理代码，并将错误信息传递到下一个 Middleware 或者停止 Middleware 管道。下面是一个简单的自定义 Middleware 示例：
-- -------------------- ---- -------
----- --------------- - ----- -- ---- -- ------ -- -
--- -
------ -------------
- ----- ------- -
-------------------- ------ -- ------------- -------
----- ----------- - -
----- --------
-------- ------
------ ----
--
------ ----------------------------
-
--在上面的示例中，我们编写了一个名为 errorMiddleware 的自定义 Middleware。它拦截所有的 action，并执行 try...catch 语句处理错误。如果当前 action 出现了错误，我们会打印错误信息，并将错误信息传递给下一个 Middleware 或者停止 Middleware 管道。我们创建了一个特殊的 'ERROR' action，并将错误信息存储在 action 的 payload 属性中，同时将 error 属性设置为 true。通过将 error 属性设置为 true，我们可以在 reducer 中轻松识别错误 action。
我们可以将自定义 Middleware 添加到 Middleware 管道中，如下所示：
const store = createStore(
rootReducer,
applyMiddleware(
errorMiddleware
)
);自定义 Middleware 错误处理的指导意义
使用自定义 Middleware 错误处理的主要是指导意义是可以让我们更好的处理错误，从而增强 Redux 应用的健壮性和稳定性。使用自定义 Middleware 错误处理可以让我们集中处理错误，不需要将错误处理代码分散到各个 reducer 中。此外，在处理异步操作时，自定义 Middleware 错误处理可以更好地管理错误。例如，我们可以在发生错误时取消正在进行的请求，并清理不需要的资源。这可以避免出现不必要的资源浪费和内存泄漏。
结论
自定义 Middleware 错误处理是处理 Redux 应用中错误的一种高效、灵活的方式。自定义 Middleware 错误处理可以让我们更好地处理各类错误，并增强 Redux 应用的稳定性和可预测性。因此，在开发大型应用时，我们应该充分利用自定义 Middleware 错误处理的优势，创造更好的 Redux 应用。
参考代码：https://codesandbox.io/s/redux-error-handling-with-custom-middleware-bryh7
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efc0016fbf96019730bb1a