redux - 如何在 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

我遵循了这种方法-

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

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

它用于补充存储中的旧状态。