「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -戻る --[[React]] -> [[Redux]] --[[Reactのファースト・ステップ]] *目次 [#a4c3ea2d] #contents *概要 [#c8d6c3ab] create-react-appを使用した、[[React]] + [[Redux]]の step by step。 *手順1 [#fa5b6488] 色々悩んだが(と言うか、[[コレ>Reactのファースト・ステップ#n908d0bb]]の[[Redux]]化に失敗したため)、~ 先ずは、以下の「Example: Todo List」のClass化版をやることに。 -React+Redux で Todoアプリを作ってみる │ Web備忘録~ https://webbibouroku.com/Blog/Article/react-redux-todo -React Redux勝手にチュートリアル(TODO List) - TOEIC940点の文系プログラマー~ http://uraway.hatenablog.com/entry/2016/02/12/182048 ココでは、Web備忘録の方をやってみた。 **構成 [#s527e278] ─ src/ ├─ App.js ├─ index.js ├┬ actions/ │└─ Todo.js ├┬ components/ │└─ Todo.js ├┬ containers/ │└─ Todo.js ├┬ reducers/ │└─ Todo.js └── createStore.js **サンプルの生成 [#j3dbf15d] >create-react-app react-redux-todo **インストール [#maeb5c00] >npm install --save redux react-redux redux-logger **実装 [#idc1c700] 以下を見ても明らかだが、 >Entry Point, Component, Action, Reducer と、複数のモジュールを行き来してシンドい。 ***Store作成 [#ca8d8207] -createStore.jsを作成する。 -ポイント --combineReducersをココで書いている。 --applyMiddlewareで、~ Reduxの状態遷移をコンソール上に表示する~ redux-logger ミドルウェアを追加する。 ***Reducer作成(仮) [#h687216a] -reducers/Todo.jsを作成する。~ [[前述のStore>#ca8d8207]]でimportしているReducerを仮で作成。 ***[[Redux]]の組込 [#b10d5297] -index.jsに組込む。 --createStoreして、storeを生成する。 --AppタグをProviderタグでラップしつつstore属性にstoreを設定。 -ここで一度 npm start コマンドを実行し動作することを確認。 ***Component作成 [#ba4ac550] -components/Todo.jsを作成する。 -そして、App.jsを修正してTodoを呼び出す。 ***Action作成 [#v89cb346] -actions/Todo.jsを作成する。 ***Reducer修正 [#fd58d1c4] -Reducer(仮)のreducers/Todo.jsにActionに対応した処理を実装する。 -Actionから渡された値を、処理して、Componentに渡す。の処理の部分。 -ポイント --初期値はinitialStateで定義して使用する。 --state は書き換えるのではなく新たなオブジェクトとするので、~ Object.assignでディープコピーし、それに値を設定し、戻り値とする。 ***Container作成 [#r8f048de] -containers/Todo.jsを作成する。 -そして、App.jsを修正してTodoを~ ComponentからContainerに切り替える。 -ポイント:ここでconnectする。 ***Component修正 [#mcd78a14] -components/Todo.jsでstateを参照するように変更する。 **実行 [#sfd06e8d] -Todoアプリを実行して動作確認する。 -[[デバッグ実行>Reactのファースト・ステップ#v9b02d5b]]すると、redux-logger ミドルウェアで、~ [[Redux]]の状態遷移はコンソール上に表示される。 **サンプル [#z14db030] https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/react-redux-todo *手順2 [#m993fb4d] 「Example: Todo List」が動作したので、[[先程>#fa5b6488]]失敗した[[コチラ>Reactのファースト・ステップ#n908d0bb]]の[[Redux]]化に再チャレンジ。 **インストール [#t42a87de] >npm install --save redux react-redux redux-logger **Component毎 [#tef34d40] ***実装 [#haacb1a8] 以下の辺りに注意しながら実装する。 -redux-loggerを使用 -createStoreの定義 -Actionの分割 -Reducerの書き方 -Containerの使用 -Componentからの参照方法 ***実行 [#bbb13e6f] -またも動かない。 -redux-loggerで、Reducersが動いていることは確認できるが、~ Component側が更新されない(State -> Componentの再実行がかかってない)。 -散々調べた挙げ句、原因は下で、 --combineReducersを使うと以下のようにStoreが階層化されるため、 {"Menu1":{"counter":0},"Menu2":{"counter":0}} --mapDispatchToPropsで、コレを考慮した設定にする必要があった。 const mapStateToProps = state => { return { counter: state.Menu1.counter } } -[[Redux]]さん、もっと、 --使い易さと、 --デバッグし易さを、 >考えて設計して欲しい感がある。 ***参考 [#tffeb8df] -combineReducersでハマったメモ~ https://qiita.com/usagi-f/items/ae568fb64c2eac882d05 -react-reduxで「dispatch is not a function」にハマった場合の対処法~ https://qiita.com/gaku3601/items/f77523bca6661f72f46a **Componentを跨ぐ [#gb1bc625] Componentを跨ぐという初歩的なことも良く解らないので、~ ネットを調べて以下のページを発見したのでやってみる。 -javascript - React & Redux : connect() to multiple components & best practices - Stack Overflow~ https://stackoverflow.com/questions/35032204/react-redux-connect-to-multiple-components-best-practices ***実装 [#h67e8391] Menu1、Menu2のContainerを集約するContainer, Action, Reducerを、Menu12に集約。 -Containerネストは不可能なので、Containerを集約する。 -従ってContainer以外にも、 Action, Reducerの集約を行う。 -子コンポーネントへは、propsを使用してstateとfunctionを渡す。 ***実行 [#xf51363b] 無事、動作。 **サンプル [#t7bf1183] https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/redux_app *手順3 [#s4a24c70] -[[コチラ>Reactのファースト・ステップ#gf8301c9]]の[[Redux]]化 -[[コチラ>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React%2BRedux%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88]]の新しい要素も追加する。 --ページング処理 --Hot Reloading --redux-thunkによる非同期処理 **実装 [#p848397e] **実行 [#vc6436a4] **サンプル [#g981bbfd] *参考 [#v94b3eeb] **[[Reactのファースト・ステップ]] [#s8192f13]