Flutter with Redux

Flutter with Redux

7eea2626f33c9db21539922f31079d60?s=128

木藤紘介/Kosuke Kito

December 06, 2018
Tweet

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