CODEWITHSUNDEEP
apireactjsfluxreactjs-flux
bymannan
bymannan

Reputation: 1383

react+flux - one API call vs call for every component strategy

Let's say I have this blog app. There are posts, pages, menu, and user login.

One way to load the entire application state is to have one api call which will include posts, total number of pages for pagination, menu items and current user state.

The second way would be to have multiple API called, one for each component. So one call for posts and pages, one for menu and one for current user.

Which would be best strategy given the fact react is built around components?

Upvotes: 0

Views: 132

Answers (1)

Henrik Andersson
Henrik Andersson

Reputation: 47182

I'll add my 2 cents as answer but still wanting to close as primarily opinion based.

The way I structure my React apps is to have a top level components called Screens or URLs, ie., /list-users should map against the ListUsersScreen component.

In said screen I declare a static method called fetchData, this method returns an object which values are Promises.

{
    users: fetchUsersAction(),
    someOtherApiData: fetchSomeOtherAPIData()
}

This lends well to both pure client apps and universal apps, as well. On your server side you'd have to wait until all Promises resolves until you can render something.

Furthermore you can easily cache the values in your application state object and decide if you want to fetch new data or render stale data, also it saves on bandwidth for your user since the user might or might not decide to continue browsing your site.

Upvotes: 1

Related Questions