Dispatching an action that does not alter state rerenders the widget, causing an infinite loop

[Lilja]

Dispatching an action that does not alter state rerenders the widget, causing an infinite loop

[brianegan]

That's not quite how it works, perhaps my explanation was bad. The store only emits change events after the reducer produced a new state. After you dispatch an action, the action goes through the middleware, then through the reducer, which produces a new state. After the new state is produced, the store emits a change event. The StoreConnector listens to those change events and runs the builder function to produce a new widget tree. In Flutter, we do not have hooks, therefore builders / widget build methods are intended to be pure functions without side effects. If you want to avoid a rebuild, you need to ensure the view model you emit implements the == method and pass the distinct: true option to the StoreConnector.

…

On Sat, Mar 4, 2023 at 02:12 Erik Lilja ***@***.***> wrote: Thanks @brianegan <https://github.com/brianegan> totally forgot onInit. It solves what i'm trying to do. However, is it intended that when new state and old state is being reduced will still produce a rerender? Isn't that a bit wasteful? — Reply to this email directly, view it on GitHub <#243 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA65DA5LWZAZKGLDYHJ6HDW2MBQDANCNFSM6AAAAAAVPFOIZE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Lilja]

Example:

import 'package:flutter/material.dart';
import 'package:redux/redux.dart';

enum Actions { increment }

int counterReducer(int state, dynamic action) {
  return action == Actions.increment ? state + 1 : state;
}


void main() {
  runApp(StoreProvider<int>(
      child: MaterialApp(
          home: Scaffold(
              body: StoreConnector<int, VoidCallback>(
                  builder: (context, vm) {
                    print("render");
                    vm();
                    return const Text("data");
                  },
                  converter: (store) => () => store.dispatch("Foo")))),
      store: store));
}

Restarted application in 927ms.
2064 I/flutter (17550): render
Application finished.
Exited (sigterm)

[brianegan]

I believe you're looking for the onInit callback function which can be passed to the StoreConnector constructor.

https://pub.dev/documentation/flutter_redux/latest/flutter_redux/StoreConnector/onInit.html

If you dispatch an action inside the builder function, it will send that action to the Redux reducer, which triggers a state change, which triggers a rebuild, which runs the builder function, which dispatches again, which calls the recuer, produces a state changes, calls the builder... and you've found yourself in an infinite loop :)

Some sample code below (might be missing a paren somewhere -- github coding and didn't run it locally, but should get the idea across).

import 'package:flutter/material.dart';
import 'package:redux/redux.dart';

enum Actions { increment }

int counterReducer(int state, dynamic action) {
  return action == Actions.increment ? state + 1 : state;
}


void main() {
  runApp(StoreProvider<int>(
      store: store
      child: MaterialApp(
          home: Scaffold(
              body: StoreConnector<int, int>(
                  // Grab the current count from the store
                  converter: (store) => store.state,
                  // A function that runs once when the StoreConnector is inserted into the widget tree
                  onInit: (store) => store.dispatch(increment),
                  // Should be a pure function that returns a Widget tree and performs no side effects.
                  builder: (context, counter) {
                    return const Text("current count $counter");
                  },
        ),
      ),
  );
}

[Lilja]

Thanks @brianegan totally forgot onInit. It solves what i'm trying to do.

However, is it intended that when new state and old state is being reduced will still produce a rerender? Isn't that a bit wasteful?

[Lilja]

Thanks! I'll have a look and reach out if I need more help. Much appreciated.