PoeHaH PoeHaH - 9 days ago 5
React JSX Question

React Redux: Where to do heavy the heavy lifting? Reducer or ActionCreator?

It's been asked before, but my scenario is different:

I am pulling images off a server, which I'm doing in an action creator:

export function getResults(settings,page){
return function(dispatch){
dispatch(startGettingResults());

return Axios.get('http://localhost:8080/getimages/',{params:{settings: settings,page:page}}).then(function(response){
return dispatch(resultsSuccess(response.data.results, page));
}).catch(function(){
return dispatch(resultsFailure());
});
}
}


This is quite simple & straightforward: I'm doing API calls in the action creator and storing everything in state via my reducer.

However, when the user clicks a certain element on my site, I want all the current images in the store to change color. I'm going to do the color change on the client app rather than the server.

My question is now, where do I best do this heavy lifting?


  • In the reducer, which can easily access the images in the current state?

  • In an actioncreator? The problem here is that I'd have to pass along all images from the store, which means I would have to load them as props on my component.



I'm a bit lost on the best approach to handle this. Where do you put your heavy lifting and data manipulation functions?

Answer

Why not create a new action, for example 'COLOUR_ALL_IMAGES' and dispatch that? The reducer will understand the state and 'know' about all te images, no need to pass them as part of the action?