Reduxのdispatchでstoreに新しいstateを更新した後にコールバックを走らせる方法はありますか？

前提・実現したいこと

タイトルにある通り、dispatchしてstateが更新された後にコールバックを走らせたいです。
つまり、this.setState(state,() => {/*コールバック処理*/})このsetStateのコールバックのような使い方をdispatch()でする方法が知りたいです。

具体的には、this.props.dispatch()を行い、stateが更新されたら、
画面遷移する。という処理がしたいです。
※今回のdispatch()では、前の状態と値が変わらない場合もあります。

類似質問

Is store.dispatch in Redux synchronous or asynchronous
How to trigger off callback after updating state in Redux?

現状

類似質問の解答にある通り、
1.dispatch()は同期処理だよ
2.store.subscribe()を使えばできる
3.redux-thunkを使えばできる
4.redux-sagaを使えばできる
とあります。

が、

1.dispatch()は同期

javascript
1
2componentDidMount(){
3  this.props.dispatch({type:"USER_DATA",userData:userData})
4  console.log("dispatch userData:",this.props)
5}

としたときのStoreのuserDataの値はデフォルト値のままでした。
これはdispatch()が同期処理ではないということではないのでしょうか？

2.store.subscribe()

javascript
1store.subscribe(() => {
2  console.log(store.getState())
3  this.props.navigation.navigate("UserTopView")
4})

これだとstateが更新されるたびによばれてしまう。
今回はuserDataアクションがdispatch()されたときのみ、コールバックを走らせたいので、subscribe()で何のアクションがdispatch()されたのかわからければ無理なのではないか。

3,4.redux-thunk,redux-sagaを利用
調べてみたところ、今回行いたい実装をするにはどのようにすればいいのかわからなかった。

質問

以上のことより、
1.特定のdispatch()をする。（storeのstateの値が変わらないこともある。）
2.そのdispatch()の処理が完了した後（storeのstateが変更された後）に画面遷移をしたい（もしstoreのstateが変更しなくても画面遷移をする）

を実現する方法を教えていただきたいです。

足りない情報などコメントで教えていただければ、すぐ対応します。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

以下の２点を想定した回答になります。

{type:"USER_DATA",userData:userData}アクションをdispatch すると、redux state内のどこかにある userData が更新される。
redux state 内のuserData は、画面遷移元のコンポーネントの this.props.userData として渡されるように connect されている。

上記の場合、componentDidUpdate で userData が変わっていたら、画面遷移させればよいかと思います。

javascript
1componentDidMount(){
2  this.props.dispatch({type:"USER_DATA",userData:userData})
3}
4
5// 以下を追加（props に渡される userData が変わっていたら画面遷移）
6componentDidUpdate(prevProps){
7  if(prevProps.userData !== this.props.userData){ 
8    this.props.navigation.navigate("UserTopView");
9  }
10}

ただし、上記の方法では {type:"USER_DATA",userData:userData}アクションをdispatch すると、redux state内のどこかにある userData の内容が変更されていることが前提になりますので、

storeのstateが変更しなくても画面遷移

することは実現できないです。策としては store に保存しておく userData のプロパティに、たとえば updatedAt (更新日時）のようなプロパティを追加して、他のプロパティに変更がなくても、 USER_DATA アクションが呼ばれたら、少なくとも updatedAt だけは現在時刻で更新されたuserData に変わるようにして、リデューサーによるUSER_DATA アクションの処理が完了したら、コンポーネントに、変更された userDataがprops経由で渡されるようにします。このようにしておけば、 componentDidUpdate に記述した if条件の prevProps.userData !== this.props.userDataが、USER_DATAアクションの処理後は必ず true になり、navigation. navigate による画面遷移が実行されます。