javascript - React 和 Redux：每个动作的 Redux 状态

Question

我有一个组件，其中有三个子组件，它们在加载时呈现数据。在我的 redux reducer 中，我有三个数组和一个 isLoading 对象。一旦检索到数据，它会将 isLoading 状态设置回 false。我担心的是，由于我们知道某些数据比其他数据需要更长的时间来检索，因为我有一个 isLoading 对象，其他三个对象都依赖它，最好为每个数组创建单独的 reducer 文件吗？或者可能是三个不同的加载对象，每个数组都有自己的加载对象名称？

//Redux 动作文件

//Get breakfast list
export const getBreakfastList = () => (dispatch, getState) =>{
dispatch({type: LOADING_DATA});
  axios
      .get('/api/breakfastList/', setAuthorizationHeader(getState))
      .then(res =>{
        dispatch({
          type:GET_BREAKFAST_LIST,
          payload: res.data
        })
      })
      .catch(err =>
        dispatch(returnErrors())
      );
};
//Get lunch list
export const geLunchList = () => (dispatch, getState) =>{
dispatch({type: LOADING_DATA})
  axios
      .get('/api/getLunchList/', setAuthorizationHeader(getState))
      .then(res =>{
        console.log(res.data)
        dispatch({
          type:GET_LUNCH_LIST,
          payload: res.data
        })
      })
      .catch(err =>
        dispatch(returnErrors())
      );
};
//Get Dinner List
export const getDinnerList = () => (dispatch, getState) =>{
dispatch({type: LOADING_DATA});
  axios
      .get('/api/getDinnerList/', setAuthorizationHeader(getState))
      .then(res =>{
        console.log(res.data)
        dispatch({
          type:GET_DINNER_LIST,
          payload: res.data
        })
      })
      .catch(err =>
        dispatch(returnErrors())
      );
};

//Redux 减速器文件

const initialState = {
  breakfastList: [],
  lunchList: [],
  dinnerList: [],
  isLoading: false
};

export default function(state = initialState, action){
  switch(action.type){
    case LOADING_DATA:
      return{
        ...state,
        isLoading: true
      };
    case GET_BREAKFAST_LIST:
      return{
        ...state,
        breakfastList: action.payload,
        isLoading: false
      };
    case GET_LUNCH_LIST:
      return{
        ...state,
        lunchList: action.payload,
        isLoading: false
      };
   case GET_DINNER_LIST:
      return{
        ...state,
        dinnerList: action.payload,
        isLoading: false
      };
    default:
      return state;
  }

}

标签： javascriptreactjsreduxreact-redux