ちゃんとユーザーのアクションは取れているのにStoreが更新されない、Storeからデータが取れないなんてことになったことはないですか?
自分はあります、2日間くらい悩んでReact・Reduxの勉強やめたくなりましたが、なんとか解決することができ、React・Reduxの世界へ戻ってくることができたのでその時のお話をしたいと思います。
mapStateToPropsでちゃんと設定しているのに...
mapStateToPropsを利用してコンポーネントにStoreのデータを反映させようとしていた時のことです。
stateがundefinedになってんじゃん!
ずっとこれでした、2日間。。。
なんでかという原因と解決策はこちらです。
- 原因:
- AppState(store本体のinterface)のプロパティ名と、mapStateToPropsで渡すときのプロパティ名が異なっていたため。
- 解決法:
- AppStateのプロパティ名とmapStateToPropsで渡すときのプロパティ名を確認し、合わせるようにする。
これだけです。
要は、受け取る側(mapStateToProps)と保存(Store)している側で、異なる名前をつけていたのでundefinedになっていました。
しかも自分がやっていたのはプロパティ名が単数形か複数形かの違いでこれにハマってました。
そのほかにもReactはファイルやコンポーネント、プロパティの命名でエラーになることがあるので、コード本体の間違いはもちろん、正しい名前をつけることができているかを確認することを意識して開発したいと思わされた出来事でした。