Bloc: Please add an example - How to use Bloc + Redux

[PauloKeller]

I work with blocs and they really helped me a lot, but I use they to only manage local statement in my app and they do great. But I feel that now I need a global state management solution, like Redux or scoped models. I tried to implement Redux with my blocs, but I kind messed up my business logic, can you please implement an example on how to deal with global state with blocs if is possible? I dont like the idea of use local storage to manage my data.

[felangel]

Hi @PauloKeller 👋

Can you please elaborate a bit on why you feel bloc isn't a feasible solution for global state management? I would personally consider the login example a simple example of how to use bloc for both local (login form state) and global state (authentication state). Thoughts?

[PauloKeller]

Thank you for the answer @felangel!

So I saw the login example, that's a such good example by the way, but I fall in some problems that you doesn't describe really well how to solve than.

The repository, in the login example you use, secure storage for the token persistence, but if a need to persist much more application data how should I persist those data, I just figuring a solution that I doesn't need to use local storage to persist data.

The authentication bloc will be the global bloc, so when I try to manage more than one global bloc, and was really difficult to connect and manage more than one global bloc inside a local bloc.

The navigation before a state change, was not so hard to find a solution, but in the login example you just rebuild the material app widget tree with the scaffold correspondent to your authentication state, what I need is navigate between those screens, when I try I receive a dirty state exception, I solve this problem using the following solution:

if (state is LoggedIn) {
  WidgetsBinding.instance.addPostFrameCallback((_) { 
    // Navigation
  });
}

I wrapped my navigation with this addPostFrame callback for delaying its appearance. On redux you can use such approach like action/middleware navigation, so what's the best solution for blocs?

[felangel]

No problem @PauloKeller!

Regarding how to persist application data it's totally up to you and should be separate from the bloc. Check out sqlflite if you haven't already.

Regarding it being difficult to manage more than one global bloc, can you give an example of what you were trying to do and why it was difficult?

Regarding navigation, the approach you've taken works fine and we are currently investigating ways to improve this. Out of curiosity, can you provide an example of how you prefer to handle navigation in redux? Thanks so much! 👍

[PauloKeller]

Hello @felangel!

I didn't tried sqlflite, I will make some experiments and see if this package solve my problems, but as you said the data persistence is up to me, mix Redux and bloc will be such nice thing to do, I will search for some ways to implement that.

About mix local and global bloc, was hard to me to define some kind of "store" like redux, a single global bloc, the problem was that sometimes I dispatched multiples events to same bloc, and in the rendering was like if I using setState many times at once.

Will be nice if blocs have some kind of navigation like redux package flutter_redux_navigation, that's based on middleware navigation.

[felangel]

Hey @PauloKeller sounds good!

If you can put together a small sample that you can share of how you're trying to use bloc for global state management that would be awesome. That way I can take a look and try to give suggestions for how to proceed 👍

Regarding navigation, I'm currently investigating several different approaches so that should be coming soon 😄

[felangel]

Closing this for now but feel free to comment with additional information and I'm more than happy to continue the conversation 👍

[PauloKeller]

Hey @felangel

I found some solutions for the problems that I was facing with multiples blocs, sqflite is helping me a lot, but one little detail about navigation, some times i need to reset my bloc state or change to another state after navigate, if not the bloc keeps dispatching the same state or rebuild the same state, and call's navigation many and many times.

At these example:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          child: BlocBuilder<PostsEvent, PostsState>(bloc: _bloc, builder: (BuildContext context, PostsState state) {
              if (state is SuccessGetPostsState) {
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  Navigator.pushNamed(context, "/PostsScreen");
                });
              }
              return Container();
            },
          ),
        ),
      ),
    );
  }

This navigates many times to same screen, to fix that I dispatch a new event:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          child: BlocBuilder<PostsEvent, PostsState>(bloc: _bloc, builder: (BuildContext context, PostsState state) {
              if (state is SuccessGetPostsState) {
                _bloc.dispatch(InitPostsEvent());
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  Navigator.pushNamed(context, "/PostsScreen");
                });
              }
              return Container();
            },
          ),
        ),
      ),
    );
  }

[felangel]

@PauloKeller We are aware of this limitation and are trying to improve Navigation using flutter_bloc in #201

I'd love to get your feedback regarding the proposed solution 👍

[PauloKeller]

@felangel I will propose, I will move this discussion to #201, and keep from there.

Thanks for the help!