0

We know that if a Redux action triggers an API call to a server (whether in Redux middleware or Redux Thunk), it takes time to receive the answer from the server. During this waiting phase, the UI must somehow shows the user that some loading is being done (showing an Spinner for example). In React and React native, a famous trick to handle these common situations is a isLoading boolean flag in the Redux state and of course, a loading action being dispatched. This boolean will be toggled once the answer is ready to be shown, so that I can update the UI.

However, after applying this trick for years, what I've got is an application full of bugs and errors and a super dirty code with a lot of redundant code.

I have checked all the React life cycle hooks to check the order, in which the hooks are called and the process of Redux dispatching. It seems that Redux and React works totally separately. (I know that getDerivedStateFromProps is called once the store has been updated, but it does not solve my problem)

I need a better way to handle these common situations. I don't know if I need to make modification in Redux part of my application, or in the UI, or ...

Kasra
  • 1
  • 1
  • 3
  • I think a local isLoading state in component is much cleaner that the global isLoading state in redux. – Sina Jun 11 '19 at 19:01
  • What is the bug?How can we know what's your problem? – Devin Gong Jun 12 '19 at 02:01
  • @Sina A local state is not possible since the boolean flag has been used in different part of the application. – Kasra Jun 12 '19 at 09:35
  • @DevinGong As the application and the code get bigger and more complicated, handling these situations will become a nightmare. – Kasra Jun 12 '19 at 09:37

0 Answers0