React 入門 (11) ～ TODOアプリを作る(6) ～リファクタリング

ある程度実装できたので、ここらへんでコードの整理をしようと思う。NumberList とかいう名前もおかしいし、Redux を導入したので、コンポーネント間でstateを受け渡しできるようになったこで、コンポーネントの分離もしていきたい。ただ、その前にある程度テストを書く必要があるかなと思ったので、action と reducer の部分のテストを少しだけ書いた。参考にしたのは Redux の Todo サンプルにあるテスト

ある程度テストを書いて、すべてパスするようにしてからプロジェクト構造を変更する。主にやったことは以下の5つ

NumberList 内にあったサーバーアクセス用の関数を別ファイルに移動
NumberList の名前を TodoList に変更
AddTodo クラスを作成し、追加ボタンとテキストボックスをそちらに移動
スタイルオブジェクトを別ファイルに移動
VisibleTodoList を作成し、TodoList をラップ。TodoList から redux 関連の依存を取り除く
sendToApiServer 関数を prop 経由で渡すようにする。

sendToApiServer 関数を prop 経由で渡すことでテストがしやすくなったはずなんだが、まだ検証できていない。次回はsendToApiServer をどのようにテストしていこうか。というところにフォーカスを当てていきたい。

成果物は以下から参照できる。

GitHub - bamchoh/react-study at 0165569b06a2cbca843722dea7bb97a82ef27ad7