在现代 Web 开发中，数据的处理和状态管理成为了前端开发不可避免的问题。Redux 是一种广泛应用的状态管理库，它提供了一个可预测的状态容器，可以帮助我们管理单一的应用状态。但在实际应用中，我们经常需要处理可能失败的操作，比如 API 请求、表单提交等等。Redux-Optimistic-UI 就是一个能帮助我们处理这种问题的 npm 包。
什么是 Redux-Optimistic-UI
Redux-Optimistic-UI 是一个用于增加更好用户体验的 Redux 中间件和 HOC 集合。它能够在用户提交请求时，快速更新界面，避免用户长时间等待的情况，并可自动处理异常情况，以保证数据的一致性。
基于 Optimistic UI 的实现，Redux-Optimistic-UI 将内容分为「乐观部分」和「悲观部分」，优先展示「乐观部分」，在后台处理完成后，再进行「悲观部分」的展示。这个过程中出现的错误，也会在界面上进行反馈，以提示用户具体的操作结果。
如何使用 Redux-Optimistic-UI
接下来简单介绍如何在应用程序中使用 Redux-Optimistic-UI，下面是一个示例代码。
我们需要首先安装 Redux-Optimistic-UI：
npm i -S redux-optimistic-ui
然后在 Redux Store 中应用 Redux-Optimistic-UI 中间件:
-- -------------------- ---- ------- ------ - ------------ ---------------- -------- --------------- - ---- -------- ------ -------------------- ---- ---------------------- ------ - -- -------- ---- ------------- ----- ----------- - -------------------------- ----- -------- - ------------------------------------------------- ----- ----- - ------------------------ ----------
接下来，我们需要定义一个 redux action，告诉 Redux 该如何处理我们的更新操作。比如我们有一个提交文章的表单，而我们希望能够在用户提交时，快速的将文章更新到 UI 中，代码可能会像下面这样：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------------
------ ----- ---------- - -- ------ ------- -- --
------------
----- --------------
-------- -
------
-------
--
----- -
-- -------------- -- ---
--
-- ------------- -- ----
-------- -
---- ---------
------- -
------ --
-
-
---这里，我们使用 optimistic 方法来将我们的基本 action 转换为一个「乐观」的操作。这样，我们就可以很方便的在 UI 中展示提交过程的进度，并在完成操作之后更新界面。如果出现异常情况，则会自动进入「悲观部分」，提示用户异常情况。
在 UI 界面上，我们可以这样来获取 action 的处理结果：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- --------------- - ----- -- --
------ ----------------------
---
----- -------- - -- ----- -- -- -
-----
--------------- -- -
----- ----------- --
---
------
--
------ ------- -----------------------------------在上面的代码中，我们将所有「乐观」操作的结果，都存储在 state.optimistic 的状态树中。这样，我们就可以在 UI 中轻松的读取到操作结果，并将它们展示在页面上。
总结
Redux-Optimistic-UI 是一个帮助我们优化用户体验的 Redux 中间件和 HOC 集合。它通过「乐观部分」和「悲观部分」的处理方式，快速更新用户界面，并优雅的处理所有可能的异常情况。通过上面的简单介绍，相信读者已经可以愉快的在自己的项目中使用 Redux-Optimistic-UI 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c51