title: Action dispatched multiple times in React lifecycle method
body: <p>I'm developing an application which has the functionality to verify an email when user registers for the application.  When you user registers, a code is generated and a link is sent to the user.  When the user clicks on the link, the frontend checks in with the backend to verify the code.  If the code checks out, then an "activated" flag is toggled in the user database and the user is redirected to the sign in screen.</p>
  
  <p>I'm using <code>GraphQL</code> for the database stuff and <code>Redux</code> for state management, I have an action which looks like so:</p>
  
  <pre><code>export function confirmActiveUser(token) {
      return function (dispatch) {
          dispatch(activateUserRequest())
          apolloClient.mutate(
              {
                  mutation: CONFIRM_EMAIL,
                  variables: { token: token }
              }
          ).then((res) =&gt; {
              let { error, ok } = res.data.confirmEmail;
              if (ok === true) {
                  dispatch(activateUserSuccess())
              } else {
                  dispatch(activateUserFailure())
              }
          })
      }
  }
  </code></pre>
  
  <p>and the activation page component looks like this:</p>
  
  <pre><code>// mapStateToPropsFunction
  // mapDispatchToPropsFunction
  class MyActivationComponent extends React.Component {
      componentDidMount() {
        this.props.confirmActiveUser(this.props.params.id) // the generated token
      }
  
      render() {
         &lt;div&gt;
             {this.props.ifIsActivated
                ? // redirect to sign in
                : // do something else
             }
         &lt;/div&gt;
      }
  }
  </code></pre>
  
  <p>The problem is that, the <code>confirmActiveUser</code> action is being dispatched twice (and thus making 2 database calls), which I think is due to the state changed <code>activateUserRequest</code> and <code>activateUserSuccess</code> causing re-renders.</p>
  
  <p>The verification is suppose to happen when the page (or rather, the component loads), instead of when a button is pressed.  So, I am essentially trying to avoid having to make multiple DB calls.</p>
  
  <p>What is causing these multiple calls, and what is the preferred way of fetching doing the above.</p>
  
  <p>Thank you very much, help appreciated.</p>