如何在 flutter redux 中创建商店时从服务器异步加载应用程序状态？

Question

基本上我想在应用程序启动时加载 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;
}

Answer 1

我遵循了这种方法 -

使用 FutureBuilder
在 future
已使用提取的内容创建商店 remoteConfig

我实施了以下解决方案 - 寻找任何其他可能的方法。

编辑：

在某些情况下，您无法从 firebase 获取远程配置或某些异步操作失败，在这种情况下，您将不得不检查快照是否有数据并显示一些回退 ui。

例如

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

  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;
}

Persistor 来自

导入'package:redux_persist_flutter/redux_persist_flutter.dart';

它曾经在商店里补充旧状态。

如何在 flutter redux 中创建商店时从服务器异步加载应用程序状态？

How to load app state asynchronously from server while creating store in flutter redux?

dart

redux

flutter

firebase-remote-config

flutter-redux