riseres riseres - 10 days ago 7
React JSX Question

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

In redux store, I can use

Thunk
for asyncs state :
fetching_data
and do
render()
to block elements.

but i think it makes a lot of work to do. if I have many components to
blockUi
.

Are there any best practice to make it easy like

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

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

Answer

You can use something like 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/)

It's simple with react-block-ui.

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

Now, when the REQUEST_START action is dispatched the section will start blocking, and when REQUEST_SUCCESS is dispatched, it will stop. You can change these action names to what you are using.

There is a middleware piece, see the example and documentation on https://availity.github.io/react-block-ui/components/reduxblockui/ for more information.

Comments