在同一页面中使用两个 BLoC 并在第二个 BLoC 中传递第一个 BLoC 的状态

Posted 2023-02-23

【中文标题】在同一页面中使用两个 BLoC 并在第二个 BLoC 中传递第一个 BLoC 的状态

【英文标题】：Using two BLoCs in same page and passing first BLoC's state in second BLoC

【发布时间】：2021-02-12 19:06:48

【问题描述】：

我这几天一直在学习 Flutter 中的 Bloc Pattern。

我有一个页面需要生成 OTP 并对其进行验证。

有两个 API(generateOtp, validateOtp) 两个实现这个功能。

在 generateOtp API 响应中，我需要保存一个密钥，即 uniqueIdentifier。

然后我需要将上面的 uniqueIdentifier 和 Otp 值（用户输入）传递给 validateOtp API。

我创建了两个单独的 BLoC... generateOtpBloc、validateOtpBloc。

使用 MultiBLoC Provider 我正在使用这两个 BLoC。

                            Navigator.of(context).push(
                              MaterialPageRoute<LandingPage>(
                                builder: (_) => MultiBlocProvider(
                                  providers: [
                                    BlocProvider<GenerateOtpBloc>(
                                      create: (context) => GenerateOtpBloc(GenerateOtpInitial())
                                    ),
                                    BlocProvider<ValidateOtpBloc>(
                                      create: (context) => ValidateOtpBloc(ValidateOtpInitial())
                                    )
                                  ],
                                  child: OtpPage(),
                                ),
                              ),
                            );

我能够调用 API 并在我的 UI 页面中获取 API 响应。

但是如何保存我在 generateOtp 中获得的 uniqueIdentifier 值以及如何在第二个 API 中传递这个 uniqueIdentifier？

我想到了使用 setState() 来设置 uniqueIdentifier 的状态。但我收到一个错误。

          child: BlocBuilder<GenerateOtpBloc, GenerateOtpState>(
            builder: (context, state) 
              if (state is GenerateOtpLoading) 
                print("**********GenerateOtpLoading*************");

                return buildLoading();
               else if (state is GenerateOtpLoaded) 
                print("**********GenerateOtpLoaded*************");

                ***//But Im getting error here.***
                ***setState(() 
                  uniqueIdentifier: state.uniqueIdentifier
                );***

                return buildGenerateOtpWidget(context, state.generateOtpRes);
               else 
                print("**********Else*************");
                print(state);
              
            ,
          ),
        ),

generateOtp 和 validateOtp 请求和响应完全不同……这就是我使用两个不同 BLoC 的原因。

向我建议处理此问题的最佳方法？

【问题讨论】：

你可以从另一个集团收听一个集团请看看这个：youtube.com/watch?v=ricBLKHeubM

【参考方案1】：

为什么你尝试使用两个blocs 来处理它？您可以在一个bloc 中使用两个event。这是我在 OTP 登录项目中的代码，类似于您的项目：

class LoginBloc extends Bloc<LoginEvent, LoginState> 
  FirstApiClass _firstApi;
  SecondApiClass _secondApi;

  LoginBloc() : super(Loading()) 
    _firstApi = FirstApiClass();
    _secondApi = SecondApiClass();
  

  @override
  Stream<LoginState> mapEventToState(
    LoginEvent event,
  ) async* 
      if (event is GenerateOtp) 
        // Use FirstApiClass
       else if (event is ValidateOtpBloc) 
        // Use SecondApiClass
      
  

但是，您也可以在这种情况下使用一个 Api 类！ 希望对你有用。