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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With