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?