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

1. React勉強会
TODOアプリから見るReactのみ、
React+FluxとReact+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
終制作・著作