Управление выходом Redux

Question

Я работаю над приложением React для отображения содержимого веб-сайта WordPress с использованием WordPress Rest API, Redux и Thunk.

WordPress API возвращает сообщения без подробной информации о категории (name, slug, так далее). Все, что я получаю, это id, В настоящее время я вызываю дополнительное действие / функцию, чтобы получить подробную информацию о категории ( вывод). Ниже приведен пример того, как я в данный момент загружаю свои сообщения.

// Actions.js

import axios from 'axios'

export const fetchPosts = (page = 1) => {
  return {
    type: "FETCH_POSTS",
    payload: axios.get(`${REST_URL}/wp/v2/posts?per_page=14&page=${page}`)
  }
}

|

// PostsReducer.js
const initialState = {
  posts: [],
  fetching: false,
  fetched: false,
  error: null
}

export default function reducer(state=initialState, action) {
  switch (action.type) {
    case "FETCH_POSTS": {
      return {
        ...state, 
        fetching: true
      }
    }
    case "FETCH_POSTS_REJECTED": {
      return {
        ...state,
        fetching: false,
        error: action.payload
      }
    }
    case "FETCH_POSTS_FULFILLED": {
      return {
        ...state,
        fetching: false,
        fetched: true,
        posts: action.payload
      }
    }
  }

  return state
}

И вот как я получаю информацию о категориях:

export const fetchCategory = (id) => {
  return {
    type: "FETCH_CATEGORY",
    payload: axios.get(`${REST_URL}/wp/v2/categories/${id}`)
  }
}

Есть ли способ объединить мои fetchPosts() действие с fetchCategory() действие, поэтому оно заполняет post.categoriesвернулся из fetchPosts() с более подробным fetchCategory() Информация?

Answer 1

Если вы ссылаетесь на цепочку вызовов ajax, вы можете использовать этот пример, чтобы понять, как thunk может работать на вас:

function loadSomeThings() {
    return dispatch => {
        fetchFirstThingAsync.then(data => { // first API call
            dispatch({ type: 'FIRST_THING_SUCESS', data }); // you can dispatch this action if you want to let reducers take care of the first API call
            return fetchSecondThingAsync(data), // another API call with the data received from the first call that returns a promise
        })
        .then(data => {
             dispatch({ type: 'SECOND_THING_SUCESS', data }); // the reducers will handle this one as its the object they are waiting for
        });
    };
}

В основном, когда мы звоним loadSomeThings мы отправляем новый action как функция (fetchFirstThingAsync) как наш первый вызов ajax, redux-thunk поймает, что до того, как какой-либо редуктор выполняет функцию, он не является простым объектом, с которым могут справиться редукторы, thunk вызовет это function с dispatcher в качестве аргумента getState и еще немного args), мы ждем с .then и тогда мы можем отправить простой объект, который reducers могу обработать + вернуть еще одно обещание (fetchSecondThingAsync) это ваш второй вызов AJAX, мы ждем его с .then и снова отправка простого объекта, с которым могут работать редукторы.