CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-thunk
Emil Bækdahl
Emil Bækdahl

Reputation: 129

React Redux: Confused about where to define certain actions

In a React Redux project: The component Item acts as containment for the components Product and Category. An Item should always listen for a click event but handle the event differently depending on what it is containing: If it contains a Product it should dispatch ADD_TO_CART, and OPEN if it contains a Category.

I already have action creators for products and categories which currently handles async API requests with redux-thunk and axios. Should the OPEN and ADD_TO_CART be a part of these action creators or does this functionality belong in the board's action creator? And which reducer should handle these actions?

Upvotes: 2

Views: 162

Answers (1)

Oscar Franco
Oscar Franco

Reputation: 6250

This question goes beyond the current scope you are providing, in the sense that you do not mention the architecture of your reducers, but in any case, let's go by parts:

Should the OPEN and ADD_TO_CART be a part of these action creators or does this functionality belong in the board's action creator?

While I do not completely understand what do you mean by board's action creator, I believe it is far more simple to reason about actions if they are coupled with a single creator, ex:

function addToCart(item) {
  return dispatch => dispatch({type: ADD_TO_CART, item})
}

than having the same action dispatched by different creators, then your code becomes harder to debug, since you might not be completely sure which creator dispatched which action, so my suggestion is: 1 creator -> 1 action.

And at the same time, when connecting the action creator with your component, keep the action as clearly as possible that way you won't have to debug your code on runtime to see what is actually happening, ex:

if(this.props.isItem) {
  this.props.addToCart(this.props.item);
} else {
  this.props.open(this.props.category);
}

Code is self-explanatory and prevents weird behaviors on runtime.

And which reducer should handle these actions?

This is a much tougher question, not just because I do not know the current structure of your reducers, but in general choosing the right architecture is always difficult, but as a general guideline I would say:

Always split your reducers to sub-domains of your problem

As I see you have an action called OPEN which leads me to think you are actually using your reducers as a view model, but this also depends on implementation details.

View Model reducers are in my opinion very useful, but one should be careful, if you have the action OPEN it means you are not only storing the items information but also the state of your application view in this reducer, as such I would rename it to ITEM_OPEN, that way you can also have OPEN actions for other sub-domains, and again, if you are creating an OPEN action you should store which item is open and your reducer actually produce a new state in your application.

If you don't want this (store app state in the reducers as View Model) I would remove OPEN action an simply handle it via react-router or a similar action.

So, judging by the limited information of you provided I would say you should have 2 reducers, one for items and one for the cart, the ADD_TO_CART action obviously should be handled by the cart reducer, and the OPEN should be handled by the item reducer.

Upvotes: 1

Related Questions