counter demo: UI doesn't update after hot reload

[jangedoo]

I'm following the tutorial from https://flutterbyexample.com/redux-app-getting-to-start
However, when I hot reload, the UI does not update with the new value. This issue is same as #42 . Btw, hot reload works fine on other projects without using redux. Another interesting thing is that after hot reloading, the logger middleware prints the same message twice for a single tap event.

Here is the output from flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.4.4, on Microsoft Windows [Version 10.0.17134.112], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK 26.0.2)
[√] Android Studio (version 2.3)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2017.1)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code, 32-bit edition (version 1.23.1)
[√] Connected devices (1 available)

! Doctor found issues in 1 category.

I've attached the contents of lib folder and pubspec.yaml
firebaseredux.zip

[brianegan]

Hey there -- took a look at your code. The problem is that you're creating the Store<AppState> inside the build function of a StatelessWidget (MusicParty). As a heads up: build functions are called over and over again. In this case, Hot Reload will trigger the build function in your MusicParty after hot reload.

This means you're creating a new store each time the build method is called, and that's why you're running into trouble.

Instead, you need to create the Store exactly once: Either in the main function or in a StatefulWidget at the top of your Widget hierarchy.

Please try this as an alternative and everything should be working:

import 'package:firebaseredux/models/app_state.dart';
import 'package:firebaseredux/pages/home_page.dart';
import 'package:firebaseredux/reducers/app_reducer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:redux_logging/redux_logging.dart';

void main() => runApp(new MusicParty());

class MusicParty extends StatefulWidget {
  @override
  MusicPartyState createState() {
    return new MusicPartyState();
  }
}

class MusicPartyState extends State<MusicParty> {
  final store = Store<AppState>(
    appReducer,
    initialState: new AppState(count: 0, isLoading: false),
    middleware: [LoggingMiddleware.printer()],
  );

  @override
  Widget build(BuildContext context) {
    final title = "Me Suite";

    return new StoreProvider<AppState>(
      store: store,
      child: MaterialApp(
        title: title,
        home: HomePage(title),
      ),
    );
  }
}

[jangedoo]

Thank you. Now everything works as expected.

[ollyde]

This will still fail with persist, load the store asnyc as the app loads with the following.

void main() async {
  runApp(MyApp(store: await AppState.createStore()));
}

[amercobra]

Hey there -- took a look at your code. The problem is that you're creating the Store<AppState> inside the build function of a StatelessWidget (MusicParty). As a heads up: build functions are called over and over again. In this case, Hot Reload will trigger the build function in your MusicParty after hot reload.

This means you're creating a new store each time the build method is called, and that's why you're running into trouble.

Instead, you need to create the Store exactly once: Either in the main function or in a StatefulWidget at the top of your Widget hierarchy.

Please try this as an alternative and everything should be working:

import 'package:firebaseredux/models/app_state.dart';
import 'package:firebaseredux/pages/home_page.dart';
import 'package:firebaseredux/reducers/app_reducer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:redux_logging/redux_logging.dart';

void main() => runApp(new MusicParty());

class MusicParty extends StatefulWidget {
  @override
  MusicPartyState createState() {
    return new MusicPartyState();
  }
}

class MusicPartyState extends State<MusicParty> {
  final store = Store<AppState>(
    appReducer,
    initialState: new AppState(count: 0, isLoading: false),
    middleware: [LoggingMiddleware.printer()],
  );

  @override
  Widget build(BuildContext context) {
    final title = "Me Suite";

    return new StoreProvider<AppState>(
      store: store,
      child: MaterialApp(
        title: title,
        home: HomePage(title),
      ),
    );
  }
}

Thank you, you saved my life!!