ReactJs + Redux: как сделать blockUI простым, как jQuery BlockUi?

Question

В магазине redux я могу использовать Thunk для состояния asyncs: fetching_data и сделать render() для блокировки элементов.

, но я думаю, что он делает много работы. если у меня много компонентов до blockUi.

Есть ли лучшая практика, чтобы сделать его легким, как

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

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

Answer 1

Вы можете использовать что-то вроде react-block-ui который имеет специфический компонент для блокирования и разблокирования на основе действий, пересылаемых в Redux (https://availity.github.io/react-block-ui/components/reduxblockui/)

Это просто с реакцией-блоком-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/.