在开始使用 flutter 和 redux 构建应用程序时,我遇到了以下问题:处理网络请求或任何异步操作的最佳方法是什么?
上下文:当请求完成时,进行异步调用以从服务器端获取字符串(在我的例子中只是 Future.delayed),更新状态并查看视图中的更改。
第一种方法:
创建一个具有异步调用函数的中间件类,该函数将在调用 NextDispacther 完成后等待异步事件完成,并使用将在减速器中处理的新操作
class UserTypeMiddleware extends MiddlewareClass<AppState> {
@override
void call(Store<AppState> store, action, NextDispatcher next) async{
if (action is GetTitleAction) {
String title = await Future<String>.delayed(Duration(seconds: 2), () {
return "This is a title ";
});
next(UpdateTitleAction(title));
} else {
next(action);
}
}
}
Run Code Online (Sandbox Code Playgroud)
第二种方法:
创建一个 typedMiddleware 做同样的事情,但它通过 store.dispatch 调度操作
TypedMiddleware<AppState, GetTitleAction> userTypeMiddleware() =>
TypedMiddleware<AppState, GetTitleAction>(_getTitle);
Future _getTitle(Store<AppState> store, GetTitleAction action, NextDispatcher next) async {
String title = await Future<String>.delayed(Duration(seconds: 2), () …Run Code Online (Sandbox Code Playgroud) 如何对我的私人路线进行包装,仅在用户获得授权时导航到屏幕,否则重定向到登录并在登录后返回原始屏幕。如何以通用的方式实现这一点,以便我在其他私人未来屏幕上重用它?
我正在学习 flutter 并尝试与 redux 集成以进行商店管理。
我看到的所有示例都在小部件的渲染部分访问,例如:
Padding(
padding: EdgeInsets.all(2.0),
child: StoreConnector<AppState, List<Photo>>(
converter: (store) => store.state.photos,
builder: (_, photos) {
return GridView.builder(
itemCount: photos.length,
itemBuilder: (BuildContext context, int index) {
final photoUrl = photos[index].portrait;
return Padding(
padding: EdgeInsets.all(1.0),
child: new Image.network(
photoUrl,
fit: BoxFit.cover,
),
);
},
gridDelegate:
// .......
Run Code Online (Sandbox Code Playgroud)
但是如何从 initState 中的商店获取一个值,并检测该值是否发生变化,例如?我可以在渲染树之外有一个特定值的监听器吗?
谢谢你。
为清楚起见进行编辑,我正在寻找的是一些 Flutter 等价于 react 的 useSelector 能够在 useEffect 中获取值的变化
编辑:我在想一个选项(虽然不是问题的答案)可能是从父级传递值,然后在子级中使用 didChangeDependencies()
我一直在使用 flutter_redux 几天,我想知道它们之间有什么区别:
class BtnCustom extends StatelessWidget {
@override
Widget build(BuildContext context) {
final store = StoreProvider.of<AppState>(context);
return FlatButton(
onPressed: store.dispatch(MyCustomAction),
child: Text(store.state.MyCustomTxt),
);
}
}
Run Code Online (Sandbox Code Playgroud)
和
class BtnCustom extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StoreConnector<AppState, _ViewModel>(
converter: (store) => _ViewModel(
txt: store.state.MyCustomTxt,
onPressed: store.dispatch(MyCustomAction)),
builder: (BuildContext context, _ViewModel vm) {
return FlatButton(
onPressed: vm.onPressed,
child: Text(vm.txt),
);
},
);
}
}
class _ViewModel {
final String txt;
final void Function() onPressed;
_ViewModel({this.txt, this.onPressed});
}
Run Code Online (Sandbox Code Playgroud)
?
第一个看起来很方便使用。我应该注意使用一种而不是另一种的优点或缺点吗? …
我正在使用 Redux 和 Flutter 以及这个库。如果解决方案是更改为 redux dart 库,那么我会更改它。
这是我为商店提供的代码,我一直在从不同的教程中获取部分内容
@immutable
class AppState {
final SignUpState signUpState;
final LoginState loginState;
AppState({
@required this.signUpState,
@required this.loginState,
});
AppState copyWith({
SignUpState signUpState,
LoginState loginState,
}) {
return AppState(
signUpState: signUpState ?? this.signUpState,
loginState: loginState ?? this.loginState,
);
}
}
AppState appReducer(AppState state, action) {
return AppState(
signUpState: signUpReducer(state.signUpState, action),
// loginState: loginReducer(state.loginState, action),
);
}
class Redux {
static Store<AppState> _store;
static Store<AppState> get store {
if (_store == null) { …Run Code Online (Sandbox Code Playgroud) 我试图根据事件分派操作,但我找不到任何方法可以在不返回小部件的情况下实现这一目标。这是默认的做法
StoreConnector<MyAppState,ActionFunc>(
converter:(store) => () => store.dispatch(myaction),
builder:(ctx,callback){
return Center(child:
RaisedButton(
onPressed:(){callback();}
child:,Text("Action !")
));
});
Run Code Online (Sandbox Code Playgroud)