「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
手順１ †
色々悩んだが（と言うか、コレの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の状態遷移はコンソール上に表示される。
手順２ †
先程失敗したコチラのRedux化に再チャレンジ。
インストール †
>npm install --save redux react-redux redux-logger
実装 †
以下の辺りに注意しながら実装する。
- redux-loggerを使用
- createStoreの定義
- Actionの分割
- Reducerの書き方
- Containerの使用
- Componentからの参照方法
Entry Point †
createStoreする。
Action Creators †
Reducers †
参考 †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
