redux - 如何在带有 Redux 的 Flutter 中显示 snacker(或推送另一个页面)？

Question

所以我有一个登录页面，用户可以在其中输入用户名和密码，代码如下:

class LoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  _ViewModel _viewModel;
  TextEditingController _usernameController;
  TextEditingController _passwordController;

  @override
  void initState() {
    super.initState();

    _usernameController = TextEditingController();
    _passwordController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _ViewModel>(
      converter: (store) => _ViewModel.fromStore(store),
      builder: (context, viewModel) {
        _viewModel = viewModel;
        return Scaffold(
          resizeToAvoidBottomPadding: false,
          body: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(
                  top: 40.0,
                  left: 16.0,
                  right: 16.0,
                ),
                child: PrimaryTextField(
                  controller: _usernameController,
                  hintText: "Username",
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                  top: 40.0,
                  left: 16.0,
                  right: 16.0,
                ),
                child: PrimaryTextField(
                  controller: _passwordController,
                  hintText: "Password",
                  obsecureText: true,
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 40.0),
                child: _getLoginButtonOrProgress(),
              ),
            ],
          ),
        );
      },
    );
  }

  _getLoginButtonOrProgress() {
    return _viewModel.loadingData.status == LoadingStatus.LOADING
        ? PrimaryCircularProgress(
            progressColor: Colors.blue,
          )
        : PrimaryButton(
            text: "Login",
            onPressed: () {
              print('Clicking');
              print(_usernameController.text);
              print(_passwordController.text);
              _viewModel.onLoginPressed(
                username: _usernameController.text,
                password: _passwordController.text,
              );
            },
          );
  }
}

class _ViewModel {
  final LoadingData loadingData;
  final Function({String username, String password}) onLoginPressed;

  _ViewModel({
    this.loadingData,
    this.onLoginPressed,
  });

  factory _ViewModel.fromStore(Store<AppState> store) {
    return _ViewModel(
      loadingData: store.state.loginState.loadingData,
      onLoginPressed: ({String username, String password}) {
        store.dispatch(LoginAction(username: username, password: password));
      },
    );
  }
}

当按下按钮时，LoginAction 被调度，中间件发送 http 请求，当收到请求时 LoginResponse 被调度。 我面临的问题是如何在收到登录结果时显示 Snackbar。 Snacker 在构建期间不会进入小部件树，显示当应用程序状态更改时我可以在小部件树之外做一些事情(在它被构建之后)。

登录中间件:

class LoginMiddleware extends MiddlewareClass<AppState> {
  Repository repository;

  LoginMiddleware({
    this.repository,
  });

  @override
  void call(Store<AppState> store, action, NextDispatcher next) {
    if (action is LoginAction) {
      _sendLoginRequest(action, next);
    }
  }

  _sendLoginRequest(LoginAction action, NextDispatcher next) async {
    next(action);

    var result = await repository.login(
        username: action.username, password: action.password);

    var responseAction;

    if (result.status == Status.SUCCESS) {
      responseAction = LoginResponseAction(isSuccessful: true);
    } else {
      responseAction = LoginResponseAction(isSuccessful: false);
    }

    next(responseAction);
  }
}

Answer 1

我所做的是使用 Completer分派(dispatch)操作后返回小部件。

可以查看我的回答here看看是否有帮助。