How to chain async actions?

[ar53n]

Hello, I have been studying Redux and faced with an interesting problem? need to make a chain of asynchronous requests from other Actions
1-getUser()
2-getPost()

I have 2 solution execute after sign in user .then(dispatch({type:GET_POST_REQUEST}))
or write function in middleWare.

How it to do correctly?

[gaearon]

Hi! This is an issue tracker and not a support forum. We’d appreciate you asking on StackOverflow the next time because the answers here get lost, unlike on SO.

That said, if you create your store with Redux Thunk middleware, you can write async action creators like this:

// If you use Redux Thunk...
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
const store = createStore(reducer, applyMiddleware(thunk))

// You can define asynchronous action creators that return functions.
// We call such action creators "thunks":

export function getUser(id) {
  // Redux Thunk will inject dispatch here:
  return dispatch => {
    // Reducers may handle this to set a flag like isFetching
    dispatch({ type: 'GET_USER_REQUEST', id })

    // Perform the actual API call
    return fetchUser().then(
      response => {
        // Reducers may handle this to show the data and reset isFetching
        dispatch({ type: 'GET_USER_SUCCESS', id,  response })
      },
      error => {
        // Reducers may handle this to reset isFetching
        dispatch({ type: 'GET_USER_FAILURE', id,  error })
        // Rethrow so returned Promise is rejected
        throw error
      }
    )
  }
}

// Thunks can be dispatched, if Redux Thunk is applied,
// just like normal action creators:
store.dispatch(getUser(42));

// The return value of dispatch() when you dispatch a thunk *is*
// the return value of the inner function. This is why it's useful
// to return a Promise (even though it is not strictly necessary):
store.dispatch(getUser(42)).then(() =>
  console.log('Fetched user and updated UI!')
)

// Here is another thunk action creator.
// It works exactly the same way.
export function getPost(id) {
  return dispatch => {
    dispatch({ type: 'GET_POST_REQUEST', id })
    return fetchPost().then(
      response => dispatch({ type: 'GET_POST_SUCCESS', id,  response }),
      error => {
        dispatch({ type: 'GET_POST_FAILURE', id,  error })
        throw error
      }
    )
  }
}

// Now we can combine them
export function getUserAndTheirFirstPost(userId) {
  // Again, Redux Thunk will inject dispatch here.
  // It also injects a second argument called getState() that lets us read the current state.
  return (dispatch, getState) => {
    // Remember I told you dispatch() can now handle thunks?
    return dispatch(getUser(userId)).then(() => {
      // Assuming this is where the fetched user got stored
      const fetchedUser = getState().usersById[userId]
      // Assuming it has a "postIDs" field:
      const firstPostID = fetchedUser.postIDs[0]
      // And we can dispatch() another thunk now!
      return dispatch(getPost(firstPostID))
    })
  }
}

// And we can now wait for the combined thunk:
store.dispatch(getUserAndTheirFirstPost(43)).then(() => {
  console.log('fetched a user and their first post')
})

// We can do this anywhere we have access to dispatch().
// For example, we can use this.props.dispatch, or put action
// creators right into the props by passing them to connect, like this:
// export default connect(mapStateToProps, { getUserAndTheirFirstPost })

We should put this into the FAQ.

[ar53n]

I solved this problem as follows. Without modify actions. I put in the component Promise.

  clickShowUserEvent(data) {
   Promise.resolve(data.userAuth(data.login, data.password)) // dispatch
    .then(function (response) {
      data.showEvents(); //dispatch
      return response;
    })
    .then(function(response){console.log("@RESPONSE",response);data.show(data)})
  }

This is the correct decision?

[gaearon]

This works too, which pattern to use is up to you.

[sompylasar]

@ar53n The pattern with a promise in a React component has several flaws:

• There is no error handling (in the example above), i.e. the catch part. You may get unhandled rejections.
• It's uninterruptible, e.g. when the component unmounts or some action happens that changes the app state.
• Its state is implicit. Though the side-effects is a separate discussion, at least having a trace of that running process in the app state would be useful.

[ar53n]

@sompylasar thank you John thanks for your comments. I just dont want modify simple actions. We have 2 simple actions Authenticationand GetEventsit is 2 async request and even contain catch. Just this action call when click on component
e.g.

export function userAuth(login, password) {
  return (dispatch, getState) => {
    console.log('STATE', getState())
    let newState = dispatch(requestUserAuth(login, password))
    return fetch(AUTH_URL + newState.queryParams, MY_INIT)
      .then(response => response.json())
      .then(function (json) { dispatch(receiveUserAuth(json)); return json})
      .catch(error => dispatch(errorUserAuth(error)))
  }
}

And we have this

Сorrect me if I'm wrong, thank you

[sompylasar]

@ar53n Then you're good, the errors are handled, and the process is tracked in the store. The issue with uninterruptible process in a component still applies, but that's probably not that important if you have started in a component or in an action thunk.

[kouhin]

@ar53n You may also take a look at redux-dataloader.
It is designed for complex chain async actions.
Hope it helps!

[timdorr]

Closing this out since there are some possible solutions posted here. You may also want to look into redux-saga nowadays!

[alsma]

@gaearon does your example break time traveling isn't it ?

I mean for instance your AJAX call failed first time and then you go fix server side and want to redo it