リアクションライフサイクルメソッドで複数回アクションがディスパッチされる

Question

ユーザーがアプリケーションに登録するときに電子メールを確認する機能を持つアプリケーションを開発しています。ユーザー登録すると、コードが生成され、リンクがユーザーに送信されます。ユーザーがリンクをクリックすると、フロントエンドはバックエンドとチェックインしてコードを確認します。コードがチェックアウトすると、ユーザーデータベースで「有効化」フラグが切り替わり、ユーザーはサインイン画面にリダイレクトされます。

私はデータベースのものと状態管理のためのReduxためGraphQLを使用しています、私はそうのように見えるのアクションがあります。

export function confirmActiveUser(token) { 
    return function (dispatch) { 
     dispatch(activateUserRequest()) 
     apolloClient.mutate(
      { 
       mutation: CONFIRM_EMAIL, 
       variables: { token: token } 
      } 
     ).then((res) => { 
      let { error, ok } = res.data.confirmEmail; 
      if (ok === true) { 
       dispatch(activateUserSuccess()) 
      } else { 
       dispatch(activateUserFailure()) 
      } 
     }) 
    } 
} 

と活性化ページコンポーネントは次のようになります。

// mapStateToPropsFunction 
// mapDispatchToPropsFunction 
class MyActivationComponent extends React.Component { 
    componentDidMount() { 
     this.props.confirmActiveUser(this.props.params.id) // the generated token 
    } 

    render() { 
     <div> 
      {this.props.ifIsActivated 
       ? // redirect to sign in 
       : // do something else 
      } 
     </div> 
    } 
} 

を

問題は、confirmActiveUserアクションが2回ディスパッチされているため（つまり2回のデータベース呼び出しを行っています）、状態がactivateUserRequestに変更され、activateUserSuccessがr電子レンダリング。

ボタンが押されたときではなく、ページ（またはコンポーネントが読み込まれる）が確認されたとします。だから、私は本質的に複数のDB呼び出しを行う必要がないようにしようとしています。

何が原因で何が起こっているのか、上記を行うための好ましい方法は何ですか。

大変ありがとうございました。あなたは、私はあなたが（2回レンダリングされたか、マウント、アンマウント、再マウント）を2回部品を実装していると思いますが、アクションの作成者が本当にcomponentDidMountから2回呼び出されたことが確実な場合

Answer 1

...