Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

サンプルTodoから見るreact,flux,redux(古川)

1,859 views

Published on

React忘年会にて発表した資料となります。
https://teamspirit.connpass.com/event/46336/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

サンプルTodoから見るreact,flux,redux(古川)

  1. 1. React勉強会 TODOアプリから見るReactのみ、 React+FluxとReact+Reduxの違い
  2. 2. 発表者 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 1  名前:古川 久勝  所属:株式会社チームスピリット  主な仕事:サーバサイド側プログラミング  つまり
  3. 3. 免罪符 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 2 的な内容もあるかと思います為、ご了承ください 素 人 は 黙 っ と れ ー ー 画像は省略
  4. 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. 5. ReactとFlux、Reduxの違いは 状態(変数みたいなもの)の 格納、保持方法が違うだけ。 描画部分はほぼ一緒です。 それぞれの違い 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 4 ※初心者の意見です
  6. 6. React処理の流れ 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 5 App State(状態) Render関数 Stateを使用して描画
  7. 7. React処理の流れ(Todo追加) 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 6 App State(状態) Render関数 追加するTodoを Stateに格納 追加したTodoが含まれている Stateを使用して描画
  8. 8. React処理の特徴 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 7  特徴 とにかく単純である  メリット ・ソースが少なくてすむ ・ブラックボックス部分が少ないためぱっとみの 流れがわかりやすい  デメリット ・複雑になるとStateがかなり迷子になりやすい ・Stateを見知らぬ地にて変更されると修正しにくい ・他のソースにStateを渡す場合はRootとなるソースが必要  こんな時におすすめ ・小規模なアプリケーションを作成する場合
  9. 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. 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. 11. Flux処理の特徴 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 10  特徴 状態変換と動作、描画が分離されている  メリット ・修正箇所がわかりやすい  デメリット ・複雑になるとStoreが迷子になりやすい ・他のContainerにStoreを渡す場合はRootContainerが必要  こんな時におすすめ ・描画部分が複雑であるアプリケーションを作る場合
  12. 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. 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. 14. Redux処理の特徴 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 13  特徴 Stateを格納しているStoreが一元管理されているため、取扱が楽  メリット ・Stateが迷子にならない ・StateがStoreに一元管理されているため、 State管理用RootContainerが不要  デメリット ・関数を追加する時のソース修正が3個の中で一番多い ・ブラックボックス部分が多いためぱっとみの 流れがわかりにくい ・どこでもStateを取得ができるため、取得側の管理が必要  こんな時におすすめ ・処理部分が複雑であるアプリケーションを作る場合
  15. 15. まとめ 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 14 Reactのみ: シンプルゆえ無法地帯になりやすい。 簡単な機能や制御系が少ないアプリケーションを作る時におすすめ React-Flux: ルールが保たれているがそれでもState管理が大変。 ほどよく制御が含まれているアプリケーションを作る時におすすめ React-Redux: State管理が楽だけど理解とソース量がとにかく多い。 それなりに大規模アプリケーションを作る時におすすめ
  16. 16. Thanks! 終わり 2017/1/30 Copyright © TeamSpirit Inc. All Rights Reserved. 15 終制作・著作

×