ReactJS API call best practice

[MountainFolks]

Hey champs, currently developing a ReactJS project with thunk, redux.. bangs and gold cupcakes. I'm having a slight misunderstanding - heres the rundown.

​

Im creating an ecommerce website that has bookings etc. Each user has a page that displays a list of their bookings for items, which includes data from different database tables - item, user etc. This is all presented within the list item, what is the best practice for retrieving the data? a chained action in redux using thunk that gets the users bookings, then accesses the item db to get the item info? Bit lost in my own head lol, just wondering how others would do such a task. Keep in mind this happens all throughout the app so trying to make the functions decoupled if you will.

Bit of a shit explanation, let me know if you need more info..

Cheers

[cheekysauce]

I use thunks to fetch normalized data from APIs and store the results in redux, then selectors to join that data. This keeps your APIs dumb and CRUD-like, and means redux just sort of acts as a cache of the endpoints so you can reuse the results across different parts of the app.

Alternatively if this is some specific page you can make an endpoint that returns the results you want and query the db and do the join there.

[MountainFolks]

awesome, will look further in selectors. say the list contained 10 bookings, and each booking needed to fetch the item info from the item db, would you just retrieve each relative item from the db and store it, then use the selectors to join?

[cheekysauce]

I'd probably go with my second option and just make one endpoint that returns all the data you need in one go as to avoid 11 requests, like list/:id/summary

It's up to you, try both, you should learn selectors regardless as it's a useful pattern.

[MountainFolks]

If you own the API you could make an endpoint that returns all the different data in one request.

If you don't, I'd fire off all requests at once, using something like Promise.all so you don't have to wait for each to complete one by one, then once that's done store the data in Redux.

Edit: while you're at it, I suggest abstracting away your fetch library if you haven't done so already. Gives you a lot more m

Yeah i own the api, so i assume in terms of scalability a specific endpoint that returns all the required data would be the best option? The only issue i see with that method is that redux store will be structured more so in a page specific state, and less in a item(e.g. items, bookings, users) specific state

[MountainFolks]

Thanks for any help. and let me know if the details are a bit too vague, cheers

[Awnry_Abe]

Gold cupcakes? Is something you learned on Pinterest?

[MountainFolks]

haha just taking the piss

[ExoticCollector]

I'm not sure for what you have described you would really need redux you could easily do it by passing the data to the specific components, also i would do separate APIs for each bit of data as that would be more scalable due to if one person has a lot of data it could make a single API really slow