我应该在哪里从Reactjs应用程序中获取数据？

Question

I have been creating a Reactjs app. I have encountered a problem and want to know where to fetch data from firebase. Is it better to fetch collections of data in the root component(App.jsx) or in individual components?

For now, I have users, products and sales collections. Some components use data from the same collection. Ex: Payments component also uses Sales collection data for analytics.

Case 1: If I fetch data in the root component I do not have to fetch inside the components.

Case 2: If I fetch data inside components I will fetch the same data twice for different components in different routes.

Please, advice me the better way of handling the situation.

Answer 1

You tagged Redux in your question so I assume you are using it in your React App?

If you are using Redux , place all of your fetching in your actions files. If there are other components that are listening to the state that are affected by the fetch, it will automatically re-render the component data. No need for you to do the fetching twice.

Answer 2

Case 1:- if you fetch all the data from root component. you will be dealing with lot of data in the beginning , will slow down the initial loading of the app (but should be fine for very tiny apps). Not recommended for medium-large scale apps.
case 2:- This approach is fine but will increase a small delay in all the components(for getting the data from API), but if you are concerned about the bandwidth usage & latency. you should think about a unified data store like redux. Fetch the data once using actions/sideEffects from redux/thunk etc, keep it in the redux store. consume the same data in every other components.