I'm not sure why you'd need to check individual data points to know whether data has loaded. You're conflating: (1) checking whether data has been loaded, and (2) checking whether the data is valid (contains all expected properties).
I think you've come up with an incomplete pattern for data validation. You'd need to add in some checks for data types and value constraints rather than only checking whether a property exists. However, to simply check whether data has been loaded, all you really need to know is whether your method for loading the data (or, usually, fetching the data) has completed or not.
It's important to understand that the question of whether data has been loaded is a different question from whether data is valid.
Here's an example of a solid React + Redux implementation I threw together: codepen.io/HoraceShmorace/pen/QWpxLYw. It determines whether data is loading in a loadData Redux action, and determines whether data is valid in a setData Redux action.
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 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.
I'm not sure why you'd need to check individual data points to know whether data has loaded. You're conflating: (1) checking whether data has been loaded, and (2) checking whether the data is valid (contains all expected properties).
I think you've come up with an incomplete pattern for data validation. You'd need to add in some checks for data types and value constraints rather than only checking whether a property exists. However, to simply check whether data has been loaded, all you really need to know is whether your method for loading the data (or, usually, fetching the data) has completed or not.
It's important to understand that the question of whether data has been loaded is a different question from whether data is valid.
Here's an example of a solid React + Redux implementation I threw together: codepen.io/HoraceShmorace/pen/QWpxLYw. It determines whether data is loading in a
loadDataRedux action, and determines whether data is valid in asetDataRedux action.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.