flutter - 在 Flutter 中组合减速器
问题描述
我在这个库中使用 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) {
throw Exception("store is not initialized");
} else {
return _store;
}
}
static Future<void> init() async {
final signUpStateInitial = SignUpState.initial();
final loginStateInitial = LoginState.initial();
_store = Store<AppState>(
appReducer,
middleware: [thunkMiddleware, new LoggingMiddleware.printer()],
initialState: AppState(
signUpState: signUpStateInitial,
loginState: loginStateInitial,
),
);
}
}
我首先使用signUpState进行测试,当我只使用那个时,它目前有效,当我添加另一个reducer并取消注释该行时
// loginState: loginReducer(state.loginState, action),
在尝试发送与上述行一起使用的注册相关操作时,我得到了评论Uncaught (in promise) Error: Expected a value of type 'SetLoginStateAction', but got one of type 'SetSignUpStateAction'
我认为这部分代码是结合减速器:
AppState appReducer(AppState state, action) {
return AppState(
signUpState: signUpReducer(state.signUpState, action),
loginState: loginReducer(state.loginState, action),
);
}
那我该怎么办?
编辑:我现在更改了这样的代码,但问题仍然存在
@immutable
// Define your State
class AppState {
final SignUpState signUpState;
final LoginState loginState;
AppState(this.signUpState, this.loginState);
}
AppState appReducer(AppState state, action) => new AppState(
signUpReducer(state.signUpState, action),
loginReducer(state.loginState, action),
);
class Redux {
static Store<AppState> _store;
static Store<AppState> get store {
if (_store == null) {
throw Exception("store is not initialized");
} else {
return _store;
}
}
static Future<void> init() async {
// print(1);
final signUpStateInitial = SignUpState.initial();
// print(2);
final loginStateInitial = LoginState.initial();
// print(3);
_store = Store<AppState>(
appReducer,
middleware: [thunkMiddleware, new LoggingMiddleware.printer()],
initialState: AppState(
signUpStateInitial,
loginStateInitial,
),
);
}
}
编辑:这是注册状态(它没有做太多,因为我只是在测试)
@immutable
class SignUpState {
final bool isError;
final bool isLoading;
final bool isLoggedIn;
SignUpState({
this.isError,
this.isLoading,
this.isLoggedIn,
});
factory SignUpState.initial() => SignUpState(
isLoading: false,
isError: false,
isLoggedIn: false,
);
SignUpState copyWith({
@required bool isError,
@required bool isLoading,
@required bool isLoggedIn,
}) {
return SignUpState (
isError: isError ?? this.isError,
isLoading: isLoading ?? this.isLoading,
isLoggedIn: isLoggedIn ?? this.isLoading,
);
}
}
还有注册缩减器
signUpReducer(SignUpState prevState, SetSignUpStateAction action) {
final payload = action.signUpState;
print(action); // prints Instance of 'SetSignUpStateAction'
print(prevState); // prints Instance of 'SignUpState'
print("signUpReducer");
return prevState.copyWith(
isError: payload.isError,
isLoading: payload.isLoading,
isLoggedIn: payload.isLoggedIn,
);
}
打印语句执行
编辑2:
这是登录减速器,但这里还没有进行任何操作,我没有实现任何登录操作
loginReducer(LoginState prevState, SetLoginStateAction action) {
final payload = action.loginState;
return prevState.copyWith(
isError: payload.isError,
isLoading: payload.isLoading,
);
}
解决方案
您调度的操作将被发送到所有减速器。使用检查,您可以轻松地改变您的状态。这也将防止状态中不必要的更新。
很快你就会有多个动作被分派并按如下方式处理它们将允许你这样做。
你signUpReducer
应该看起来像这样:
signUpReducer(SignUpState prevState, dynamic action) {
if (action is SetSignUpStateAction) {
return setSignUpState(prevState, action);
}
return prevState;
}
SignUpState setSignUpState(SignUpState prevState, SetSignUpStateAction action) {
final payload = action.signUpState;
print(action); // prints Instance of 'SetSignUpStateAction'
print(prevState); // prints Instance of 'SignUpState'
print("signUpReducer");
return prevState.copyWith(
isError: payload.isError,
isLoading: payload.isLoading,
isLoggedIn: payload.isLoggedIn,
);
}
你loginReducer
应该看起来像这样:
loginReducer(LoginState prevState, dynamic action) {
if(action is SetLoginStateAction) {
return setLoginState(prevState, action);
}
return prevState;
}
LoginState setLoginState(LoginState prevState, SetLoginStateAction action) {
final payload = action.loginState;
return prevState.copyWith(
isError: payload.isError,
isLoading: payload.isLoading,
);
}
推荐阅读
- c# - 在 .Net 中使用 Web API 和 Windows 应用程序上传文件
- ef-code-first - ef core 一对多共享子表
- c# - 无法构建 Uno Platform UWP 模板项目
- selenium - 在 Flutter Web 应用中使用 Selenium 浏览器测试的策略
- soapui - 如何使用 groovy 脚本进行断言
- android - Android-Activity和Android-Fragment有什么关系;UML 类图中的 Activity/Fragment 和 ViewModel?
- python - (tf.)keras 使用可训练的词嵌入加载保存的模型权重
- angular - 当我点击一个按钮时,Angular 我得到错误表达式在检查后发生了变化
- loops - 是否可以从外部函数中停止代码/goroutine?
- javascript - 如何获得多个数组值的余数?