React/Redux: Where to process data from API response and dispatching action from reducers

问题

I'm new to React and Redux so this is somewhat of a best practices question.

I have an action creator that fires an API call and dispatches the response to my reducer:

export function loadDrawSuccess(draw) {
  return { type: ActionTypes.LOAD_DRAW_SUCCESS, draw};
}

export function loadDraw() {
  return function(dispatch) {
    dispatch(beginAjaxCall());
    return drawApi.getDraw().then(draw => {
      dispatch(loadDrawSuccess(draw));
    }).catch(() => {
      dispatch(ajaxCallError());
    });
  };
}

Now.... In my reducer, I am processing the response to extract the data that I need from it.....

function extractNextOpenDraw(draws) {
  if (!draws || typeof draws.content === 'undefined'){
    return {};
  }
  let openDraws = draws.content.filter(draw => {return draw.status === 'open';});
  let sortedOpenDraws = openDraws.sort((draw1, draw2) => {
    return DateHelper.getDateObjectFromUtcDateString(draw1.closeTimeUtc) - DateHelper.getDateObjectFromUtcDateString(draw2.closeTimeUtc);
  });
  return sortedOpenDraws[0];
}


export default function drawReducer(state = initialState.draw, action) {

  switch (action.type) {
    case types.LOAD_DRAW_SUCCESS: {
      return objectAssign({}, extractNextOpenDraw(action.draw), {dateModified: action.dateModified});
    }
    ........

    default:
      return state;
  }
}

My questions are

Am I correct to process the response in the reducer, or should this be handled in the API class or the action creator?
In an instance where the API returns without error, but the response format does not conform to the expected format I would want to dispatch the ajaxCallError() action. Is it correct to do this within the reducer?

回答1:

No, the reducer should be as clean as possible and only update the store with the values served to it. You should either parse the response in the action itself, or create a wrapper for the api. I believe that doing so in the action itself is good enough.
No, handle all such errors in the action and dispatch it there. The reducer cannot and should not dispatch actions.

来源：https://stackoverflow.com/questions/41545536/react-redux-where-to-process-data-from-api-response-and-dispatching-action-from

标签

reactjs

redux