• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• React/ディレクトリ構成案 へ行く。
  • 1 (2017-12-08 (金) 16:40:03)
  • 2 (2017-12-08 (金) 16:41:07)
  • 3 (2017-12-12 (火) 16:52:07)

まだ実業務で書いたことがないのでなんとも。そうそうStateを小さくできるものなのかどうか。。

1. コンポーネントのまとまりで分ける†

たとえば計算機を作ってみるとしたら、「ディスプレイ」や「ボタン」がコンポーネントになる。コンポーネントを取りまとめる大本のコンポーネントをつくる。この例ならまさに「計算機」ということになる。

どうやら、コンポーネントのまとまりのことをコンテナと呼ぶらしい。

src/
  calculator/
    Calculator.js
    NumberButton.js
    ResultLabel.js

2. アプリケーション構成で分ける†

ActionやReducerはコンポーネントと1対1対応するわけではないので、それぞれ分けた方が見やすくなる。ここでActionやReducerはコンテナに閉じたもの。そのようにできるのがコンテナになる、と言った方がいいかも。

src/
  calculator/
    actions/
      ActionTypes.js
      index.js
    components/
      Calculator.js
      NumberButton.js
      ResultLabel.js
    reducers/
      Calculator.js

3. アプリケーションとして必要なコード†

複数のReducerを合併するためのコードが必要なので、これを分ける。src直下でもよいかもしれないが、create-react-appで作成した構成から追加する分が明確になるようにしたい。

src/
  app/
    reducers/
      index.js
  calculator/

つまりこう†

src直下にファイルは追加しないが、App.jsに変更（Storeの作成）を加える。

src/
  app/
    reducers/
  <container>/
    actions/
    components/
    reducers/
  App.js
  index.js