redux store dispatch leading to setState error() in React

Question

I'm calling a thunk from a component render function. It works fine if at initial app load the component that calls the thunk loads. however, if I load the app at a different route and then transition to the route which renders the component that calls the thunk , I get the following error:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

The thunk changes redux store state which is not used by any component in the app and is just used within the thunk via getState() to do some conditional logic. If I remove the dispatch actionCreator code from the thunk the error goes away.

What am i missing?

Answer 1

You just need to keep in mind the basic rule, you should never change your state in the render function of your component. The same rule applies to your component state, as well as to the redux store state. The warning you see on your console is due to the action you are dispatching in your render. Refactor your code so that all dispatches and state changes take place in other lifecycle methods.