「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-戻る
--[[React]]
--[[Redux]]
--[[React]] -> [[Redux]]
--[[Reactのファースト・ステップ]]

*目次 [#a4c3ea2d]
#contents

*概要 [#c8d6c3ab]
-create-react-appを使用した、[[React]] + [[Redux]]の step by step。
-[[コチラ>Redux#h03d288c]]を参考にして[[Redux]]サンプルの実装を行う。

*手順１ [#fa5b6488]
色々悩んだが、先ずは、
色々悩んだが（と言うか、[[コレ>Reactのファースト・ステップ#n908d0bb]]の[[Redux]]化に失敗したため）、~
先ずは、以下の「Example: Todo List」のClass化版をやることに。

以下の「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

（というか、[[コレ>Reactのファースト・ステップ#n908d0bb]]の[[Redux]]化に失敗したため）
ココでは、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

***redux [#jfc83ae2]
 > npm install --save redux
**実装 [#idc1c700]
以下を見ても明らかだが、

***react-redux [#p3cc721b]
 > npm install --save react-redux
>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]]の状態遷移はコンソール上に表示される。

*手順２ [#m993fb4d]
[[先程>#fa5b6488]]失敗した[[コチラ>Reactのファースト・ステップ#n908d0bb]]の[[Redux]]化に再チャレンジ。

**インストール [#t42a87de]
 >npm install --save redux react-redux redux-logger

**実装 [#haacb1a8]
以下の辺りに注意しながら実装する。
-redux-loggerを使用
-createStoreの定義
-Actionの分割
-Reducerの書き方
-Containerの使用
-Componentからの参照方法

***Entry Point [#rb1d278d]
createStoreする。

***Action Creators [#z23bc81f]

***Reducers [#va1a4989]

*手順２ [#m993fb4d]

*参考 [#v94b3eeb]

**[[Reactのファースト・ステップ]] [#s8192f13]
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS