redux - 如何使用 Redux 在 Flutter 中显示零食(或推送另一个页面)?
问题描述
所以我有一个登录页面,用户输入用户名和密码,代码如下:
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);
}
}
解决方案
推荐阅读
- excel - 如果函数在 Excel 中返回文本而不是数字?
- android - 如何在 Android/kotlin 中使用 CLIPS 规则引擎获取输出
- excel - 增强宏
- java - 基于自定义 Nifi 处理器的 Maven 构建在测试中失败,java.lang.UnsupportedOperationException
- r - 当子集的长度变为零时,如何简洁地处理子集?
- javascript - 为什么我会收到作为 React Child 功能的警告
- elasticsearch - ElasticSearch 中的映射和模板是什么?
- javascript - 在 AWS CDK 中使用 AWS 开发工具包的正确方法
- python - Pandas:如何在具有多个非重叠时间序列的长数据框中填充缺失的日期?
- javascript - 在设置器中设置新值时获取旧值(javascript)