Flutter with Redux

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

9. None

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ͷํ͕૬ੑ͍͍ ײ૝