0

i really need help.

I'm confused about how should i manage my async API Calls and error handling using redux thunk middleware.

Option 1

Send essential info to redux thunk middleware (newJobInfo) and ALSO other functions to manage my component state (for example, disable submitting button while making api call)

Error handling: Inside redux thunk middleware using try { } catch { }

enter image description here

Option 2

Keep this functions inside my component and only send essential data to redux thunk middleware

Error handling: Remove try { } catch { } of redux thunk middleware (or keep it and throw new Error inside catch statement) and manage errors with .then() and .catch() inside my component.

enter image description here

John Doe
  • 13
  • 2
  • How is your state structured? Does the api call really have any effect on the global state? The "loading" information is normally kept in the store, something like `state.job.isLoading`. You would access this flag via `useSelector()` in your component, or via the classic `connect()` API. The try/catch in your option 1 snippet is mostly correct. But you probably shouldn't pass `setIsLoading` and `navigate` to it. You don't need to go through the component API from react-router to change the route: https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4 – timotgl Jan 18 '22 at 12:39

1 Answers1

0

In this case, I would think how do I use this action in my project. For example, if I use need to call 'startUpdatingJob' not only with navigate effect, I will use option 2, otherwise, if I only use it once, it is acceptable to use option 1. But in general I would rather use option 2, in this case we keep action logic more consistent, as it has only 1 task to complete.

Alex Khanas
  • 335
  • 1
  • 6
  • 15