操纵 Redux 输出

Question

我正在开发一个 React 应用程序，使用 WordPress Rest API、Redux 和 Thunk 呈现 WordPress 网站的内容。

WordPress API returns 帖子没有关于类别的详细信息（name、slug 等）。我得到的只是 id。我目前正在调用另一个 action/function 来获取详细的类别信息 (output)。下面是我目前如何获取帖子的示例。

// 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 将捕获在任何 reducer 执行的函数都不是 reducer 可以处理的普通对象之前，thunk 将使用 dispatcher 作为参数调用此 function（以及 getState 和更多 args)，我们用 .then 等待它结束，然后我们可以分派一个 reducers 可以处理的普通对象 + 返回另一个承诺 (fetchSecondThingAsync)，这是你的第二个 ajax 调用，我们用 .then 等待它结束，然后再次分派一个 reducer 可以处理的普通对象。

操纵 Redux 输出

Manipulating Redux output

reactjs

redux

react-redux

redux-thunk