Chaining redux payload with axios

Question

I'm building a front-end using React and Redux (with promise middleware and thunk) for a WordPress backend (REST).

Right now I'm doing simple dispatches with Redux to fetch page data, like this one for instance:

export const fetchPostBySlug = (slug) => {
  return {
    type: "FETCH_MODULES",
    payload: axios.get(`${REST_URL}/wp/v2/posts?slug=${slug}`)
  }
}

Now I want to do a more complex call. I want to fetch all tags from WordPress and return these. Then I fetch all featured tags. Then I fetch all posts having a featured tag. Then I fetch all custom post types having a featured tag.

My payload would ideally look like this in the end:

payload: {
  id: 5,
  name: 'tag_5',
  slug: '/tag_5',
  tags: [all tags]
  posts: [all posts and cpt having a featured tag in here together]
}

This is what I have right now which fetches basically fetches everything but doesn't concat and dispatch yet.

const fetchTagPosts = () => {
  axios.all([fetchAllTags(), fetchFeaturedTopics()])
    .then(axios.spread((all, featured) => {
      let payload = {}
      const ft = featured.data.featured_tags
      const ft_length = ft.length

      ft.map((x, i) => {
        getPostsByTag(x.term_id).then(y => payload = addPostToPayload(y.data, x.term_id, payload))
        getCPTByTag(x.term_id).then(y => payload = addPostToPayload(y.data, x.term_id, payload))
        // I need to check here if both are loaded, so I can concat the arrays
        if (ft_length === i + 1) {
          // I need to dispatch/return the payload here
        }
      })
    }))
}

const addPostToPayload = (p, id, payload) => {
  return {
    [id]: {
      posts: payload[id] ? payload[id].posts.concat(p) : p
    }
  }
}

score 1 · Accepted Answer · answered Jul 11 '17 at 03:18

1

Since you are using thunk, you can return a function that accepts dispatch and use that dispatch to send the payload to the reducer.

You also don't need the if statement inside the map function, since map will not loop over the array. In fact, using forEach would be more appropriate in this case, since we are not returning anything.

So your fetchTagPosts would look something like the following:

const fetchTagPosts = (dispatch) => {
  axios.all([fetchAllTags(), fetchFeaturedTopics()])
    .then(axios.spread((all, featured) => {
      let payload = {}
      const ft = featured.data.featured_tags
      
      // loop through ft
      ft.forEach(x => {
        getPostsByTag(x.term_id).then(y => payload = addPostToPayload(y.data, x.term_id, payload))
        getCPTByTag(x.term_id).then(y => payload = addPostToPayload(y.data, x.term_id, payload))
      });
      
      // dispatch payload to reducer
      dispatch({
        type: 'FETCH_TAG_POSTS',
        payload,
      });
    }))
}

answered Jul 11 '17 at 03:18

Mμ.

8,382
3
26
36

Implemented this, thanks. Getting `TypeError: dispatch is not a function` when calling it. – Bob Wassermann Jul 11 '17 at 09:16
can you console.log(dispatch) and tell me if it's undefined? You are using the applyMiddleware correctly right (e.g `applyMiddleware(thunkMiddleware)` in createStore)? Lastly, how are you calling the `fetchTagPosts` function? – Mμ. Jul 11 '17 at 09:25
Yep, it's `undefined`. This is my middleware: `const middelware = applyMiddleware(promise(), thunk, createLogger());` `export default createStore(reducer, middelware)` Tried calling the function in different ways, once just below where I initialized it (in actions), once in a component's `componentWillMount()` like this: `this.props.dispatch(fetchTagPosts())` – Bob Wassermann Jul 12 '17 at 23:03
Got it working. Changed `this.props.dispatch(fetchTagPosts)` to `fetchTagPosts(this.props.dispatched)`. Had to include a counter in the end since the object was returning to quick (empty). Thanks! – Bob Wassermann Jul 12 '17 at 23:28

Chaining redux payload with axios

1 Answers1