redux-source-with-block-ui 是一个带有阻塞 UI 功能的 React Redux 中间件，用于处理 UI 与 Redux Store 同步更新的问题。这个包的使用非常简单，可以帮助开发者解决很多 Redux 应用中出现的问题。本次文章将为您详细介绍如何使用 redux-source-with-block-ui 包。
为什么需要 redux-source-with-block-ui 包？
在一些复杂的 Redux 应用场景中，当应用发出 Action 操作时，经常会出现 UI 卡顿、界面闪烁等不好的现象。这是因为 Redux 要在 Store 中对所有的 Action 操作进行处理，导致处理时间过长，UI 无法及时响应。
redux-source-with-block-ui 包提供的是一个阻塞 UI 功能，可以将 UI 暂时屏蔽掉，并在处理完成后再进行更新，从而解决了这个难题。
如何安装 redux-source-with-block-ui 包？
redux-source-with-block-ui 可以使用 npm 包管理器进行安装。
可以使用以下命令来安装 redux-source-with-block-ui：
npm install --save redux-source-with-block-ui
如何使用 redux-source-with-block-ui 包？
redux-source-with-block-ui 包使用非常简单，只需要在你的 Redux Store 中添加该中间件即可。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------------- ---- ----------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------------------- -- ------ ------- ------
在 Store 中加入 blockUiMiddleware 中间件之后，Redux Store 就可以自动实现对阻塞 UI 的处理。
redux-source-with-block-ui 包的指导意义
redux-source-with-block-ui 包解决了一些复杂的 Redux 应用场景中，UI 卡顿、界面闪烁等问题。通过本篇文章的介绍，了解了如何使用该包，并可以在开发中使用该包进行解决问题。
示例代码
-- -------------------- ---- -------
------ ------ - --------- ------ - ---- --------
------ - ----------- - ---- --------------
------ - --------- - ---- -------------
----- --------- - -- -- -
----- ------------ -------------- - -------------
----- -------- - --------------
----- -------- - -------------
----- ------------ - -- -- -
--------------------------------
------------------------
------------------
--
------ -
-----
------
-----------
------------------
-----------------
------------- -- ------------------------------
--------------
--
------- ----------------------------------
------
--
--
------ ------- ----------上面是一个使用 redux-source-with-block-ui 的搜索组件。在输入框中输入搜索内容，点击「搜索」按钮时，该中间件将会阻止界面的更新直到异步请求处理完成。可以看到，整个过程与普通组件使用并没有太大区别，只需要在 Store 中加入 blockUiMiddleware 中间件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bce