Slide 1
Slide 1 text
Flutter with Redux
-REQUͷ߹
Slide 2
Slide 2 text
౻ߛհ
Kosuke Kito
@kitoko552
REQU by CyberAgent, Inc.
iOS/Swift, Flutter/Dart
Ωϟϯϓข͖ՐεϚϒϥཉ͍͠
Slide 3
Slide 3 text
https://requ.ameba.jp/
Slide 4
Slide 4 text
- Unidirectional data flow
- Three principles
Redux
Slide 5
Slide 5 text
Unidirectional data flow
View
Store
Reducer
State
Reducer
State
Reducer
State
Action Middleware
Subscribe
Dispatch
Slide 6
Slide 6 text
- Single source of truth
- State is read-only
- Changes are made with pure functions
Three principles
Slide 7
Slide 7 text
- ΞϓϦέʔγϣϯશମͷঢ়ଶΛ1ͭͷStoreͰදݱ
- ঢ়ଶΛม͔͑ͨͬͨΒ৽͍͠State࡞ͬͯ͘Ε
- ঢ়ଶมߋͰ͖ΔͷReducer͚ͩ
Three principles
Slide 8
Slide 8 text
FlutterͰRedux
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
redux:͖ͬ͞ͷͭ
flutter_redux: reduxͱWidgetπϦʔͷհ
redux_logging: ϩά
redux_thunk: ThunkMiddlewareΛఏڙ
REQUͷ߹
Slide 11
Slide 11 text
ThunkMiddleware?
View
Store
Reducer
State
Reducer
State
Reducer
State
Action Middleware
Subscribe
Dispatch
ThunkMiddleware
Slide 12
Slide 12 text
ඇಉظॲཧΛActionͱͯ͠ఆٛͰ͖ΔΑ͏ʹ͢
ΔͨΊͷMiddleware
ThunkMiddleware?
Slide 13
Slide 13 text
REQUͷ߹ʢActionʣ
class UpdateSomething {
UpdateSomething(this.id, this.name);
final int id;
final String name;
}
store.dispatch(UpdateSomething(id, name));
Slide 14
Slide 14 text
REQUͷ߹ʢActionʣ
ThunkAction fetchSomething() {
return (store) {
// ඇಉظॲཧ
.then((response) => store.dispatch(UpdateSomething(response)))
.catchError((error) => store.dispatch(UpdateError(error)));
};
}
store.dispatch(fetchSomething());
Slide 15
Slide 15 text
REQUͷ߹ʢViewʣ
class _HomePageState extends State {
@override
Widget build(BuildContext context) {
return StoreConnector(
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),
),
),
);
},
);
}
}
Slide 16
Slide 16 text
REQUͷ߹ʢViewʣ
View
Store
Reducer
State
Reducer
State
Reducer
State
Action Middleware
Subscribe
Dispatch
View
Model
Slide 17
Slide 17 text
REQUͷ߹ʢStateʣ
@immutable
class HomeState {
HomeState({@required this.name});
final String name;
HomeState copyWith({String name}) {
return HomeState(name: name ?? this.name);
}
}
Slide 18
Slide 18 text
REQUͷ߹ʢReducerʣ
final Reducer homeReducer = combineReducers([
TypedReducer(_updateName),
]);
HomeState _updateName(HomeState state, UpdateName action) {
return state.copyWith(name: action.name);
}
Slide 19
Slide 19 text
- ςετ͕ෆࣗવͳॻ͖ํʹͳΔͱ͜Ζ͕͋Δ
- Action͕ଠΓ͕ͪ
- AnimatedListͱͷ૬ੑ͕ྑ͘ͳ͍߹͕͋Δ
ΜͰ͍Δͱ͜Ζ
Slide 20
Slide 20 text
- దͳϧʔϧͰറΕΔ
=>νʔϜϝϯόʔ୭͕ॻ͍ͯ͋Δఔಉ͡Α͏ͳ࣮ʹͳΔ
- FlutterReduxΒͳ͍৽ϝϯόʔʹͱֶͬͯशίετ͕
ߴͯ͘ࠅ
- iOSΑΓFlutterͷํ͕૬ੑ͍͍
ײ