Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to サンプルTodoから見るreact,flux,redux（古川）
Similar to サンプルTodoから見るreact,flux,redux（古川） (18)
Recently uploaded
Recently uploaded (8)
サンプルTodoから見るreact,flux,redux（古川）
- 2. 発表者 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 1 名前：古川 久勝 所属：株式会社チームスピリット 主な仕事：サーバサイド側プログラミング つまり
- 3. 免罪符 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 2 的な内容もあるかと思います為、ご了承ください 素 人 は 黙 っ と れ ー ー 画像は省略
- 4. react: https://facebook.github.io/react/ flux: https://github.com/facebook/flux/tree/master/examples /flux-todomvc redux: http://redux.js.org/docs/basics/ExampleTodoList.html 今回使用したサンプル 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 3
- 5. ReactとFlux、Reduxの違いは 状態（変数みたいなもの）の 格納、保持方法が違うだけ。 描画部分はほぼ一緒です。 それぞれの違い 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 4 ※初心者の意見です
- 6. React処理の流れ 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 5 App State（状態） Render関数 Stateを使用して描画
- 7. React処理の流れ（Todo追加） 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 6 App State（状態） Render関数 追加するTodoを Stateに格納 追加したTodoが含まれている Stateを使用して描画
- 8. React処理の特徴 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 7 特徴 とにかく単純である メリット ・ソースが少なくてすむ ・ブラックボックス部分が少ないためぱっとみの 流れがわかりやすい デメリット ・複雑になるとStateがかなり迷子になりやすい ・Stateを見知らぬ地にて変更されると修正しにくい ・他のソースにStateを渡す場合はRootとなるソースが必要 こんな時におすすめ ・小規模なアプリケーションを作成する場合
- 9. Flux処理の流れ 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 8 Container Store Reduse関数 State Store Reduse関数 State View Render関数 StateをPropsに変換して描画 Action 動作関数 Dispacther 動作させる処理を持たせて Reduse関数に投げる 動作関数からDispatcherに 動作させる処理を登録 Reduse関数からStateを更新
- 10. Flux処理の流れ 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 9 Container Store Reduse関数 State Store Reduse関数 State View Render関数 追加したTodoが含まれている StateをPropsに変換して描画 Action 動作関数 Dispacther Todo追加処理を持たせて Reduse関数に投げる Dispatcherに Todo追加処理を登録 Reduse関数から追加したTodoを Stateに追加 追加するTodoを 動作関数に投げる
- 11. Flux処理の特徴 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 10 特徴 状態変換と動作、描画が分離されている メリット ・修正箇所がわかりやすい デメリット ・複雑になるとStoreが迷子になりやすい ・他のContainerにStoreを渡す場合はRootContainerが必要 こんな時におすすめ ・描画部分が複雑であるアプリケーションを作る場合
- 12. Redux処理の流れ 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 11 ContainerStore State Props変換 View Render関数 Propsを渡して描画 Action 動作関数 Reducer Dispatchされた動作関数から 動作させる処理を登録 Reducer reducerState reducerState StateをPropsに変換 Reducerからそれぞれの reducerStateに格納
- 13. Redux処理の流れ 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 12 ContainerStore State Props変換 Component Render関数 Todo用Propsを渡して描画 Action 動作関数 Reducer DispatchされたTodo追加関数から Todo追加処理を登録 Reducer reducerState reducerState Todo用StateをTodo用Propsに変換 Todo用Reducerから追加したTodoを Todo用Stateに格納 追加するTodoを 動作関数に投げる
- 14. Redux処理の特徴 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 13 特徴 Stateを格納しているStoreが一元管理されているため、取扱が楽 メリット ・Stateが迷子にならない ・StateがStoreに一元管理されているため、 State管理用RootContainerが不要 デメリット ・関数を追加する時のソース修正が３個の中で一番多い ・ブラックボックス部分が多いためぱっとみの 流れがわかりにくい ・どこでもStateを取得ができるため、取得側の管理が必要 こんな時におすすめ ・処理部分が複雑であるアプリケーションを作る場合
- 15. まとめ 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 14 Reactのみ: シンプルゆえ無法地帯になりやすい。 簡単な機能や制御系が少ないアプリケーションを作る時におすすめ React-Flux: ルールが保たれているがそれでもState管理が大変。 ほどよく制御が含まれているアプリケーションを作る時におすすめ React-Redux: State管理が楽だけど理解とソース量がとにかく多い。 それなりに大規模アプリケーションを作る時におすすめ
- 16. Thanks！ 終わり 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 15 終制作・著作