flutter_bloc: 使initialState方法异步化

Question

我正在使用flutter_bloc包来管理应用程序中的状态。 我有一个使用情况，需要从远程数据库加载初始状态。 这需要将initialState方法设置为异步，但它目前不是异步的。

如果不使用initialState方法，从远程数据库加载Bloc的初始状态最好的方法是什么？

- sharath

---

为什么不使用 StreamBuilder 或 FutureBuilder 来显示加载状态，当您从远程数据库获取数据时，然后在获取完成后显示用户界面。 - Isaac Obella

Answer 1

全面解释：

flutter_bloc 插件中的 Bloc 的 initialState 必须是同步的，因为在实例化 bloc 时必须立即有一个初始状态可用。

因此，如果您想从异步源获得状态，则可以在 mapEventToState 函数内调用异步函数，并在工作完成后发出新状态。

一般步骤：
步骤(1)：
创建自己的 Bloc 类，具有所需的事件和状态。

class YourBloc extends Bloc<YourEvent, YourState> {
  @override
  YourState get initialState => LoadingState();

  @override
  Stream<YourState> mapEventToState(YourEvent event) async* {
    if (event is InitEvent) {
      final data = await _getDataFrom_SharedPreferences_OR_Database_OR_anyAsyncSource();
      yield LoadedState(data);
    }
  }
}

LoadingState和LoadedState可以是YourState类的子类或同类型，并且可以具有稍后在小部件中使用的不同属性。同样，InitEvent和其他您的事件也可以作为YourEvent类的子类或枚举。

步骤(2):
现在当您想要创建 BlocProvider 小部件时，可以立即添加如下所示的 initEvent：

BlocProvider<YourBloc>(
  create: (_) => YourBloc()..add(InitEvent()),
  child: YourChild(),
)

步骤（3）：
使用不同的状态来显示不同的部件：

BlocBuilder<YourBloc, YourState>(
  builder: (context, state) {
    if (state is LoadingState) {
      return Center(child: CircularProgressIndicator(),);
    }
    if (state is LoadedState) {
      return YourWidget(state.data);
    }
  }
)

实际例子：
请假设我们在一个购物应用中有每个商品的计数器（+/-），并且我们想要将所选项目的计数保存在SharedPreferences或database中（您可以使用任何异步数据源）。这样，每当用户打开应用程序时，他/她都可以看到所选的项目计数。

//our events:
enum CounterEvent {increment, decrement, init}

class YourBloc extends Bloc<CounterEvent, int>{
    final Product product;
    YourBloc(int initialState, this.product) : super(initialState);

    @override
    Stream<int> mapEventToState(CounterEvent event) async* {
        int newState;
        if(event == CounterEvent.init){
            //get data from your async data source (database or shared preferences or etc.)
            newState = data.count;
            yield newState;
        }
        else if(event == CounterEvent.increment){
            newState = state + 1;
            saveNewState(newState);
            yield newState;
        }else if(event  == CounterEvent.decrement && state > 0){
            newState = state - 1;
            saveNewState(newState);
            yield newState;
        }
    }

    void saveNewState(int count){
        //save your new state in database or shared preferences or etc.
    }
}

class ProductCounter extends StatelessWidget {
  
  final Product product;
  ProductCounter(this.product);
  
  @override
  Widget build(BuildContext context) {
    return BlocProvider<YourBloc>(
        //-1 is a fake initial (sync) value that is converted to progressbar in BlocBuilder
        create: (context) => YourBloc(-1, product)..add(CounterEvent.init),
        child: YourWidget()
    );
  }
}

class YourWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    
    final _yourBloc  = BlocProvider.of<YourBloc>(context);

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => _yourBloc.add(CounterEvent.increment),
          ),
        BlocBuilder<ProductCounterBloc, int>(
              builder: (BuildContext context, int state) {
                if(state == -1){
                  return Center(child: CircularProgressIndicator(),);
                }else {
                  return Container(
                    width: 24,
                    child: Text(
                      state > 0 ? state.toString().padLeft(2, "0") : "-",
                      textAlign: TextAlign.center,
                    ),
                  );
                }
              }
            ),
        FloatingActionButton(
          child: const Icon(Icons.remove),
          onPressed: () => _yourBloc.add(CounterEvent.decrement),
        ),
      ],
    );
  }


}

- Ghasem Sadeghi

Answer 2

不要使用 async，而是使用两个状态，即loading和loaded

解释:

• 您可以向bloc发送event来开始加载(on it event bloc send new LoadingState)，在那里接收并显示Loader,

• 当加载结束时，bloc发送另一个带有数据的状态，您只需切换加载状态为已加载（并显示数据）。

您不需要等待调用，您所要做的就是推送和接收状态

- Yauhen Sampir

---

这是正确的方法。你不能等待初始状态。当你需要的数据准备好时，你应该改变状态。 - nipunasudha

我不确定我是否理解了你的回答，能否请你详细说明或展示一个编码示例？ - Retrosec6

Answer 3

另一个选项可能是，在您进行依赖注入的配置文件中等待状态。然后将该状态传递到 bloc 的构造函数中。因此，现在您可以轻松地将 initialState 指向您传递的状态。

是的，您必须记住当您的数据准备好时应更改初始状态。

现在我提供一个此场景的用例。 您可能已经向用户显示了基本选项或设置。您可以从初始状态获取这些简单的数据。 然后下一个状态：例如加载状态可以显示具有某种不透明度的背景的加载指示器。用户可以在加载所需数据时看到基本选项。

- Kasandrop