How do I use Redux API Middleware and Thunk to chain API requests

Question

I have a couple of RSAA actions like so:

export const getUserById = id => ({
  [RSAA]: {
    endpoint: "...",
    method: "GET",
    headers: { "Content-Type": "application/json" },
    credentials: "include",
    types: [
      GET_USER_BY_ID_REQUEST,
      GET_USER_BY_ID_SUCCESS,
      GET_USER_BY_ID_FAILURE
    ]
  }
});

export const getUserPosts = id => ({
  [RSAA]: {
    endpoint: "...",
    method: "GET",
    headers: { "Content-Type": "application/json" },
    credentials: "include",
    types: [
      GET_USER_POSTS_REQUEST,
      GET_USER_POSTS_SUCCESS,
      GET_USER_POSTS_FAILURE
    ]
  }
});

What do I have to do to use thunk (I think) to chain these two actions?

I could create a third action called getUserThenPosts? But what would that look like?

score 0 · Accepted Answer · answered Oct 03 '18 at 21:24

0

Use redux-thunk and create a third action called getUserThenPosts.

export const getUserThenPosts = id => dispatch => {
  return dispatch(getUserById(id))
    .then((payload) => {
      return dispatch(getUserPosts(payload.someIdFromUserPayload)));
    };
};

I'm assuming that getUserPosts requires an argument from the user payload.

answered Oct 03 '18 at 21:24

gburnett

755
8
18

I have the same use-case. Tried going with your solution. For some reason, the *payload* from first dispatch is coming out to be undefined! – whitehat Feb 15 '19 at 19:04

How do I use Redux API Middleware and Thunk to chain API requests

1 Answers1