Calling toast() inside a reducer dispatch

Get Help and Help Others
1

I’ve got a reducer function without almost a dozen actions, and just tried to use toast() from within one of the success paths. The toast itself showed up, but there was an error in the console

Warning: Cannot update a component (J) while rendering a different component (TrainingSessionProvider). To locate the bad setState() call inside TrainingSessionProvider, follow the stack trace as described in Bug: too hard to fix "Cannot update a component from inside the function body of a different component." · Issue #18178 · facebook/react · GitHub

And looking at the stack trace that the link describes shows that it is indeed coming from the line where I call the toast function.

If this is not the right place to call toast() from, where exactly should it come in? Does it need to be in a useEffect or similar hook?

2

Hi @Cluster444

That’s a purely React question, but yes, I’d recommend following your instinct and calling your toast outside of your reducer.
The reducers are meant to mutate data, you could have a hook such as useEffect dedicated to listening to the mutations that need to trigger the toast, keeping your concerns separated, which is always great for clearer code & easier maintainability.