在 Flutter 中组合减速器

Question

我正在使用 Redux 和 Flutter this library。如果解决办法是改成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 进行测试，当我只使用那个时，它目前可以工作，当我添加另一个减速器并取消注释该行时

// 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,
  );
}

Answer 1

你派发的动作将被发送到所有的减速器。使用检查你可以很容易地改变你的状态。这也将防止状态中不必要的更新。

很快您将有多个操作被分派和处理它们将允许您这样做。

您的 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,
    );
}

在 Flutter 中组合减速器

Combine reducers in Flutter

redux

flutter

flutter-redux

flutter-web