Блог

Я новичок в react и пытаюсь реализовать redux / redux-thunk для асинхронного вызова api. У меня есть 5 разделов, и я хочу вызвать 5 разных API. Моя проблема в том, что в состоянии props я могу получить только одни, последние выполненные данные api, нужно ли мне создавать несколько редукторов или мне нужно объединить данные в один объект?

 const mapStateToProps = (state) => ({
    isLoading: state.serviceReducer.isLoading,
    error: state.serviceReducer.error,
    data: state.serviceReducer.data,
    UserMaster: state.UserMasterReducer
  });
function mapDispatchToProps(dispatch) {
    return {
        updateUserMaster: (data) => dispatch({ type: 'UPDATE_USER_MASTER', payload: data }),
        ApiService1:  (url,payload,id) => dispatch(ApiService(url,payload,id)),
        ApiService2:  (url,payload,id) => dispatch(ApiService(url,payload,id)),
    }
}
  

Редуктор.

 import * as Actions from '../action/ActionTypes'

const ServiceReducer = (state = { isLoading: false, error: undefined, data: {}, ActionId: undefined }, action) => {
    switch (action.type) {
        case Actions.SERVICE_PENDING:
            return Object.assign({}, state, {
                isLoading: true,
                ActionId:action.id
            });
        case Actions.SERVICE_ERROR:
            return Object.assign({}, state, {
                isLoading: false,
                error: action.error,
                ActionId:action.id
            });
        case Actions.SERVICE_SUCCESS:
            return Object.assign({}, state, {
                isLoading: false,
                data: action.data,
                ActionId:action.id
            }); 
        default:
            return state;
    }
}

export default ServiceReducer;
  

Экшен

 export const serviceActionPending = (id) => ({
    type: ActionTypes.SERVICE_PENDING,
    id:id
})

export const serviceActionError = (error,id) => ({
    type: ActionTypes.SERVICE_ERROR,
    error: error,
    id:id
})

export const serviceActionSuccess = (data,id) => ({
    type: ActionTypes.SERVICE_SUCCESS,
    data: data,
    id:id
})