Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should I use one or several action types to represent this async action?

Tags:

reactjs

redux

I'm building a front-end for a search system where almost all user actions need to trigger the same async action to re-fetch search results. For example, if a user enters a keyword, then we need to fetch /api/search?q=foo, and if they later select a category we fetch /api/search?q=foo&categoryId=bar. I originally had separate action types for FETCH_RESULTS, SELECT_CATEGORY, DESELECT_CATEGORY, etc. I created one asynchronous action creator for FETCH_RESULTS, but the others are synchronous. The more I think about it, they all end up needing to re-fetching the results from the backend and update the app state based on the response from the backend.

Would it make sense for me to use the single async action-creator for any change? Or would it be better to use async action creators for each distinct user action (selecting a keyword, category, or filter)?

I think the advantage of granular actions would be the events more accurately reflect what the user did (e.g. the user selected a category) vs having to peer into the payload to figure out what actually changed, but they are all pretty similar.

like image 758
Kevan Ahlquist Avatar asked Nov 10 '15 19:11

Kevan Ahlquist


People also ask

What are async actions?

Media Server responds to an asynchronous action immediately. This means that you do not have to wait for a response if the action takes a long time. The response to an asynchronous action includes only a token. You can use this token to determine the status of the task through the QueueInfo action at a later time.

What is async actions in Redux?

Redux Async Data Flow​ Then, we call dispatch() , and pass in something, whether it be a plain action object, a function, or some other value that a middleware can look for. Once that dispatched value reaches a middleware, it can make an async call, and then dispatch a real action object when the async call completes.

What is the type of action in Redux?

The action types can be organized into two groups: Direct manipulation of the store. UPDATE_RESOURCES and DELETE_RESOURCES allow you to synchronously modify the store, independent of requests. The rest of the action types are for requests.

How will be you able to handle more action using Redux?

This way we handle multiple actions in redux. Output: Here, when we type in the input box and click on “Add todo” button ADD_TODO action is called and when we click on the “Delete” button DELETE_TODO is called. This way is able to handle two or more actions in redux.


2 Answers

This is of course something only you can really answer based on what you know about the project. I don't think that there is any inherent advantage to having the actions be more granular, and if there aren't any, its not worth the extra effort. I would have a generic FILTER_CHANGED event and not worry about being able to see what specifically changed--presumably the action isn't going to be complicated, so I'm not going to be debugging the action a lot. As the filter state becomes more complicated and diverse, it might make more sense to break out the actions. By default though, I don't really see much value.

like image 99
Nathan Hagen Avatar answered Sep 25 '22 12:09

Nathan Hagen


I fully agree with Nathan’s answer.

I just want to add that in order to tell whether actions A and B are really one or two actions, you need to ask yourself: “If I change how some reducers react to A, will I also need to change how they react to B?”

When the handlers change together in the reducer code, it’s likely they should be a single action. When their changes may not affect each other, or if many reducers handle just one of them but not the other, they should probably stay separate.

like image 28
Dan Abramov Avatar answered Sep 25 '22 12:09

Dan Abramov