[Redux]dispatchメソッドの実行完了後に、別のdispatchメソッドを実行するには

Question

聞きたいこと

ReactNative、redux、react-navigationを用いてアプリ開発をしているのですが、あるアクションの実行最中に、別のアクションを実行し、画面遷移するケースがあると思います。

例えば、アクションA内で、アクションB実行→アクションC(画面遷移)実行…といった感じでです。

dispatchメソッドを使用して、上記のような実装をしたのですが、

Possible: Unhandled Promise Rejection (id: 2) TypeError: Cannot read property 'type' of undefined

といったワーニングが出てしまっています。
おそらくアクションB実行中に、アクションCにて画面遷移してしまったがために発生しているエラーだと思うのですが、
アクションBの実行完了をまってディスパッチする方法などないのでしょうか？

ソースコード

※ 一部抜粋

export function actionA(email, password) {
  return async function (dispatch) {

    :
    サインイン処理
    :

    dispatch(actionB);
    // 下のdispatchは、上の例でいうアクションC(画面遷移アクション)へのディスパッチです
    dispatch(NavigationService.navigate('NextScreen'));
  }
}

Comments

[m.ts10806]

回答依頼いただきましたが、私の各タグのスコアを確認されるとわかりますように、今回の質問につけられたタグに関する知見はほとんど持っておりません。
今後回答依頼される際はタグのスコアを確認されたほうが無駄なくアドバイスを得られるようになると思いますのでお願いします。

Answer 1

dispatchは非同期で実行されますので、複数実行した場合には順序が正しくならないこともあります。

いちばん素直な解決策としては、「複数のアクションを順次実行するアクションを用意しておいて、それを呼ぶ」ということになるかと思います。

Comments

[sabx]

回答いただきありがとうございます！
> 「複数のアクションを順次実行するアクションを用意しておいて、それを呼ぶ」...
こちらですが、複数のアクションをまとめたアクション内で、dispatchメソッドを使用して他アクションを呼び出す形になると思うのですが、そのdispatchメソッドも非同期処理になると思うので、定義した順番に実行できなさそうではあるのですが、なにか方法ってあるのでしょうか・・？
なにか勘違いしていたらすいません・・

[maisumakun]

> 複数のアクションをまとめたアクション内で、dispatchメソッドを使用して他アクションを呼び出す形になると思うのですが

dispatchを使わずに同等のことを実行する、というイメージでした。

[sabx]

返信ありがとうございます・・！
> dispatchを使わずに同等のことを実行する、というイメージでした。
reduxとしては確か、アクションを呼び出す際にdispatchメソッドを実行することを推奨(stateを変更する処理はアクションを通して実施→アクションはdispatchメソッドを通して実行)していたと思うのですが、その他同等の方法ってありますのですかね・・？