SHIOPON LABO

知見や備忘録、レビューなど。しおぽん(shiopon01)のブログ

React/Reduxビギナーのための、練習用スターターキットを公開している

公開しています

React/Reduxビギナーのための、練習用スターターキットを公開しているという記事。
最小限の機能で、機能追加が煩わしくない1ページのReduxアプリを作成するためのスターターキットを目指した。

github.com

中身としては、react-create-appコマンドで作成したReactアプリに、Reduxのみを組み込んだ形。package.jsonを見ると、追加したパッケージは基本的なRedux関連のパッケージのみだということが分かる。多くの部分はreact-scriptsに依存している。
(学習コストを下げるためredux-routerなどは組み込まなかった。ルーティングをしっかり作りたい場合や他のパッケージを利用したい場合は自分で追加してもらいたい)

"dependencies": {
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "react-redux": "^5.0.6",
  "react-scripts": "1.1.1",
  "redux": "^3.7.2"
},

サンプルで最初から置いてるTodoアプリは、Redux公式のexampleをこのプロジェクトのディレクトリ構造 (modular) に合わせて移植した。react-create-appで生成された画面の下にそのままTodoアプリを突っ込んでいる形のため、ここは今後、見栄えを良くしていきたい…。

Example: Todo List - Redux

f:id:shiopon01:20180320161504p:plain

ディレクトリ構造

ActionやReducerは専用のディレクトリやファイルに分けるのではなく、依存し合うそれぞれを1つのモジュール単位として、1つのファイルで管理する手法を採用している (Ducks proposalと呼ばれてる?) 。これを採用するため、ducks-modular-reduxを参考にした。

.
├── public                           # 静的ファイル
├── src                              # アプリのソースコード
│   ├── index.js                     # id="root"へのRender、StoreのProvide
│   ├── components                   # コンポーネント
│   ├── containers                   # コンテナ
│   ├── modules                      # モジュール (Action, Reducer, Action Creatorを含む)
│   │   ├── reducers.js              # それぞれのモジュールのReducerをまとめたもの
│   │   ├── todos.js                 # Todoモジュール
│   │   ├── todos.spec.js            # TodoモジュールのTest
│   │   └── visibilityFilter.js      # VisibilityFilterモジュール
│   └── unit                         # 小さな機能
│       ├── injectStyle.js           # CSS`@keyframes` を扱うための関数
│       └── registerServiceWorker.js # https://goo.gl/KwvDNy
└── LICENSE                          # MIT

ducks-modular-reduxでは、依存するそれぞれのAction, Reducer, Action Creatorを1つのモジュールとして1つのファイルにまとめる手法を提案している。
よくある、ActionやReducerをそれぞれ専用のディレクトリやファイルとして/reducer/index.js/action.jsで管理されるパターンは、機能 (Action, Reducer) の追加が非常に煩わしい。たしかにうまく管理はできるのだが、実際にプログラミングしてアプリを作る場合、この面倒くささは未経験の想像する面倒くささを凌駕する。

このプロジェクトで採用しているプロジェクト構造は、全ての機能はモジュール単位で分けているため幾分マシだ。機能を追加したい場合、必要な分モジュールを追加するだけで良い。機能が大きくなると1ファイルが大きくなってしまうデメリットはあるが、可読性が失われることはほとんどないし、ファイル移動が必要ないというメリットがある。

// Actions
const LOAD   = 'my-app/widgets/LOAD';

// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    default: return state;
  }
}

// Action Creators
export function loadWidgets() {
  return { type: LOAD };
}

github.com

コンポーネント構造

新しい機能を実装したいならば、とりあえずサンプルで用意しているTodoを参考にすれば良い。(もとはReduxのexampleだが…)
現在のコンポーネントとコンテナコンポーネントの関係を図にしてみる。[ ]で囲まれているものがコンテナコンポーネントで、囲まれていないものがコンポーネントだ。

index.js
└── App.js
    ├── [AddTodo.js]
    ├── [VisibleTodoList.js]
    │   └── TodoList.js
    │       └── Todo.js
    └── Footer.js
        └── [FilterLink.js]
            └── Link.js

コンテナコンポーネントではreact-reduxconnect関数を使ってstateの値をpropsとして受け取ることが出来る。コンテナコンポーネントを使うことで、好きなコンポーネントでstateの値を受け取ることが出来るもの、と思えば良い。

このプロジェクトの詳しい使い方は後日。

補足

  • CSSはファイルをインポートするのではなく、コンポーネント内で<div style={style.app}>などして指定している。(App.js参照)