CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Anshul Bansal
Anshul Bansal

Reputation: 1893

Multiple API Calls for populating Dropdowns in React Component

I have 3 dropdowns in a react component which are Country, State and Region. Each of these dropdowns are independent in terms of the data which is populated.

I need to populate the data in the dropdowns when the wrapper component is mounted. I am using redux for API calls and data fetching.

Should I dispatch three actions in my component? What should be the approach of populating the 3 dropdowns from the API response in a react-redux setup?

Upvotes: 0

Views: 1144

Answers (2)

Jayce444
Jayce444

Reputation: 9063

The cleanest way is to have a single action that dispatches the other actions. That way, in your component you just have one action you need to import and call, then in that action you dispatch the other 3 actions.

This does mean that the other 3 actions will execute independently and cause 3 discrete store updates. You will have to handle the fact that they won't all be loaded into the store at the same time.

Upvotes: 1

Prasanna
Prasanna

Reputation: 4646

API calls are conventionally treated as asynchronous action. When you say that data fetch for each of the dropdown Country, State and Region are independent of each other, best course of action would be dispatching three separate calls.

Reason: Dropdown components are only populated once you get the data, and all of the api responses are asynchronously obtained. If you dispatch three different actions, you can have any one, two or three of dropdown lists populated when others would still be in loading state; by the virtue of which the user can select countries while others are loading and will not lose time (better UX)

Note: Look into Observables, they do what you are doing by dispatching three actions with a single one. Observables are whole lot more than just merging requests, and could not be explained in this answer.

Upvotes: 1

Related Questions