簡體   English   中英

Flutter riverpod 自動 state 根據事件變化

[英]Flutter riverpod automatic state change based on event

我是riverpod的新手,雖然這些文章對入門很有幫助,但我正在為陳舊的state而苦苦掙扎。

當用戶登錄時,我正在設置一些 state。 當 DB 中 state 的詳細信息發生更改時,我希望自動進行重建。 雖然我能夠從數據庫中獲得 stream,但我無法將數據庫更改連接到 Riverpod state。

該模式用於協作。 兩個用戶在獨立的手機、平板電腦等上處理應用程序的同一部分。

我正在使用文檔 stream 並從 firecloudstore 收集流。

任何有用的文章或您如何使用 Riverpod 解決此問題? 我是否必須為此花時間學習 BLoC 之類的東西?

你絕對不需要學習 BLoC 來完成你所追求的。

你說你正在使用 firebase 流,所以這里有一個當你的數據發生變化時實時重建的例子。

首先,您的存儲庫層。

class YourRepository {
  YourRepository(this._read);

  static final provider = Provider((ref) => YourRepository(ref.read));
  
  final Reader _read;

  Stream<YourModel?> streamById(String id) {
    final stream = FirebaseFirestore.instance.collection('YourCollection').doc(id).snapshots();
    return stream.map((event) => event.exists ? YourModel.fromJson(event.data()!) : null);
  }
}

接下來,定義一個讀取存儲庫中定義的 stream 的 StreamProvider。

final streamYourModelById = StreamProvider.autoDispose.family<YourModel?, String>((ref, id) {
  return ref.watch(YourRepository.provider).streamById(id);
});

最后,使用小部件中的 StreamProvider 在數據更改時重新加載。

// Hooks
class YourWidget extends HookWidget {
  const YourWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: useProvider(streamYourModelById('YourDataId')).when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (err, stack) => Center(child: Text(err.toString())),
        data: (yourData) => Center(child: Text(yourData?.toString() ?? 'Got Null')),
      ),
    );
  }
}

// Without Hooks
class YourWidget extends ConsumerWidget {
  const YourWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    return Scaffold(
      body: watch(streamYourModelById('YourDataId')).when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (err, stack) => Center(child: Text(err.toString())),
        data: (yourData) => Center(child: Text(yourData?.toString() ?? 'Got Null')),
      ),
    );
  }
}

您應該能夠應用此模式來完成您需要的任何事情。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM