Accessing store in StoreConnector.builder

[Paul-Todd]

Hi,

I need to have access to the store in the builder function so I can dispatch calls to the middleware. Is there a way to do this "nicely" without storing the store during the call to onInit?

I am new to dart and I just cannot see how to do this.

The use case I am looking at is having a widget display some stateful data and a button. The button when pressed should invoke the store.dispatch(new SomeAction());

Paul

[Paul-Todd]

The example at http://blog.novoda.com/introduction-to-redux-in-flutter/ indicates that the methods should be added to the model then the model called which then has access to the store - is this the correct design?

[brianegan]

Yep! You can also see this technique in the example on the README of this package as well. Another option: If your action is static, you can also forego the StoreConnector by accessing the StoreProvider yourself:

StoreProvider.of<AppState>(context).dispatch(Actions.increment)

The StoreConnector is responsible for connecting to the Store and rebuilding on change. Since this function would not change, no need for the connector / rebuilding!

[atreeon]

Hi, I just tried this out actually but I'm getting a syntax error on the <AppState> generic type.

[dart] Expected to find ';'

          new RaisedButton(child:new Text('load2'), onPressed: () {
            StoreProvider<AppState>.of(context).dispatch(lessonsLoadFsAction);
          })

[brianegan]

Ack, sorry about that, shouldn't code in Github :P

It's StoreProvider.of<AppState>(context).dispatch(lessonsLoadFsAction)

[atreeon]

Thanks Brian for the quick response, unfortunately I'm getting a new error now

[dart] The method 'of' isn't defined for the class 'StoreProvider', but a constructor with that name is defined.

I'm using dart 1 with the following versions

  redux: ^2.1.1
  flutter_redux: ^0.3.6
  redux_thunk: 0.1.1

if I run it using dart 2 (flutter run --preview-dart-2) with the following versions

  redux: ^3.0.0
  flutter_redux: ^0.5.0
  redux_thunk: 0.2.0 

I get the runtime message when it hits any redux code:

• Using Dart 2 (required) by using the --preview-dart-2 flag
• Wrapping your MaterialApp with the StoreProvider, rather than an individual Route
• Providing full type information to your Store, StoreProvider

(I was going to update to flutter master, currently on 0.2.3 but it wasn't immediately obvious how to...let me know if its worth a try)

[atreeon]

Updating to master version worked for me. Many thanks

btw, if anyone wants to know how to set dart 2 in vs code (required for debug) the setting to do this (ctrl + ,)

"dart.previewDart2": true,

[brianegan]

@twistedinferno Hah, ya beat me to it :) Yah, there seems to be a Dart 2 bug on Beta channel that only affects some users. Sorry bout that!

[brianegan]

p.s. This needs to be a thing: https://github.com/twistedinferno/yoda-motivator 😸

[atreeon]

Ha! I forgot that is still up there! I actually wrote it and still use it some days when I need a little zen but...the code is SO bad (I was learning js at the time) that I would like to update just a little before anyone else sees it...I'll update and upload the code sometime next few months and I will let you know :-)

[atreeon]

btw, I am calling dispatch in the build function of my widget to load some data (I don't want it loaded when redux initialises as it is not always necessary and may take time), would you say this is a good location for it?

class SplashS extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    StoreProvider
        .of<AppState>(context)
        .dispatch(lessonsLoadFsAction);
    
    return new Scaffold(
        body: new Container(
            child: new Column(

[brianegan]

@twistedinferno I would say it's probably not the best place, because the build method can be called many times, and it would result in fetching the data over and over. If you only need to load the data once, you have two options:

1. In the StoreConnector widget that needs the data, you can provide an onInit callback to dispatch this action.
2. Use a StatefulWidget instead, and dispatch the action in the initState method, this can be a bit trickier though

[atreeon]

Thanks again Brian, I'll try that out :-)

[brianegan]

@Paul-Todd Hey there -- did I answer your question? Need more help? Happy to keep this open if so, or close out if you're feeling good.

[Paul-Todd]

Thanks, you that did it - moved all my methods to the model and it hangs together nicely!

I will try the StoreProvider.of() stuff when I get the chance as this looks like a nice way to do it as well.