How to read store values outside of the render tree in Flutter

Question

I am learning flutter and trying to integrate with redux for store managment.

All the examples I see the store is accessed in the render part of the widget, for example like so:

Padding(
  padding: EdgeInsets.all(2.0),
  child: StoreConnector<AppState, List<Photo>>(
        converter: (store) => store.state.photos,
        builder: (_, photos) {
          return GridView.builder(
            itemCount: photos.length,
            itemBuilder: (BuildContext context, int index) {
              final photoUrl = photos[index].portrait;
              return Padding(
                padding: EdgeInsets.all(1.0),
                child: new Image.network(
                  photoUrl,
                  fit: BoxFit.cover,
                ),
              );
            },
            gridDelegate:                                    
            // .......

but how to get a value from the store in initState, and detect if that value changes, for example? And can I have a listener for certain value outside the render tree?

Thank you.

Edit for clarity, what I am looking for is some Flutter equivalent of react's useSelector being able to get the change in value in useEffect

Edit: I was thinking that an option (though not the answer to the question) could be to pass the values from the parent and then use didChangeDependencies() in the child

If you already familiar with react's hooks why don't use riverpod hooks, It has useEffect function and a value selector method. — Mohammed Alfateh, Nov 24 '20 at 16:32
Thank you @MohammedAlfateh , I spent countless hours to have the Redux working, I'd die if I change now. Is that instead of Redux or a complement? — user3808307, Nov 26 '20 at 21:29

score 0 · Answer 1 · answered Dec 01 '20 at 06:04

I Don't know much about the react's useSelector and redux but In Flutter you can Pass Function as a Paramter which help to change the value across different widgets.

Example

  class MainClass extends StatefulWidget {
  MainClass({Key key}) : super(key: key);

  @override
  _MainClassState createState() => _MainClassState();
}

class _MainClassState extends State<MainClass> {
  int value = 0;

  changeValue(int newValue) {
    setState(() {
      value = newValue;
    });
  }

  @override
  void initState() {
    print('value is $value');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          InnerClass2(
            value: value,
          ),
          InnerClass(
            changeValue: changeValue,
          ),
        ],
      ),
    );
  }
}

class InnerClass extends StatefulWidget {
  Function changeValue;

  InnerClass({@required this.changeValue, Key key}) : super(key: key);

  @override
  _InnerClassState createState() => _InnerClassState();
}

class _InnerClassState extends State<InnerClass> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        onPressed: () {
          widget.changeValue(2);
        },
      ),
    );
  }
}

class InnerClass2 extends StatelessWidget {
  final int value;
  const InnerClass2({@required this.value, Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(value.toString()),
    );
  }
}

Yes @MohammadRaza , but that is a different case. I need to do stuff when redux store changes. — user3808307, Dec 01 '20 at 21:16

How to read store values outside of the render tree in Flutter

1 Answers1