Redux won't allow dispatch inside of componentDidMount
<p><strong>Update at the bottom of post</strong></p>

<p>I have a React container component, <code>AppContainer</code> that detects if the user is authenticated. If the user is authenticated, it displays the routes, app, header, etc. If the user is un-authenticated, it displays a Login component.</p>

<p>The <code>AppContainer</code> is a connected component (using react-redux). The <code>mapStateToProps</code> and <code>mapDispatchToProps</code> are as follows:</p>

<pre><code>const mapStateToProps = function(state) {
  return {
    isAuthenticated: state.Login.isAuthenticated,
  }
}

const mapDispatchToProps = function(dispatch, ownProps) {
  return {

    loginSuccess: (user) =&gt; {
      console.log("before dispatch")
      dispatch(loginSuccess(user))
    },

  }
}
</code></pre>

<p>The <code>loginSuccess</code> function that is being dispatched is an action creator that simply stores the user information in the redux store. The default state of <code>Login.isAuthenticated</code> is false.</p>

<p>In <code>componentDidMount()</code> I check if <code>this.props.isAuthenticated</code> (from the user information in the redux store) is true. If not, I check if the <code>tokenId</code> is in the localStorage. If the token is in localStorage, I dispatch the <code>loginSuccess</code> action to add that information to the redux store.</p>

<p>Then, since that info is in the Redux store, the component will update and show the protected material. This works fine.</p>

<p>My <code>componentDidMount</code> function is as follows:</p>

<pre><code>  componentDidMount() {
    if (this.props.isAuthenticated) {
      console.log("REDUX AUTH'D")
    } else {

      if (localStorage.getItem("isAuthenticated") &amp;&amp; !this.props.isAuthenticated) {

        console.log("BROWSER AUTHD, fire redux action")

        this.props.loginSuccess({
          profileObj: localStorage.getItem("profileObj"),
          tokenObj:   localStorage.getItem("tokenObj"),
          tokenId:    localStorage.getItem("tokenId"),
        })

      }

    }
  }
</code></pre>

<p>The only issue is that I am getting the following warning:</p>

<p><code>Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the t component.</code></p>

<p>Though the error given indicates a problem with setState(), I am not calling setState() anywhere in my entire program, so... But removing the <code>this.props.loginSuccess({ ...</code> in componentDidMount also removes the error.</p>

<p>The <code>log</code> statements in my code print before the error and the component does render the protected information as intended if the auth is present. Why does this error occur if the component seems to be working?</p>

<p><a href="https://i.stack.imgur.com/D1qZl.png" rel="nofollow"><img src="https://i.stack.imgur.com/D1qZl.png" alt="enter image description here"></a></p>

<p><strong>Update:</strong></p>

<p>Looking at the stack trace shows that it is coming from the google-login utility I am using.</p>

<p>This is the code for that component: <a href="https://github.com/anthonyjgrove/react-google-login/blob/master/src/google.js" rel="nofollow">https://github.com/anthonyjgrove/react-google-login/blob/master/src/google.js</a></p>

<p><a href="https://i.stack.imgur.com/Q60oW.png" rel="nofollow"><img src="https://i.stack.imgur.com/Q60oW.png" alt="enter image description here"></a></p>