Reduxで小さなプログラムを書く練習を何回かしてて忘れがちなことをメモしておこうと思う。

dispatch呼び忘れ

Reduxでは、store.dispatch(アクションクリエイターの関数(引数))という形で処理を書かないといけない。こうすることで、Reducerの関数へ処理が渡っていく。

でも、こう書いて満足してしまうことが稀によくある。

アクションクリエイターの関数(引数);

そう、dispatchしてない。

これで、処理呼んでるのに動かねぇなぁ…って悩む。

Reducerに処理追加忘れ

Reduxってアクションクリエイター作ってReducer作ってetc...と割と作るものがたくさんある。1つのstateの値を書き換えるっていうだけなのに。そんな時忘れがちなのがReducer。

アクションも作ってアクションクリエイターも作って、データを入れるストアも作った！よし実行！

動かない…。

肝心の処理を書くReducer書いてなかったorz

Componentのイベントとメソッドの紐づけ

これはReduxじゃなくてReact。

private handleSubmit(e: React.SyntheticEvent) {
  e.preventDefault();
  // 処理
}

... 省略 ...

render() {
  return (
    <form>
      ... 省略 ...
    </form>
  );
}

こんなコードを書いて実行してしまうことが稀によくある。

そう、formのonSubmit設定してない。メソッドだけ定義して満足してしまった！！

まとめ

ここら辺の何かし忘れってIDEの支援がないとなかなか防止できない気がする。Componentのイベントを書いたら自動でハンドラ生成してくれるとか、関連のある所の処理を簡単に行き来できるようになるとか。

そういうことを思う今日この頃でした。