Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter with Redux
Search
木藤紘介/Kosuke Kito
December 06, 2018
Programming
3
1.2k
Flutter with Redux
in REQU (
https://requ.ameba.jp/
)
Qiitaはこちら
https://qiita.com/kitoko552/items/155baf852b059550b0f9
木藤紘介/Kosuke Kito
December 06, 2018
Tweet
Share
More Decks by 木藤紘介/Kosuke Kito
See All by 木藤紘介/Kosuke Kito
iOS de Redux
kitoko552
1
86
Other Decks in Programming
See All in Programming
sappoRo.R #12 初心者セッション
kosugitti
0
280
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
140
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
290
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
100
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
760
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
Side Projects
sachag
452
42k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Building Adaptive Systems
keathley
40
2.4k
A Tale of Four Properties
chriscoyier
158
23k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Building Applications with DynamoDB
mza
93
6.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Embracing the Ebb and Flow
colly
84
4.6k
Fireside Chat
paigeccino
35
3.2k
Transcript
Flutter with Redux -REQUͷ߹
౻ߛհ Kosuke Kito @kitoko552 REQU by CyberAgent, Inc. iOS/Swift, Flutter/Dart
Ωϟϯϓข͖ՐεϚϒϥཉ͍͠
https://requ.ameba.jp/
- Unidirectional data flow - Three principles Redux
Unidirectional data flow View Store Reducer State Reducer State Reducer
State Action Middleware Subscribe Dispatch
- Single source of truth - State is read-only -
Changes are made with pure functions Three principles
- ΞϓϦέʔγϣϯશମͷঢ়ଶΛ1ͭͷStoreͰදݱ - ঢ়ଶΛม͔͑ͨͬͨΒ৽͍͠State࡞ͬͯ͘Ε - ঢ়ଶมߋͰ͖ΔͷReducer͚ͩ Three principles
FlutterͰRedux
None
redux:͖ͬ͞ͷͭ flutter_redux: reduxͱWidgetπϦʔͷհ redux_logging: ϩά redux_thunk: ThunkMiddlewareΛఏڙ REQUͷ߹
ThunkMiddleware? View Store Reducer State Reducer State Reducer State Action
Middleware Subscribe Dispatch ThunkMiddleware
ඇಉظॲཧΛActionͱͯ͠ఆٛͰ͖ΔΑ͏ʹ͢ ΔͨΊͷMiddleware ThunkMiddleware?
REQUͷ߹ʢActionʣ class UpdateSomething { UpdateSomething(this.id, this.name); final int id; final
String name; } store.dispatch(UpdateSomething(id, name));
REQUͷ߹ʢActionʣ ThunkAction<AppState> fetchSomething() { return (store) { // ඇಉظॲཧ .then((response)
=> store.dispatch(UpdateSomething(response))) .catchError((error) => store.dispatch(UpdateError(error))); }; } store.dispatch(fetchSomething());
REQUͷ߹ʢViewʣ class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context)
{ return StoreConnector<AppState, _HomePageViewModel>( distinct: true, converter: (store) { return _HomePageViewModel( name: store.state.homeState.name, onTap: () => store.dispatch(UpdateName('Next name')), ); }, builder: (context, viewModel) { return Scaffold( body: Center( child: FlatButton( onPressed: viewModel.onTap, child: Text(viewModel.name), ), ), ); }, ); } }
REQUͷ߹ʢViewʣ View Store Reducer State Reducer State Reducer State Action
Middleware Subscribe Dispatch View Model
REQUͷ߹ʢStateʣ @immutable class HomeState { HomeState({@required this.name}); final String name;
HomeState copyWith({String name}) { return HomeState(name: name ?? this.name); } }
REQUͷ߹ʢReducerʣ final Reducer<HomeState> homeReducer = combineReducers<HomeState>([ TypedReducer(_updateName), ]); HomeState _updateName(HomeState
state, UpdateName action) { return state.copyWith(name: action.name); }
- ςετ͕ෆࣗવͳॻ͖ํʹͳΔͱ͜Ζ͕͋Δ - Action͕ଠΓ͕ͪ - AnimatedListͱͷ૬ੑ͕ྑ͘ͳ͍߹͕͋Δ ΜͰ͍Δͱ͜Ζ
- దͳϧʔϧͰറΕΔ =>νʔϜϝϯόʔ୭͕ॻ͍ͯ͋Δఔಉ͡Α͏ͳ࣮ʹͳΔ - FlutterReduxΒͳ͍৽ϝϯόʔʹͱֶͬͯशίετ͕ ߴͯ͘ࠅ - iOSΑΓFlutterͷํ͕૬ੑ͍͍ ײ