Redux和数据获取

Question

我是一个新手，Redux希望这里的人们能帮助我。我正在尝试进行2个api调用，如下所示。然而，似乎只运行了第一个api调用，所以我的rootCategories总是被设置为null。如何确保在更改状态之前也执行第二个api调用？

减速机

 export const categoryListReducer = (state = {categories: [], rootCategories: []}, action) => {
    switch (action.type) {
        case CATEGORY_LIST_REQUEST:
            return {loading: true, categories: [], rootCategories: []}
        case ROOT_CATEGORY_LIST_REQUEST:                
            return {loading: true, rootCategories: []}
        case CATEGORY_LIST_SUCCESS:
            return {...state, loading: false, categories: action.payload[0], rootCategories: action.payload[1]}
        case ROOT_CATEGORY_LIST_SUCCESS:
            return {...state, loading: false, rootCategories: action.payload} 
        case ROOT_CATEGORY_LIST_FAIL:
            return {loading: false, error: action.payload}       
        case CATEGORY_LIST_FAIL:
            return {loading: false, error: action.payload}
        default:
            return state
    }
}

动作

export const listCategories = (breadcrumbs) => async(dispatch) => {
  try {
    //fire off first reducer and load off empty array of products
    dispatch({
      type: CATEGORY_LIST_REQUEST
    })

    const apiEndPoint = breadcrumbs ?
      `/api/products/categories/${breadcrumbs}/` :
      '/api/products/categories/'

    const {
      data
    } = await axios(apiEndPoint)
    const {
      data2
    } = await axios('/api/products/categories/')

    dispatch({
      type: CATEGORY_LIST_SUCCESS,
      payload: [data, data2],
    })
  } catch (error) {
    console.log('error  ' + error)
    dispatch({
      type: CATEGORY_LIST_FAIL,
      payload: error.response && error.response.data.message ? error.response.data.message : error.response.data
    })
  }
}

Answer 1

试试这个：

    if (data & data2) {
      dispatch({
        type: CATEGORY_LIST_SUCCESS,
        payload: [data, data2]
      })
    }

现在，只有在设置了两个const的情况下才会执行分派。

编辑：

我发现了这个post，关于Axios似乎有它自己的方式一次获取两个URL，如下所示：

import axios from 'axios';
 
let one = "https://api.storyblok.com/v1/cdn/stories/health?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt"
let two = "https://api.storyblok.com/v1/cdn/datasources/?token=wANpEQEsMYGOwLxwXQ76Ggtt"
 
const requestOne = axios.get(one);
const requestTwo = axios.get(two);
 
axios.all([requestOne, requestTwo]).then(axios.spread((...responses) => {
  const responseOne = responses[0]
  const responseTwo = responses[1]
  // use/access the results 
})).catch(errors => {
  // react on errors.
})