Flutter with Redux

in REQU ( https://requ.ameba.jp/ )

Qiitaはこちら
https://qiita.com/kitoko552/items/155baf852b059550b0f9

Transcript

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