Perform action automatically on a flutter page based on appState changes.

[brianegan]

Perform action automatically on a flutter page based on appState changes.

[DizWARE]

It looks like your view model is missing the required equality functions to be able to utilize the distinct property.

From the flutter_redux.dart file:
/// As a performance optimization, the Widget can be rebuilt only when the
/// [ViewModel] changes. In order for this to work correctly, you must
/// implement [==] and [hashCode] for the [ViewModel], and set the [distinct]
/// option to true when creating your StoreConnector.

[brianegan]

Hey hey :) Thanks for writing in! One option that might work well for this case is to pass an onWillChange callback to the StoreConnector. This will let you run a function after the Store has changed, and is meant to handle situations like this.

Please feel free to try that, and if it doesn't quite work please write back and we can think of more options :)

[bowojori7]

Thanks! @brianegan I tried the onWillChanged function and it works, I just have a problem with checking the exact change on the Store. So the body of the function won't run on every state change. Trying to check for the change in the state.isLoginFailed variable.

[brianegan]

Cool, glad that worked for ya.

To solve the second challenge, one solution is to use the distinct property on the StoreConnector. If the ViewModel does not change (based on it's == method), it won't re-run the onWillChange function!

[bowojori7]

Hi @brianegan Noticed that you closed the issue. I'm sorry for the late responses but, I don't understand how setting the distinct property to true will help me in this case. Here's my storeConnector:

_ViewModel _viewModel = new _ViewModel(context: context);
//  String isLoginFailed;
    return new StoreConnector<AppState, _ViewModel>(
        onInit: (Store<AppState> store){
//          isLoginFailed = store.state.isLoginFailed;
        },
        onWillChange: (_viewModel){
          Scaffold.of(context).showSnackBar(new SnackBar(
              content: new Text("Error Occurred")));
        },
        distinct: true,  
        converter: _viewModel.fromStore,
        builder: (BuildContext context, _viewModel){
          return new LoginForm(
            email: _viewModel.email,
            password: _viewModel.password,
            saveEmail: _viewModel.saveEmail,
            savePassword: _viewModel.savePassword,
            attemptLogin: _viewModel.attemptLogin,
          );
        }
    );

Where am I supposed to perform the check if the state.isLoginFailed variable has changed?
Everything inside onWillChanged works but the snackBar shows everytime my state changes

[ScholliYT]

I had somewhat the same problem. I decided to make a "ErrorSnackbar" widget which listens for changes on the state.error variable, displays them in a snackbar and then clears up the variable.

I ended up with this code: https://gist.github.com/ScholliYT/d26dc1b947ff48eb0c96bc7c6d4e086e

I think it's bad practice to just return an empty Text widget but I could not figure out how to do it better and this seems to work.

Just add the Widget to your Scaffold like this:

body: Stack(
        children: <Widget>[
          // put other stuff here...
          ErrorSnackbar(),
        ],
      ),