如何在新版本中访问 Flutter BLoC 状态值？

Question

我是这个状态管理领域的新手。所以我试图按照本教程（How to Save Products in a Wishlist using the BloC Pattern - EP10 - The eCommerce Series）进行操作，但 mapEventToState 已被弃用，所以我不知道该怎么做。

这是我的状态：

part of 'wishlist_bloc.dart';

abstract class WishlistState extends Equatable {
  const WishlistState();

  @override
  List<Object> get props => [];
}

class WishlistLoading extends WishlistState {}

class WishlistLoaded extends WishlistState {
  final WishlistModel wishlist;

  const WishlistLoaded({this.wishlist = const WishlistModel()});

  @override
  List<Object> get props => [wishlist];
}

class WishlistError extends WishlistState {}

这是我的活动：

part of 'wishlist_bloc.dart';

abstract class WishlistEvent extends Equatable {
  const WishlistEvent();

  @override
  List<Object> get props => [];
}

class StartWishlist extends WishlistEvent {}

class AddWishlistProduct extends WishlistEvent {
  final ProductModel product;

  const AddWishlistProduct(this.product);

  @override
  List<Object> get props => [product];
}

class RemoveWishlistProduct extends WishlistEvent {
  final ProductModel product;

  const RemoveWishlistProduct(this.product);

  @override
  List<Object> get props => [product];
}

这是我的集团：

import '../models/product_model.dart';
import '../models/wishlist_model.dart';

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:equatable/equatable.dart';

part 'wishlist_event.dart';
part 'wishlist_state.dart';

class WishlistBloc extends Bloc<WishlistEvent, WishlistState> {
  WishlistBloc() : super(WishlistLoading()) {
    on<StartWishlist>(_mapStartWishlistToState);
    on<AddWishlistProduct>(_mapAddWishlistToState);
    on<RemoveWishlistProduct>(_mapRemoveWishlistToState);
  }

  void _mapStartWishlistToState(event, emit) async {
    emit(WishlistLoading());

    try {
      await Future.delayed(Duration(seconds: 1));
      emit(WishlistLoaded());
    } catch (_) {}
  }

  // Error ...

  void _mapAddWishlistToState(event, emit) async {
    if (state is WishlistLoaded) {
      try {
        emit(WishlistLoaded(
            wishlist: WishlistModel(
                products: List.from(state.wishlist.products)
                  ..add(event.product))));
      } catch (_) {}
    }
  }

  void _mapRemoveWishlistToState(event, emit) async {}
}

但是我得到了这个错误：“没有为类型 'WishlistState' 定义 getter 'wishlist'。尝试导入定义 'wishlist' 的库，将名称更正为现有 getter 的名称，或定义getter 或字段名称 'wishlist'"。

如何在新版本的flutter_bloc中访问'wishlist'？谢谢。

Answer 1

尝试在定义函数时定义参数类型。因此，您更新后的代码将如下所示：

import '../models/product_model.dart';
import '../models/wishlist_model.dart';

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:equatable/equatable.dart';

part 'wishlist_event.dart';
part 'wishlist_state.dart';

class WishlistBloc extends Bloc<WishlistEvent, WishlistState> {
  WishlistBloc() : super(WishlistLoading()) {
    on<StartWishlist>(_mapStartWishlistToState);
    on<AddWishlistProduct>(_mapAddWishlistToState);
    on<RemoveWishlistProduct>(_mapRemoveWishlistToState);
  }

  void _mapStartWishlistToState(
     // Added argument types below
     StartWishlist event, Emitter<WishlistState> emit) async {
    emit(WishlistLoading());

    try {
      await Future.delayed(Duration(seconds: 1));
      emit(WishlistLoaded());
    } catch (_) {}
  }

  void _mapAddWishlistToState(
     // Added argument types below
     AddWishlistProduct event, Emitter<WishlistState> emit) async {
    if (state is WishlistLoaded) {
      try {
        emit(WishlistLoaded(
            wishlist: WishlistModel(
                products: List.from(state.wishlist.products)
                  ..add(event.product))));
      } catch (_) {}
    }
  }

  void _mapRemoveWishlistToState(
     // Added argument types below
      RemoveWishlistProduct event, Emitter<WishlistState> emit) async {}
}

Answer 2

属性不可能进行类型提升，因为每次调用它们时都可能返回不同的值。因此，编译器不可能知道 state getter 将返回 WishlistLoaded 实例，即使在知道相同的 getter 在四行前返回 WishlistLoaded 之后也是如此。

解决此问题的一种方法是将状态分配给一个局部变量，该变量有资格进行类型提升。

  void _mapAddWishlistToState(AddWishlistProduct event, Emitter<WishlistState> emit) async {
    final state = this.state; // local variable
    if (state is WishlistLoaded) {
      try {
        emit(WishlistLoaded(
            wishlist: WishlistModel(
                products: List.from(state.wishlist.products)
                  ..add(event.product))));
      } catch (_) {}
    }
  }

链接的视频使用了一个参数，该参数也符合类型推广的条件。如果它直接在_mapAddWishlistProductToState 中使用了state getter，也会遇到同样的错误。

Answer 3

你只需要将你的状态转换为如下

void _mapAddWishlistToState(event, emit) async {
    if (state is WishlistLoaded) {
      try {
        emit(WishlistLoaded(
            wishlist: WishlistModel(
                products: List.from((state as WishlistLoaded).wishlist.products)
                  ..add(event.product))));
      } catch (_) {}
    }
  }