Trong Flutter có rất nhiều các quản lý state: Provider, Bloc, GetX, Redux,… khó mà nói cái nào tốt hơn cái nào. Tuy nhiên nếu bạn đã làm quen với Provider thì không ngại để tìm hiểu thêm về Riverpod. Một bản nâng cấp của Provider. Nếu bạn để ý thì cái tên “Riverpod” là các chữ cái của “Provider” được sắp xếp lại.
Provider không hoàn hảo nó có một số vấn đề sau
Thứ nhất, Provider phụ thuộc vào Flutter vì bạn đang sử dụng các widget của Flutter để cung cấp các đối tượng trong widget tree.
Thứ hai, Provider chỉ dựa vào “type” để giải quyết đối tượng được yêu cầu. Nếu bạn cung cấp hai đối tượng cùng “type”, bạn chỉ có thể nhận được object gần địa điểm gọi hơn.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">class</span> <span class="token class-name">MyWidget</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">Provider</span><span class="token punctuation">(</span> create<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'A String far away.'</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Provider</span><span class="token punctuation">(</span> create<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'A String that is close.'</span><span class="token punctuation">,</span> builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> child<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Displays 'A String that is close.'</span> <span class="token comment">// There's no way to obtain 'A String far away.'</span> <span class="token keyword">return</span> <span class="token function">Text</span><span class="token punctuation">(</span>Provider<span class="token punctuation">.</span>of<span class="token operator"><</span>String<span class="token operator">></span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Cuối cùng, nếu bạn cố gắng truy cập vào một “type” không được cung cấp, bạn sẽ chỉ gặp lỗi khi chạy. Điều này không phải là lý tưởng vì chúng ta phải luôn cố gắng bắt càng nhiều lỗi càng tốt tại thời điểm compile-time.
Riverpod thì giải quyết được những vẫn đề đó:
- Compile safe : Không còn ProviderNotFoundException hoặc quên xử lý các trạng thái loading. Sử dụng Riverpod, nếu code đã được biên dịch, nó sẽ hoạt động.
- Provider, without its limitations: Riverpod có hỗ trợ multiple provider có cùng type; kết hợp các providers không đồng bộ; thêm providers từ mọi nơi, …
- Không phụ thuộc vào Flutter:
Create/share/tests providers, with no dependency on Flutter. This includes being able to listen to providers without aBuildContext. không phụ thuộc vào Flutter. Điều này bao gồm việc có thể listen providers mà không cần một BuildContext.
Cơ bản về Riverpod
Đầu tiên ta cần add thêm package riverpod làm phụ thuộc vào dự án Flutter của bạn. Trong bài này, ta sẽ sử dụng flutter_riverpod, đây là cách nếu bạn muốn chỉ sử dụng Flutter.
1 2 3 | <span class="token key atrule">dependencies</span><span class="token punctuation">:</span> <span class="token key atrule">flutter_riverpod</span><span class="token punctuation">:</span> ^0.12.4 |
Riverpod’s Providers không được đặt trong widget tree. Thay vào đó, chúng là các biến toàn cục nằm ở bất kỳ file nào mà bạn muốn.
1 2 | <span class="token keyword">final</span> greetingProvider <span class="token operator">=</span> <span class="token function">Provider</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Hello Riverpod!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Provider đơn giản nhất này có thể cung cấp một giá trị read-only. Có nhiều loại Providers khác nữa để làm việc với Futures, Streams, ChangeNotifier, StateNotifier,…
Tham số ref có kiểu ProviderReference. Bạn sẽ thấy ở phần sau, nó chủ yếu được sử dụng để giải quyết sự phụ thuộc giữa các Provider.
Mặc dù Provider object có thể truy cập toàn cục, nhưng điều này không có nghĩa là provided object (trong trường hợp này là chuỗi “Hello Riverpod!”) là global. Giống như với một hàm toàn cục, bạn có thể gọi nó từ bất cứ đâu nhưng giá trị trả về cũng có thể trở thành phạm vi cục bộ. Hãy xem xét đoạn code sau:
1 2 3 4 5 6 7 8 9 10 | String <span class="token function">globalFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'some value'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">MyClass</span> <span class="token punctuation">{</span> <span class="token keyword">void</span> <span class="token function">_classMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> valueLocalToThisMethod <span class="token operator">=</span> <span class="token function">globalFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Where are the widgets!?
Mặc dù có một tin tuyệt vời là các Providers của Riverpod không phụ thuộc vào Flutter, nhưng chúng ta vẫn cần sử dụng giá trị được cung cấp bởi một Provider object từ widget tree – suy cho cùng thì đây vẫn là Flutter.
Gói Riverpod chỉ đi kèm với một InheritedWidget duy nhất cần được đặt phía trên toàn bộ widget trê được gọi là ProviderScope. Nó chịu trách nhiệm giữ một thứ gọi là ProviderContainer, thứ này có trách nhiệm lưu trữ trạng thái của các đối tượng Provider riêng lẻ.
1 2 3 4 5 6 7 8 | <span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">runApp</span><span class="token punctuation">(</span> <span class="token function">ProviderScope</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Watching a provider
Làm cách nào để chúng ta lấy được string từ greetingProvider để có thể hiển thị trong Text? Thực tế có hai cách để làm điều đó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token string">'Riverpod Tutorial'</span><span class="token punctuation">,</span> home<span class="token punctuation">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> appBar<span class="token punctuation">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Riverpod Tutorial'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'greeting goes here'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Cách đầu tiên là thay đổi superclass tiện thành ConsumerWidget đến từ gói flutter_riverpod. Điều này thêm một chức năng ScopedReader vào build method. Widget sẽ được rebuild nếu có bất kỳ sự thay đổi nào xảy ra.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">ConsumerWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">,</span> ScopedReader watch<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Gets the string from the provider and causes</span> <span class="token comment">// the widget to rebuild when the value changes.</span> <span class="token keyword">final</span> greeting <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>greetingProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token string">'Riverpod Tutorial'</span><span class="token punctuation">,</span> home<span class="token punctuation">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> appBar<span class="token punctuation">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Riverpod Tutorial'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span>greeting<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Cách khác để nhận được giá trị từ provider là dùng Consumer , cách này sẽ hữu ích nếu bạn muốn nhanh chóng tối ưu hóa việc xây dựng lại tiện ích con của mình, không muốn các widget khác cũng phải rebuild lại theo. Trong trường hợp này ta chỉ cần xây dựng lại Text widget bản bị ảnh hưởng trên toàn bộ cây tiện ích.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token string">'Riverpod Tutorial'</span><span class="token punctuation">,</span> home<span class="token punctuation">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> appBar<span class="token punctuation">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Riverpod Tutorial'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Consumer</span><span class="token punctuation">(</span> builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> child<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> greeting <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>greetingProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">Text</span><span class="token punctuation">(</span>greeting<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Reading a provider
Đôi khi, không thể gọi “watch” vì bạn không ở trong phương thức build. Hoặc bạn chỉ muốn lấy giá trị từ provider ra chứ không muốn widget sẽ rebuild. Ví dụ: bạn có thể muốn thực hiện một hành động khi một nút được nhấn. Đó là khi bạn có thể gọi context.read(). Dưới đây là một loại provider khác – ChangeNotifierProvider:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">class</span> <span class="token class-name">IncrementNotifier</span> <span class="token keyword">extends</span> <span class="token class-name">ChangeNotifier</span> <span class="token punctuation">{</span> int _value <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> int <span class="token keyword">get</span> value <span class="token operator">=</span><span class="token operator">></span> _value<span class="token punctuation">;</span> <span class="token keyword">void</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> _value <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token function">notifyListeners</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">final</span> incrementProvider <span class="token operator">=</span> <span class="token function">ChangeNotifierProvider</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">IncrementNotifier</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Ta sẽ lấy ví dụ với Counter App. Text widget sẽ theo “watch” provider và tự động được rebuilt nếu xảy ra thay đổi và FloatingActionButton sẽ chỉ đọc provider để gọi phương thức increment () trên đó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token string">'Riverpod Tutorial'</span><span class="token punctuation">,</span> home<span class="token punctuation">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Consumer</span><span class="token punctuation">(</span> builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> child<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> incrementNotifier <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>incrementProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">Text</span><span class="token punctuation">(</span>incrementNotifier<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> floatingActionButton<span class="token punctuation">:</span> <span class="token function">FloatingActionButton</span><span class="token punctuation">(</span> onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> context<span class="token punctuation">.</span><span class="token function">read</span><span class="token punctuation">(</span>incrementProvider<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Icon</span><span class="token punctuation">(</span>Icons<span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Những điều không thể làm với Provider ‘original’
Riverpod’s providers objects không dựa vào types để tìm kiếm các provider => có nhiều provider cùng type mà không gặp vấn đề gì
1 2 3 4 5 6 7 | <span class="token keyword">final</span> firstStringProvider <span class="token operator">=</span> <span class="token function">Provider</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'First'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">final</span> secondStringProvider <span class="token operator">=</span> <span class="token function">Provider</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Second'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Somewhere inside a ConsumerWidget</span> <span class="token keyword">final</span> first <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>firstStringProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">final</span> second <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>secondStringProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Dependency giữa các providers
Bất kỳ ứng dụng nào trong thực tế đều có sự phụ thuộc giữa các lớp. Ví dụ: bạn có thể có ChangeNotifier phụ thuộc vào Repository,mà nó lại phụ thuộc vào HttpClient. Xử lý các phụ thuộc như vậy với Riverpod rất đơn giản và dễ đọc.
Với ví dụ đơn giản sau, chỉ có một FutureProvider phụ thuộc trực tiếp vào một FakeHttpClient. Việc getting một provider khác bên trong function của provider được thực hiện bằng cách gọi read trên tham số ProviderReference – ref luôn được chuyển vào. Nếu bạn phụ thuộc vào provider có giá trị có thể thay đổi, bạn cũng có thể gọi watch.
FutureProvider : gần giống như Provider nhưng nó sẽ trả về 1 Future.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">class</span> <span class="token class-name">FakeHttpClient</span> <span class="token punctuation">{</span> Future<span class="token operator"><</span>String<span class="token operator">></span> <span class="token keyword">get</span><span class="token punctuation">(</span>String url<span class="token punctuation">)</span> <span class="token keyword">async</span> <span class="token punctuation">{</span> <span class="token keyword">await</span> Future<span class="token punctuation">.</span><span class="token function">delayed</span><span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token function">Duration</span><span class="token punctuation">(</span>seconds<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token string">'Response from $url'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">final</span> fakeHttpClientProvider <span class="token operator">=</span> <span class="token function">Provider</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">FakeHttpClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">final</span> responseProvider <span class="token operator">=</span> FutureProvider<span class="token operator"><</span>String<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token keyword">async</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> httpClient <span class="token operator">=</span> ref<span class="token punctuation">.</span><span class="token function">read</span><span class="token punctuation">(</span>fakeHttpClientProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> httpClient<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'https://resocoder.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Sử dụng các giá trị từ FutureProvider từ UI là hoàn toàn thú vị. Đã qua rồi thời của những FutureBuilders vụng về! Riverpod giúp việc xây dựng các widgets dựa trên Future là dễ dàng.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span> title<span class="token punctuation">:</span> <span class="token string">'Riverpod Tutorial'</span><span class="token punctuation">,</span> home<span class="token punctuation">:</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> body<span class="token punctuation">:</span> <span class="token function">Center</span><span class="token punctuation">(</span> child<span class="token punctuation">:</span> <span class="token function">Consumer</span><span class="token punctuation">(</span> builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> child<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> responseAsyncValue <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span>responseProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> responseAsyncValue<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> data<span class="token punctuation">:</span> <span class="token punctuation">(</span>_<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">Text</span><span class="token punctuation">(</span>_<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span> loading<span class="token punctuation">:</span> <span class="token punctuation">(</span>_<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">CircularProgressIndicator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> error<span class="token punctuation">:</span> <span class="token punctuation">(</span>_<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">Text</span><span class="token punctuation">(</span> _<span class="token punctuation">.</span>error<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>red<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Passing arguments to providers
Nếu bạn muốn chuyển một URL do người dùng xác định đến responseProvider? Hãy dùng family, thay đổi responseProvider thành như sau …
1 2 3 4 5 6 | <span class="token keyword">final</span> responseProvider <span class="token operator">=</span> FutureProvider<span class="token punctuation">.</span>family<span class="token operator"><</span>String<span class="token punctuation">,</span> String<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">,</span> url<span class="token punctuation">)</span> <span class="token keyword">async</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> httpClient <span class="token operator">=</span> ref<span class="token punctuation">.</span><span class="token function">read</span><span class="token punctuation">(</span>fakeHttpClientProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> httpClient<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
1 2 | <span class="token keyword">final</span> responseAsyncValue <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token function">responseProvider</span><span class="token punctuation">(</span><span class="token string">'https://resocoder.com'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Automatically disposing of state
Bộ nhớ đệm cho provider’s state là rất tuyệt nhưng đôi khi bạn muốn hủy trạng thái của một provider khi nó không còn được sử dụng nữa vì nhiều lý do như:
- Khi sử dụng Firebase, bạn muốn đóng connect để tránh các phí phát sinh
- Để thiết lập lại trạng thái khi người dùng rời khỏi màn hình và vào lại.
…..
1 2 3 4 5 6 | <span class="token keyword">final</span> responseProvider <span class="token operator">=</span> FutureProvider<span class="token punctuation">.</span>autoDispose<span class="token punctuation">.</span>family<span class="token operator"><</span>String<span class="token punctuation">,</span> String<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">(</span>ref<span class="token punctuation">,</span> url<span class="token punctuation">)</span> <span class="token keyword">async</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> httpClient <span class="token operator">=</span> ref<span class="token punctuation">.</span><span class="token function">read</span><span class="token punctuation">(</span>fakeHttpClientProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> httpClient<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
autoDispose sẽ loại bỏ provider’s state ngay khi provider không được sử dụng. Trong ví dụ trên, điều này xảy ra ta thay đổi đối số được truyền vào provider family. Tuy nhiên, autoDispose hữu ích ngay cả khi bạn không sử dụng family modifier. Trong trường hợp đó, việc xóa bỏ được bắt đầu khi ConsumerWidget một provider bị disposed.
Tổng kết
Bài viết này đã giới thiệu cơ bản về Riverpod. Nếu ban muốn ngụp lặn sâu hơn thì có thể tìm hiểu thêm ở đây
Nguồn tham khảo: