Thanks for your example. I thought it over again and you are totally right. Proper validating data in loading screen component leads to as much 'if's' as cheking if the data is loaded in parent component and should be separate from checking if fetching is finished.
I was trying to find a way of checking if fetching is finished with Promisse.all( ) but your solution with two Redux actions is much simpler and cleaner 😉.
I think it is a good idea to extend this post with your solution. Whould you like to make your own post about it and I will link to it? I can sum up your solution below this one too.
A cross-functional and emotionally intelligent executive leader and Army veteran with over 20 years of proven expertise in driving software engineering and product excellence.
You don't really need 2 Redux actions. I really just used a second one to make it easier to simulate invalid data. The point here is that: (1) checking that your data has loaded and (2) checking that the data is valid are two different things, both of which you should do, but not at the same time.
Here's a slightly different example that illustrates a better pattern codepen.io/HoraceShmorace/pen/yLMqOVr. Note the validateData function, how validation was moved into the loadData async action, and that the setData async action was removed entirely.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks for your example. I thought it over again and you are totally right. Proper validating data in loading screen component leads to as much 'if's' as cheking if the data is loaded in parent component and should be separate from checking if fetching is finished.
I was trying to find a way of checking if fetching is finished with Promisse.all( ) but your solution with two Redux actions is much simpler and cleaner 😉.
I think it is a good idea to extend this post with your solution. Whould you like to make your own post about it and I will link to it? I can sum up your solution below this one too.
You don't really need 2 Redux actions. I really just used a second one to make it easier to simulate invalid data. The point here is that: (1) checking that your data has loaded and (2) checking that the data is valid are two different things, both of which you should do, but not at the same time.
Here's a slightly different example that illustrates a better pattern codepen.io/HoraceShmorace/pen/yLMqOVr. Note the
validateDatafunction, how validation was moved into theloadDataasync action, and that thesetDataasync action was removed entirely.