Как асинхронно загрузить состояние приложения с сервера при создании хранилища в флаттер-редукс?

По сути, я хочу загрузить параметры удаленной конфигурации Firebase при запуске приложения и сохранить его в состоянии приложения при создании магазина.

Так что, когда мне это нужно, я просто извлекаю его из магазина и получаю значение remoteConfig.

class App extends StatelessWidget {
// Get firebase remote config and store it in appState 
 ---> final store = createStore();

 App();

  @override
  Widget build(BuildContext context) {
    return new PersistorGate(
      persistor: persistor,
      loading: new LoadingScreen(),
      builder: (context) => new StoreProvider<AppState>(
          store: store,
          child: new MaterialApp(
            title: 'TestApp',
            theme: defaultTargetPlatform == TargetPlatform.iOS
                ? kIOSTheme
                : kDefaultTheme,
            routes: getRoutes(context, store),
            initialRoute: '/login',
          )),
    );
  }
}

Создать файл магазина -

Store<AppState> createStore() { 
    Store<AppState> store = new Store(
        appReducer,
        // store remote config in initial app state
        initialState: new AppState(),
        middleware: createMiddleware(),
    );
    persistor.load(store);

    return store;
}

1 ответ

Решение

Я следовал этому подходу -

  1. Используйте FutureBuilder
  2. Получил удаленную конфигурацию асинхронно в future
  3. Создан магазин с покупками remoteConfig

Я реализовал следующее решение - Ищу любой другой возможный подход, кроме этого.

Редактировать:

Могут быть случаи, когда вы не будете получать удаленную конфигурацию из firebase, или какая-то асинхронная операция не будет выполнена, в этом случае вам придется проверить, есть ли на снимке данные, и отобразить некоторый резервный пользовательский интерфейс.

например

if(snapshot.hasData) {
  // render component
} else {
  // render loader
}

Код:

 @override
  Widget build(BuildContext context) {
    return new FutureBuilder<Store>(
        future: setupRemoteConfig(),
        builder: (BuildContext context, AsyncSnapshot<Store> snapshot) {
          return new PersistorGate(
            persistor: persistor,
            loading: new LoadingScreen(),
            builder: (context) =>
            new StoreProvider<AppState>(
                store: snapshot.data,
                child: new MaterialApp(
                  title: 'Test App',
                  theme: defaultTargetPlatform == TargetPlatform.iOS
                      ? kIOSTheme
                      : kDefaultTheme,
                  routes: getRoutes(context, snapshot.data),
                  initialRoute: '/login',
                )
            ),
          );
        }
    );
  }

RemoteConfig: извлечение асинхронного пути remoteConfig

  Future<Store> setupRemoteConfig() async {
    final RemoteConfig remoteConfig = await RemoteConfig.instance;
    // Enable developer mode to relax fetch throttling
    remoteConfig.setConfigSettings(new RemoteConfigSettings(debugMode: true));
    remoteConfig.setDefaults(<String, dynamic>{
      'welcome': 'default welcome',
    });

    await remoteConfig.fetch(expiration: const Duration(hours: 5));
    await remoteConfig.activateFetched();

    return createStore(remoteConfig);

  }

Создание магазина:

Store<AppState> createStore(RemoteConfig config) {
    Store<AppState> store = new Store(
        appReducer,
        initialState: new AppState(config: config),
        middleware: createMiddleware(),
    );

    persistor.load(store);

    return store;
}
  • Персистор исходит от

    импорт 'package:redux_persist_flutter/redux_persist_flutter.dart';

Раньше для восстановления старого состояния в магазине.

Другие вопросы по тегам