Executing async actions in order with Redux and React

Question

In my React/Redux application I have custom group objects. I want to have a page which displays a summary list of all groups alongside a detailed view of the currently selected group (which defaults to the first group in the list). I need to request a list of groups (/groups) from my rest api, get the id of the first group (from the store?) and set that to be the selected group and then make a get request to return a list of members of the selected group (/groups/${id}/members)

I'm very new to React/Redux and I'm not sure how to go about coding this. Should I write this as 3 separate actions and can I make a react component call these actions using the results from the previous action? Or should I place the logic for this in a combined action handler using thunk middleware? How would I write such an action handler in that case?

I would imagine that the selected group is a property, which would be fetched on the componentWillMount eventhandler of a group component? Where as the groups would simply show a list of the group components — Icepickle
– Icepickle, Commented Oct 9, 2017 at 11:10
I was planning to make the selected group and groups both properties of whatever component is managing the page. I don't know how to coordinate the necessary actions to initialise these properties — CSharp
– CSharp, Commented Oct 9, 2017 at 11:17

emma · Accepted Answer · 2017-11-03 15:20:59Z

1

It would probably be best to write 3 actions, then chain them together using thunk. Also, any requests are async, so they'll need to use thunk or some other async method anyway. So the requests to /groups and /groups/${id}/members will be thunks looking something like this (arrow functions only for brevity):

export const requestGroups = () => (
  (dispatch) => {
    // Maybe dispatch an action here that says groups are loading,
    // for showing a loading icon or something
    return fetch('/groups').then((response) => (
      dispatch(updateGroups(response))
      // Or just dispatch({ type: 'UPDATE_GROUPS', groups: response })
    )
  }
)

Where updateGroups is an action that sends the response data to the reducers to put it into state. And make sure these thunks return promises so you can chain them together later. You'll probably also want to do some error handling here.

Then once you have those three actions, you can make a thunk that combines them all:

export const initializeGroups = () => (
  (dispatch, getState) => (
    dispatch(loadGroups()).then(() => {
      const { groups } = getState(); // Or wherever the list is
      setSelectedGroup(groups[0]);
      return getGroupData(groups[0]);
    }).then(() => {
      // Dispatch an action saying everything is done, or do any other stuff here.
    }).catch((error) => {
      // Do any error handling
    });
  )
 )

answered Nov 3, 2017 at 15:20

emma

3274 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CSharp Over a year ago

Thanks, this is pretty much what I ended up implementing in the end.

Collectives™ on Stack Overflow

Executing async actions in order with Redux and React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related