サンプルTodoから見るreact,flux,redux（古川）

React勉強会
TODOアプリから見るReactのみ、
React+FluxとReact+Reduxの違い

発表者
2017/1/30
Copyright © TeamSpirit Inc. All Rights Reserved.
1
 名前：古川久勝
 所属：株式会社チームスピリット
 主な仕事：サーバサイド側プログラミング
 つまり

免罪符
2017/1/30
2
的な内容もあるかと思います為、ご了承ください
素
人
は
黙
っ
と
れ
ー
ー
画像は省略

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
3

ReactとFlux、Reduxの違いは
状態（変数みたいなもの）の
格納、保持方法が違うだけ。
描画部分はほぼ一緒です。
それぞれの違い
2017/1/30
4
※初心者の意見です

React処理の流れ
2017/1/30
5
App
State（状態） Render関数
Stateを使用して描画

React処理の流れ（Todo追加）
2017/1/30
6
App
State（状態） Render関数
追加するTodoを
Stateに格納
追加したTodoが含まれている
Stateを使用して描画

React処理の特徴
2017/1/30
7
 特徴
とにかく単純である
 メリット
・ソースが少なくてすむ
・ブラックボックス部分が少ないためぱっとみの
流れがわかりやすい
 デメリット
・複雑になるとStateがかなり迷子になりやすい
・Stateを見知らぬ地にて変更されると修正しにくい
・他のソースにStateを渡す場合はRootとなるソースが必要
 こんな時におすすめ
・小規模なアプリケーションを作成する場合

Flux処理の流れ
2017/1/30
8
Container
Store
Reduse関数 State
Store
Reduse関数 State
View
Render関数
StateをPropsに変換して描画
Action
動作関数
Dispacther
動作させる処理を持たせて
Reduse関数に投げる動作関数からDispatcherに
動作させる処理を登録
Reduse関数からStateを更新

Flux処理の流れ
2017/1/30
9
Container
Store
Reduse関数 State
Store
Reduse関数 State
View
Render関数
追加したTodoが含まれている
StateをPropsに変換して描画
Action
動作関数
Dispacther
Todo追加処理を持たせて
Reduse関数に投げる Dispatcherに
Todo追加処理を登録
Reduse関数から追加したTodoを
Stateに追加
追加するTodoを
動作関数に投げる

Flux処理の特徴
2017/1/30
10
 特徴
状態変換と動作、描画が分離されている
 メリット
・修正箇所がわかりやすい
 デメリット
・複雑になるとStoreが迷子になりやすい
・他のContainerにStoreを渡す場合はRootContainerが必要
・描画部分が複雑であるアプリケーションを作る場合

Redux処理の流れ
2017/1/30
11
ContainerStore
State
Props変換
View
Render関数
Propsを渡して描画
Action
動作関数
Reducer
Dispatchされた動作関数から
動作させる処理を登録
Reducer
reducerState
reducerState
StateをPropsに変換
Reducerからそれぞれの
reducerStateに格納

Redux処理の流れ
2017/1/30
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を
動作関数に投げる

Redux処理の特徴
2017/1/30
13
 特徴
Stateを格納しているStoreが一元管理されているため、取扱が楽
 メリット
・Stateが迷子にならない
・StateがStoreに一元管理されているため、
State管理用RootContainerが不要
 デメリット
・関数を追加する時のソース修正が３個の中で一番多い
・ブラックボックス部分が多いためぱっとみの
流れがわかりにくい
・どこでもStateを取得ができるため、取得側の管理が必要
・処理部分が複雑であるアプリケーションを作る場合

まとめ
2017/1/30
14
Reactのみ:
シンプルゆえ無法地帯になりやすい。
簡単な機能や制御系が少ないアプリケーションを作る時におすすめ
React-Flux:
ルールが保たれているがそれでもState管理が大変。
ほどよく制御が含まれているアプリケーションを作る時におすすめ
React-Redux:
State管理が楽だけど理解とソース量がとにかく多い。
それなりに大規模アプリケーションを作る時におすすめ

Thanks！
終わり
2017/1/30
15
終制作・著作

サンプルTodoから見るreact,flux,redux（古川）

More Related Content

Viewers also liked (20)

Similar to サンプルTodoから見るreact,flux,redux（古川） (20)

サンプルTodoから見るreact,flux,redux（古川）