How to watch redux store change inside useEffect?

[Lenny4]

I'm using flutter_hooks and flutter_redux

Here is my widget:

class Root extends HookWidget {
  const Root({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final store = StoreProvider.of<AppState>(context);

    useEffect(() {
      print('useEffect print: ${store.state.init}');
      if(store.state.init == false) {
        store.dispatch({'init': true});
      }
    }, [store.state.init]);

    return Container();
  }
}

Current ouput:

useEffect print: false

Expected ouput:

useEffect print: false
useEffect print: true

Why does useEffect hook is not trigger when I update the state of the store ?

In react i can do something like this:

const MyComponent = React.memo(() => {
  const dispatch = useAppDispatch();
  const init = useAppSelector((state: RootState) => state.globalState.init);

  React.useEffect(() => {
    console.log("init state: " + init);
    if (init === false) {
      dispatch(set({ init: true }));
    }
  }, [init]);

  return <Box />;
});

export default MyComponent;

output:

init state: false
init state: true

Notive that the useEffect function has been call twice without having to use setState.

Is there a way to do the same in flutter_redux ?

[brianegan]

Heya -- thanks for writing in! This library does not support flutter hooks out of the box, since it is a 3rd party package in the Flutter ecosystem. This library is only built to work with flutter + redux.

Please see alternative packages, such as https://pub.dev/packages/redux_hooks to get that functionality!

On Sun, Apr 2, 2023 at 7:41 PM Lenny4 @.***> wrote:

I'm using flutter_hooks https://pub.dev/packages/flutter_hooks and flutter_redux https://pub.dev/packages/flutter_redux

Here is my widget:

class Root extends HookWidget { const Root({Key? key}) : super(key: key);

// This widget is the root of your application. @override Widget build(BuildContext context) { final store = StoreProvider.of(context);

useEffect(() {
  print('useEffect print: ${store.state.init}');
  if(store.state.init === false) {
    store.dispatch({'init': true});
  }
}, [store.state.init]);

return Container();

} }

Current ouput:

useEffect print: false

Expected ouput:

useEffect print: false useEffect print: true

Why does useEffect hook is not trigger when I update the state of the store ?

In react i can do something like this:

const MyComponent = React.memo(() => { const dispatch = useAppDispatch(); const init = useAppSelector((state: RootState) => state.globalState.init);

React.useEffect(() => { console.log("init state: " + init); if (init === false) { dispatch(set({ init: true })); } }, [init]);

return ;}); export default MyComponent;

output:

init state: false init state: true

Notive that the useEffect function has been call twice without having to use setState.

Is there a way to do the same in flutter_redux ?

— Reply to this email directly, view it on GitHub https://github.com/brianegan/flutter_redux/issues/244, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA65DGJKWWCGIUOASVDOGDW7HB53ANCNFSM6AAAAAAWQOYQBM . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[Lenny4]

@brianegan thank for the answer.

Do you think it would be a good idea to add it in the README ?

I can do it if you want.

[brianegan]

There have been a few different libraries that implemented redux + hooks, and some were abandoned. If the one I linked to is up to date and works for you, please feel free to submit a PR and I'd be happy to merge it :)

Thanks!

[Lenny4]

In fact it doesn't work :s

Do you plan on adding this feature in your repo ?

[brianegan]

I don't know if it'd make as much sense in this repo, since this repo is meant to be pretty lean in terms of dependencies.

A separate package feels like the correct path for implementation, but it's too bad they aren't working or maintained.