1

我正在开发一个新的应用程序并使用状态通知器测试 Riverpod,并且有一个关于在构建页面时可以在哪里加载初始数据的问题。

我有以下状态类:

abstract class SalesOrderListState extends Equatable {
  const SalesOrderListState();

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

class SalesOrderListInitial extends SalesOrderListState {}

class SalesOrderListLoading extends SalesOrderListState {}

class SalesOrderListSuccess extends SalesOrderListState {
  final List<SalesOrderListItem> salesOrderListItems;

  SalesOrderListSuccess({
    @required this.salesOrderListItems,
  });

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

class SalesOrderListError extends SalesOrderListState {
  final String error;

  const SalesOrderListError({@required this.error});

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

这个 state_notifier 类:

final salesOrderListStateNotifierProvider =
    StateNotifierProvider<SalesOrderListStateNotifier>(
        (ref) => SalesOrderListStateNotifier(ref.read));

class SalesOrderListStateNotifier extends StateNotifier<SalesOrderListState> {
  final Reader read;

  SalesOrderListStateNotifier(this.read) : super(SalesOrderListInitial());

  Future<void> getSalesOrders() async {
    final SalesOrderListUseCase _salesOrderListUseCase =
        read(salesOrderListUseCaseProvider);

    state = SalesOrderListLoading();
    final result = await _salesOrderListUseCase.getSalesOrders();
    result.fold(
      (failure) =>
          state = SalesOrderListError(error: mapFailureToMessage(failure)),
      (salesOrderListItems) async {
          state = SalesOrderListSuccess(salesOrderListItems: salesOrderListItems);
      },
    );
  }
}

现在我的 widged 类(页面)使用这样的状态通知器:

 ...

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(),
      ),
      body: Consumer(
        builder: (context, watch, child) {
          final state = watch(salesOrderListStateNotifier.state);
          switch (state.runtimeType) {
            case SalesOrderListSuccess:
              final _salesOrders = (state as SalesOrderListSuccess).salesOrderListItems;
              ...
                 print sales orders
              ...
              );
              break;
            case SalesOrderListError:
              return MessageDisplayWidget(
                message: (state as SalesOrderListError).error,
              );
              break;
            default:
              return LoadingWidget();
          }
        },
      ),
    );
  }

但在页面加载之前,我必须打电话

context
.read(salesOrderListStateNotifierProvider)
.getSalesOrders()

最好的方法是什么?

我已经尝试过使用 statefull 小部件并像这样覆盖 initstate

void initState() {
    super.initState();
    Future.delayed(Duration.zero).then(
      (_) => context
          .read(salesOrderListStateNotifierProvider)
          .getSalesOrders(),
    );
    // WidgetsBinding.instance.addPostFrameCallback(
    //   (_) => context
    //       .read(salesOrderListStateNotifierProvider)
    //       .getSalesOrders(),
    // );
  }

这可行,但我不确定这是否是最好的方法。

我有很多页面必须在绘制数据之前加载数据,并且我不确定将所有这些页面转换为有状态的小部件以覆盖 initstate 是否是最佳解决方案。

4

2 回答 2

4

在github上@iamarnas给了我解决方案,在statenotifier构造函数中调用fetch方法

class UserNotifier extends StateNotifier<User>{
  UserNotifier() : super(User()){
    fetchData(); // It's same as initState();
  } 
}
于 2020-12-16T14:08:47.737 回答
0

我在 init 上调用 api 时遇到了同样的问题。在 initState 中使用 WidgetBinding 它将解决这个问题。

WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
 context.read(salesOrderListStateNotifierProvider).getSalesOrders()
});
于 2021-07-21T12:00:19.337 回答