ReactJs + Redux：如何像 jQuery BlockUi 一样简单地实现 blockUI？

Question

在 redux store 中，我可以使用 Thunk 作为异步状态：fetching_data 并使用 render() 来阻止元素。

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

有什么最佳实践可以让它变得简单吗

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

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

Answer 1

您可以使用 react-block-ui which has a specific component for blocking and unblocking based on actions dispatched in 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/ 上的示例和文档。

ReactJs + Redux : how to do blockUI easy just like jQuery BlockUi?