「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
create-react-appを使用した、React + Reduxの step by step。
手順1 †
色々悩んだが(と言うか、コレのRedux化に失敗したため)、
先ずは、以下の「Example: Todo List」のClass化版をやることに。
ココでは、Web備忘録の方をやってみた。
構成 †
─ src/
├─ App.js
├─ index.js
├┬ actions/
│└─ Todo.js
├┬ components/
│└─ Todo.js
├┬ containers/
│└─ Todo.js
├┬ reducers/
│└─ Todo.js
└── createStore.js
サンプルの生成 †
>create-react-app react-redux-todo
インストール †
>npm install --save redux react-redux redux-logger
実装 †
以下を見ても明らかだが、
Entry Point, Component, Action, Reducer
と、複数のモジュールを行き来してシンドい。
Store作成 †
- ポイント
- combineReducersをココで書いている。
- applyMiddlewareで、
Reduxの状態遷移をコンソール上に表示する
redux-logger ミドルウェアを追加する。
Reducer作成(仮) †
- reducers/Todo.jsを作成する。
前述のStoreでimportしているReducerを仮で作成。
- index.jsに組込む。
- createStoreして、storeを生成する。
- AppタグをProviderタグでラップしつつstore属性にstoreを設定。
- ここで一度 npm start コマンドを実行し動作することを確認。
Component作成 †
- components/Todo.jsを作成する。
- そして、App.jsを修正してTodoを呼び出す。
Action作成 †
Reducer修正 †
- Reducer(仮)のreducers/Todo.jsにActionに対応した処理を実装する。
- Actionから渡された値を、処理して、Componentに渡す。の処理の部分。
- ポイント
- 初期値はinitialStateで定義して使用する。
- state は書き換えるのではなく新たなオブジェクトとするので、
Object.assignでディープコピーし、それに値を設定し、戻り値とする。
Container作成 †
- containers/Todo.jsを作成する。
- そして、App.jsを修正してTodoを
ComponentからContainerに切り替える。
Component修正 †
- components/Todo.jsでstateを参照するように変更する。
実行 †
- デバッグ実行すると、redux-logger ミドルウェアで、
Reduxの状態遷移はコンソール上に表示される。
サンプル †
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/react-redux-todo
手順2 †
「Example: Todo List」が動作したので、先程失敗したコチラのRedux化に再チャレンジ。
インストール †
>npm install --save redux react-redux redux-logger
Component毎 †
実装 †
以下の辺りに注意しながら実装する。
- redux-loggerを使用
- createStoreの定義
- Actionの分割
- Reducerの書き方
- Containerの使用
- Componentからの参照方法
実行 †
- redux-loggerで、Reducersが動いていることは確認できるが、
Component側が更新されない(State -> Componentの再実行がかかってない)。
考えて設計して欲しい感がある。
参考 †
Componentを跨ぐ †
Componentを跨ぐという初歩的なことも良く解らないので、
ネットを調べて以下のページを発見したのでやってみる。
実装 †
Menu1、Menu2のContainerを集約するContainer, Action, Reducerを、Menu12に集約。
- Containerネストは不可能なので、Containerを集約する。
- 従ってContainer以外にも、 Action, Reducerの集約を行う。
- 子コンポーネントへは、propsを使用してstateとfunctionを渡す。
実行 †
無事、動作。
サンプル †
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/redux_app
手順3 †
- コチラのRedux化
- コチラの新しい要素も追加する。
- ページング処理
- Hot Reloading
- redux-thunkによる非同期処理
実装 †
実行 †
サンプル †
参考 †