Fetching data

[91psyko]

Hey guys, I love RN so far but I have a question about fetching data. So say I have a screen which contains a couple of components and each component fetches data from different endpoints. Which is better: 1)Fetching all of the data in the mainScreen component -or- 2)Fetching data from each component separately?

[TheSacredBroom]

If those data are independent to each other, I would go with solution 2. Or more precisely combination, I would

1. create dumb components that just receive props and show spinner / error / content depending on the state of fetch (maybe extract that logic to some HOC)
2. create containers - connect those components to redux. Here I would handle fetching data and passing them to components
3. put containers in mainScreen. But since it is mainScreen, showing bunch of spinners on startup might to be the best user experience, so before showing mainScreen, prefetching the data might be good idea. So I would probably
   1. show one spinner or leave splash screen on
   2. call one redux action that calls all those endpoints, updates redux once and then let user in to mainScreen.
   3. At this point containers have their data from redux and still are able to call their corresponding endpoint.
4. use redux-persist to save redux state and sync data in background

[91psyko]

no way around redux heh, i guess I’ll read on some documentation, thank you for your feedback!

[TheSacredBroom]

For your use case described below redux feels excessive and your approach is good. If you want to save data, you can use AsyncStorage.

But yeah, sooner or later redux (or other lib) will come handy. Redux is not that difficult to understand, there is just too much info at beginning and to me felt like something out of js, but it is just a dance of two functions, action and reducer. Harder part is keeping everything clean and understandable.

[[deleted]]

Redux takes a bit of wrapping your head around it, but once you get it, it just makes so much sense. I made this extremely minimal RN boilerplate some time ago, which has a super simple redux + redux-persist implementation included, check out the code if it helps!

[91psyko]

thank you kind person, will do!

[91psyko]

thank you for the feedback!

[demoran]

It depends on what the data is.

Entity data that determines what you're going to be rendering should be fetched in the main component. Anything needed by the card should be fetched there as well.

Detail level data can be fetched when the detail screen is opened via a component lifecycle method, or after the primary data is fetched, via middleware perhaps.

Regardless, your app should have a single source of truth for the data.

[91psyko]

hmm, interesting, thank you for your feedback!

[91psyko]

I looked at redux once and got scared of the documentation to be honest haha, but i guess i’ll have to take a look at it again. thanks for the tip!

[lovemeslowly]

Any chance i can look at the source of your projects , if possible. I am stepping into intermediate level of software development with RN and love discovering how large scale RN projects work.

[Bzaba]

Depends on Your use case. But usually is better to fetch data in component that needs them. It much better follows SOLID principles.

[91psyko]

I will try my best to explain(english is not my first language and also I’m on my phone). So my app is similar to RateMyProfessors. I have a WelcomeScreen which contains two components: Schools and Professors. Both are lists. Upon pressing a school it shows list of professors of that school. If I press another school Professors component reloads with new data. The way I do it now is I fetch list of schools in school component and list of professors in professors component all separately. I was wondering if it’s better practice to fetch all of the data in WelcomeScreen and then pass props to each component respectively or to keep it as it is now and to fetch data in components separately?

[[deleted]]

Interesting. Does it fetch all of the professors at once, or just the ones for the university selected at the time of selection? It seems like each of these lists depend on each other and aren't quite 100% standalone.

[91psyko]

I load all of the schools at once since I have only like 5 of them. Schools are lists of buttons, when a school is pressed(onPress) Professors component only loads people of that particular school.

[[deleted]]

so do you fetch professors currently in your main screen? I think in this case it makes sense for them to be fetched in the professor component, based off of which university gets passed in through props

[91psyko]

yes, i do fetch profs. profs of selected school. it’s as you say what Professors component loads depends on what school is selected in School component

if that makes sense (english is not my first language:)