counter demo: UI doesn't update after hot reload

[brianegan]

counter demo: UI doesn't update after hot reload

[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!!