Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

166
Vistas
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

  1. Am I correct to process the response in the reducer, or should this be handled in the API class or the action creator?
  2. 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?
8 months ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

  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.
  2. No, handle all such errors in the action and dispatch it there. The reducer cannot and should not dispatch actions.
8 months ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos