ReactJs + Redux：如何像 jQuery BlockUi 一样简单地做 blockUI？答案

【问题标题】：ReactJs + Redux : how to do blockUI easy just like jQuery BlockUi?ReactJs + Redux：如何像 jQuery BlockUi 一样简单地做 blockUI？
【发布时间】：2016-08-21 19:56:32
【问题描述】：

在 redux 商店中，我可以使用 Thunk 来表示异步状态：fetching_data 并使用 render() 来阻止元素。

但我认为这需要做很多工作。如果我有很多组件要blockUi。

是否有任何最佳实践可以让它变得简单

 $('#container-1').blockUi();   
 $('#container-1').unBlockUi(); 

  $('#container-2').blockUi();  
  $('#container-2').blockUi();

【问题讨论】：

为什么需要屏蔽很多组件？它与异步数据获取有何关系？您想在获取数据时阻止 UI 吗？请提供更多信息，目前尚不清楚要达到的目标。

标签： jquery reactjs redux react-redux redux-thunk

【解决方案1】：

您可以使用类似react-block-ui 的东西，它有一个特定的组件，用于根据redux 中调度的操作（https://availity.github.io/react-block-ui/components/reduxblockui/）进行阻塞和解除阻塞

使用 react-block-ui 很简单。

<ReduxBlockUi block="REQUEST_START" unblock="REQUEST_SUCCESS">
  <p>The Thing I am Blocking</p>
</ReduxBlockUi>

现在，当REQUEST_START 动作被调度时，该部分将开始阻塞，而当REQUEST_SUCCESS 被调度时，它将停止。您可以将这些操作名称更改为您正在使用的名称。

有一个中间件，有关更多信息，请参阅https://availity.github.io/react-block-ui/components/reduxblockui/ 上的示例和文档。

【讨论】：