Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Provider vs BLoC vs Redux

3d83f31339d239abcc55f869e5f30348?s=47 bkosarzycki
December 11, 2019

Provider vs BLoC vs Redux

In the following presentation I compare main Flutter architecture patterns - package:provider, BLoC and Redux.

Source: https://github.com/kosiara/bloc-vs-pprov-vs-redux

Different architecture have their advantages & disadvantages. Simplest application can take advantage of a stateful widget + inherited widget - which solves the problem of reference passing.

BLoC is more complicated but definitely pays off when you're dealing with a bigger application.

Finally we have redux. This is the most robust example with most boilerplate code. There are non-deniable example of such an architecture:

- single source of truth which can be serialized and later on saved/restored from disk
- ease of logging actions
- clear data-flow
- ability to undo actions

3d83f31339d239abcc55f869e5f30348?s=128

bkosarzycki

December 11, 2019
Tweet

Transcript

  1. Poznan Flutter Developer Group

  2. Poznan Flutter Developer Group

  3. Poznan Flutter Developer Group

  4. Poznan Flutter Developer Group

  5. Poznan Flutter Developer Group @override Widget build(BuildContext context) { return

    MultiProvider( providers: [ ChangeNotifierProvider(builder: (context) => UserLogin()), //hint: other providers go here ], child: Scaffold( appBar: AppBar( …. ) ) ); } class UserLogin with ChangeNotifier { String _user; …. } UserLogin userLogin = Provider.of<UserLogin>(context); userLogin.someAction(); userLogin.notifyListeners(); // usually inside another method
  6. Poznan Flutter Developer Group

  7. Poznan Flutter Developer Group

  8. Poznan Flutter Developer Group class UserSignInBloc { Sink<UserLogin> get login

    => _userCredentialsStream.sink; final _userCredentialsStream = BehaviorSubject<UserLogin>(); Stream<UserAuthenticationState> userSigned; UserSignInBloc() { userSigned = Observable.merge([ _userCredentialsStream.stream.switchMap(_signIn), // other login methods go here ]).asBroadcastStream(); } void dispose() { _userCredentialsStream.close(); } // Business logic here } _userSignInBloc.login.add(UserLogin(user, password));
  9. Poznan Flutter Developer Group var _userSignInBloc = UserSignInBloc(); ResultWidget(_userSignInBloc.userSigned), class

    ResultWidget extends StatefulWidget { Stream<UserAuthenticationState> userSigned; ResultWidget(this.userSigned); @override _ResultWidgetState createState() => _ResultWidgetState(userSigned); } class _ResultWidgetState extends State<ResultWidget> { var loginResultText = ""; _ResultWidgetState(Stream<UserAuthenticationState> userSigned){ userSigned.listen(onLoginDataChanged); } void onLoginDataChanged(UserAuthenticationState event) { if (event is UserAuthenticationLoading) { setState(() { loginResultText = "LOADING..."; }); } }
  10. Poznan Flutter Developer Group

  11. Poznan Flutter Developer Group

  12. Poznan Flutter Developer Group

  13. Poznan Flutter Developer Group

  14. Poznan Flutter Developer Group

  15. Poznan Flutter Developer Group final store = Store<AppState>( appReducer, initialState:

    AppState.noLoggedUser(), middleware: createStoreLoginMiddleware(), ); @override Widget build(BuildContext context) { return StoreProvider( store: store, child: MaterialApp( … ) ); } UserLogin user = StoreProvider.of<AppState>(context).state.loggedUser; StoreProvider.of<AppState>(context).dispatch(LoginRequestAction(user, password)); class LoginUnsuccessfulAction {} TypedReducer<UserLogin, LoginSuccessfulAction>(_setUser) UserLogin _setUser(UserLogin user, LoginSuccessfulAction action) { print("Previous user: $user , storing new user: ${action.user}"); return action.user; }
  16. Poznan Flutter Developer Group

  17. Poznan Flutter Developer Group

  18. Poznan Flutter Developer Group

  19. Poznan Flutter Developer Group https://github.com/kosiara/bloc-vs-pprov-vs-redux

  20. Poznan Flutter Developer Group Bartosz Kosarzycki Poznań Flutter Developer Group

    facebook.com/poznanflutter meetup.com/poznan-flutter-developers
  21. Poznan Flutter Developer Group https://redux.js.org/introduction/three-principles https://www.youtube.com/watch?v=Zbm3hjPjQMk https://www.udemy.com/course/react-redux/ https://medium.com/flutter-community/flutter-pragmatic-state- management-using-provider-5c1129f9b5bb https://pub.dev/packages/provider