ある程度実装できたので、ここらへんでコードの整理をしようと思う。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
