React+Redux覚書
概要
React+Reduxを使ってアプリを書く機会があったが、 どちらもちゃんと触ったのは年単位昔なので思い出すために軽くコードを書いてみた。
ーーやつの備忘録。
こういうことを思ってこうしたいなって気持ちになったという記録。
基本構成
environment
- Docker node:10.4.0-alpine
dependencies
- react 16.4.1
- react-redux 5.0.7
- redux 4.0.0
devDependencies
- babel-loader 7.1.4
- babel-preset-react 6.24.1
- webpack 4.12.9
基礎知識
- React
- Redux
- connect
- state
- reducer
- Component
- Provider
- Container
- Presentational
所感
もともとSyntagme作るときに、Reduxのコードは読んでいたので一度読み直せば「あーはいはい」って感じだった。
ただ、当時思ったActionCreatorの扱いでやっぱり戸惑う。
ActionCreatorは、 * dispatchするオブジェクトを作る * 複雑なdispatchを隠蔽する
の役割があると感じていて、 その2つを共存させることに抵抗がある。
できれば役割わけたいなぁと。
もしかしたらMiddlewareがいい感じに隠蔽してくれるのかも知れないが、 初心者にはその歴史的経緯をさっくり理解するにはReduxの世界は広すぎる。
再設計
というわけで腹落ちする程度まで掘り下げた。
ディレクトリ構成
- src
+- index.js
+- views/
| +- components/
| +- containers/
| | +- Home.jsx
| +- App.jsx
+- usecase
| +- home.js
+- actions/
| +- index.js
+- store/
+- index.js
+- reducers/
index.js
App.jsxのマウント- アプリケーション全体の初期化処理
Views
React Componentを押し込める場所。 汎用的なものだけではなく、画面構成全部を含むので、Viewって名前空間にした。
App.jsx
- Providerの構築
- Redux Storeとの接続
Containers
- Container Componentの置き場
- Presentationalを一つ以上組み合わせる
- ViewとUseCase, Stateを接続する
Components
- Presentational Component
- コンテキスト持っちゃ駄目よ
- 小規模ならこれでいいけど、Componentの数が増えてきたらAtomic-Designとかをベースに分割したほうがいいかもしれない
- が、必要ないならしないほうが無難
UseCase
- 独自定義
- 着想はAlminから
- view ← 何らかのイベント → action の中間処理を担う
- fluxで言うところのActionCreator
- view側からの入力のハンドル
- アプリの外側とのコミュニケーション
- dispatchのタイミングのハンドル
- 基本的にはContainerと対応する
Actions
- Actionオブジェクトの作成
- 程よい切り方がわからないけど機能単位で切るのがいいのかなぁ
Store
Redux Storeの定義。
index
- createStoreの実行
- reducer, initialState, middlewareの構築
initial-state
- 初期Stateの定義
reducers
- reducerの定義
- 基本的にはアプリケーションにおける情報設計単位でファイルを切る
まとめ
- React+Reduxで最低限腹落ちする構成を考えた
