Question

我正在将Redux与Flutter与this library一起使用。如果解决方案是更改为redux dart库，那么我将对其进行更改。

这是我为商店使用的代码，我从不同的教程中学习了一部分

product

我首先使用signUpState进行测试，当我添加另一个reducer并取消注释该行时，当前仅在使用时使用该功能

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

在尝试分派与签名相关的操作 并在上面的行中加上注释的情况下起作用 ，我得到了// 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,
    );
  }
}

打印语句执行

编辑2：

这是登录减少器，但是这里什么都没有发生，我没有执行任何登录操作

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

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中组合减速器

1 个答案: