{"id":360183,"date":"2024-05-21T00:48:06","date_gmt":"2024-05-21T00:48:06","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=360183"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T00:48:06","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=360183","title":{"rendered":"<span>\u041f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0439 State Management \u0434\u043b\u044f Flutter<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u041f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u044f<\/h2>\n<p>\u042f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0438\u0441\u0430\u043b \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 Flutter (\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 1.2) \u0438 \u0443\u0441\u043f\u0435\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043a State Management&#8217;\u0443 (\u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430):<\/p>\n<ul>\n<li>\n<p>Streams \u0438 <a href=\"https:\/\/pub.dev\/packages\/rxdart\" rel=\"noopener noreferrer nofollow\">rxdart<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/bloclibrary.dev\/\" rel=\"noopener noreferrer nofollow\">BLoC<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/pub.dev\/packages\/provider\" rel=\"noopener noreferrer nofollow\">Provider<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/riverpod.dev\/\" rel=\"noopener noreferrer nofollow\">riverpod<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0435 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u044f \u0431\u044b\u043b \u043e\u0442 \u043d\u0438\u0445 \u0432 \u0432\u043e\u0441\u0442\u043e\u0440\u0433\u0435, \u043d\u043e \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438 \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 UI \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443. <\/p>\n<p>\u0422\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u043e \u0437\u043e\u0432\u0443 \u0434\u043e\u043b\u0433\u0430 \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0438\u0441\u0430\u0442\u044c Web \u043d\u0430 React + MobX, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u044f \u043f\u043e\u043d\u044f\u043b, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043d\u044f \u0441\u043a\u043e\u0432\u044b\u0432\u0430\u043b\u0438 \u0440\u0430\u043c\u043a\u0438 \u0438 \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432\u043e Flutter. <\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c \u0441 MobX, Counter \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">class CounterViewModel {   @observable   count = 0    constructor() {     makeObservable(this);   }    @action   increment = () => {     count++;   }; }  const CounterButton = observer(props => {   return &lt;div onclick={props.vm.increment}>{props.vm.count}&lt;\/div>; });<\/code><\/pre>\n<p>\u041d\u0438\u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438, \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 &#8212; \u043f\u0438\u0448\u0435\u0448\u044c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u044f <code>observable<\/code> &#8212; \u0438 \u0441\u043b\u0443\u0448\u0430\u0435\u0448\u044c \u0438\u0445 \u0432 &#171;\u0432\u0438\u0434\u0436\u0435\u0442\u0435&#187;. \u0414\u043b\u044f \u043c\u0435\u043d\u044f \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043a\u0430\u043a \u0433\u043b\u043e\u0442\u043e\u043a \u0441\u0432\u0435\u0436\u0435\u0433\u043e \u0432\u043e\u0437\u0434\u0443\u0445\u0430.<\/p>\n<p>\u041f\u043e \u043b\u0438\u0447\u043d\u044b\u043c \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f\u043c \u044f \u0441\u0442\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0438 \u043c\u0435\u043d\u044c\u0448\u0435 \u0443\u0441\u0442\u0430\u0432\u0430\u0442\u044c, \u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0442\u043e, \u0447\u0442\u043e \u044f \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043c\u043e\u0433 \u0441\u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0442\u043e\u043c, &#171;\u0447\u0442\u043e&#187; \u044f \u0445\u043e\u0447\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0430 \u043d\u0435 &#171;\u043a\u0430\u043a&#187;.<\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0432 MobX \u043c\u043d\u0435 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u043b\u0438\u0441\u044c 3 \u0432\u0435\u0449\u0438:<\/p>\n<ul>\n<li>\n<p>\u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c <code>observable<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u0432 99% \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043d\u043e \u044d\u0442\u043e\u0442 1% &#8212; \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u043b \u043c\u0435\u043d\u044f \u0437\u0430\u043b\u0435\u0437\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c <code>mobx<\/code> \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u043e\u043d \u0443\u0441\u0442\u0440\u043e\u0435\u043d<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 \u0432\u044b\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u0430\u044f \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0441\u0442\u044c &#8212; \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e, \u0430 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u0430\u044f &#8212; &#171;\u0434\u043e\u0441\u0442\u0430\u043b&#187; property \u043d\u0435 \u0432 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0443\u0436\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u043b &#171;\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c&#187;.<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u044f \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u043b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 <code>observer<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0435\u0440\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0437\u0430 Flutter, \u044f \u0437\u0430\u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c MobX &#8212; \u043d\u043e \u0431\u044b\u043b \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0443\u0434\u0438\u0432\u043b\u0435\u043d \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434. \u041d\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 50 \u0442\u044b\u0441\u044f\u0447 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 `build_runner watch` \u043d\u0430 M1 Pro \u0432\u044b\u0434\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432 <a href=\"https:\/\/pub.dev\/packages\/freezed\" rel=\"noopener noreferrer nofollow\">freezed<\/a> \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<pre><code>[INFO] Starting Build [INFO] Updating asset graph completed, took 4ms [INFO] Running build completed, took 10.1s [INFO] Caching finalized dependency graph completed, took 283ms [INFO] Succeeded after 10.3s with 75 outputs (365 actions)<\/code><\/pre>\n<p>\u0422\u043e\u0433\u0434\u0430 \u044f \u0438 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c &#171;\u0441\u0432\u043e\u0439&#187; <code>mobx<\/code>&#8230;<\/p>\n<h2>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/h2>\n<ol>\n<li>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 <a href=\"https:\/\/pub.dev\/packages\/beholder_flutter\" rel=\"noopener noreferrer nofollow\">\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<\/a>:<\/p>\n<pre><code class=\"dart\">import \"package:beholder_flutter\/beholder_flutter.dart\";<\/code><\/pre>\n<\/li>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435 <code>ViewModel<\/code>  \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 <strong>\u043c\u0435\u0442\u043e\u0434<\/strong> <code>state<\/code><\/p>\n<pre><code class=\"dart\">class CounterViewModel extends ViewModel {   late final count = state(0);   void increment() => count.value++; }<\/code><\/pre>\n<\/li>\n<li>\n<p>\u0421\u043b\u0443\u0448\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Observer<\/code> \u0432\u0438\u0434\u0436\u0435\u0442\u0430:<\/p>\n<pre><code class=\"dart\">\/\/ \u0412\u043d\u0443\u0442\u0440\u0438 StatefulWidget final vm = CounterViewModel();  \/\/ ...  @override Widget build(BuildContext context) {   return Observer(     builder: (context, watch) {       final count = watch(vm.count);       return ElevatedButton(         onPressed: vm.increment,         child: Text(\"$count\"),       );      },   ); }  \/\/ ...<\/code><\/pre>\n<\/li>\n<\/ol>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435?<\/h2>\n<h4>Riverpod<\/h4>\n<ul>\n<li>\n<p>\u041d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u043e \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435\u043c DI \u0438 State Management&#8217;\u0430. <\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0441\u043e\u0440\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043a\u043e\u0443\u043f\u0430<\/p>\n<\/li>\n<li>\n<p>\u0422\u044f\u0436\u0435\u043b\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c &#8212; \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c State\/Future\/Stream \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u043d\u0430 StateNotifier<\/p>\n<\/li>\n<\/ul>\n<h4>BLoC<\/h4>\n<ul>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 copyWith. <\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c Cubit \u0438 Bloc &#8212; \u0438\u043d\u043e\u0433\u0434\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0438\u0437 event&#8217;\u043e\u0432 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 debounce&#8217;\u0430, \u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u0447\u0435\u0440\u0435\u0437 Event&#8217;\u044b, \u043b\u0438\u0431\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u0435\u0434\u0438\u043d\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u043d\u0430 2 \u0447\u0430\u0441\u0442\u0438 (cubit \u0438 bloc). <\/p>\n<\/li>\n<li>\n<p> \u0421\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e, \u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 Event&#8217;\u043e\u0432 \u0438 State&#8217;\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u044d\u043d\u0442\u0435\u0440\u043f\u0440\u0430\u0439\u0437 Java: <code>class RefreshPostsHomeScreenEvent<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u042f \u043c\u043e\u0433 \u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043d\u043e \u0432\u044b, \u043a\u0430\u043a \u043f\u0440\u043e\u0436\u0436\u0451\u043d\u043d\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0425\u0430\u0431\u0440\u0430, \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u044f \u0441\u043c\u043e\u0433\u0443 \u043d\u0430\u0439\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 <a href=\"https:\/\/neolurk.org\/wiki\/%D0%A4%D0%B0%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BE%D0%BA\" rel=\"noopener noreferrer nofollow\">\u0444\u0430\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a<\/a>.<\/p>\n<h2>\u0412\u044b \u0435\u0449\u0435 \u0437\u0434\u0435\u0441\u044c? \u0422\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0444\u0438\u0447\u0430\u043c<\/h2>\n<h4>\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439:<\/h4>\n<pre><code class=\"dart\">class User { \/* .. *\/ } class SearchUsersScreen extends ViewModel {   late final search = state('');   late final users = state(&lt;User>[]);    \/\/\/ `computed` \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 `state`\u043e\u0432    \/\/\/ \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 `computed`\u043e\u0432   late final lowercaseSearch = computed((watch) {     return watch(search).toLowerCase();   });      late final filteredUsers = computed((watch) {     return watch(users).where((user) {       final name = user.fullName.toLowerCase();       return name.contains(watch(lowercaseSearch));     }).toList();   })    \/\/\/ `computedFactory` - \u044d\u0442\u043e computed, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0449\u0435 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0443\u043c\u0435\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c   late final userById = computedFactory((watch, int id) {     return watch(users).singleWhere((user) => user.id == id);   }); }<\/code><\/pre>\n<h4>&#171;\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u0436\u0435\u0442&#187; &#8212; \u0441\u043a\u0430\u0436\u0435\u0442\u0435 \u0412\u044b, \u043d\u043e \u0442\u0443\u0442 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u044d\u0442\u043e:<\/h4>\n<pre><code class=\"dart\">import \"dart:async\";  \/\/ ... class SearchUsersScreen extends ViewModel {   Timer? timer;      late final search = state('')     ..listen((previous, current) {       timer?.cancel();       timer = Timer(         Duration(seconds: 1),         () => refresh(),       );     });    \/\/ AsyncValue \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.    late final users = state&lt;AsyncValue&lt;List&lt;User>>>(const Loading());      Future&lt;void> refresh()  async {     users       ..value = Loading()       ..value = await Result.guard(         () => ApiClient.fetchUsers(query: search.value)       );   }    \/\/ ... }<\/code><\/pre>\n<p>\u0427\u0442\u043e \u043d\u0430\u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u0435\u0435 <code>computed<\/code>&#8216;\u043e\u0432? \u041a\u0430\u043a \u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>users<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u043b <code>AsyncValue<\/code>? <\/p>\n<p>\u0410 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"dart\">late final filteredUsers = computed&lt;AsyncValue&lt;List&lt;User>>>((watch) {   return watch(users).mapValue((users) => users.where((user) {     final name = user.fullName.toLowerCase();     return name.contains(watch(lowercaseSearch));   }).toList()); })<\/code><\/pre>\n<p>\u0412\u0438\u0434\u0436\u0435\u0442 \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"dart\">Widget build(BuildContext context) {   return Observer(     builder: (context, watch) {       final users = watch(vm.filteredUsers);       return switch(users) {           Loading() => CircularProgressIndicator(),           Data(value: final users) => ListView(\/* .. *\/),           Failure(:final error) => Text(\"Error: \"),       };     }   ); }<\/code><\/pre>\n<p><em>\u0422.\u043a. <\/em><code>AsyncValue<\/code><em> &#8212; \u044d\u0442\u043e <\/em><code>sealed union<\/code><em>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0435 \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b. \u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e Pattern Matching &#8212; <\/em><a href=\"https:\/\/dart.dev\/language\/patterns\" rel=\"noopener noreferrer nofollow\"><em>\u0437\u0434\u0435\u0441\u044c<\/em><\/a><em>.<\/em><\/p>\n<h2>\u041a\u0430\u043a \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c?<\/h2>\n<p><code>ViewModel<\/code> \u043b\u0435\u0433\u043a\u043e \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c <a href=\"https:\/\/en.wikipedia.org\/wiki\/Composition_over_inheritance\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438<\/a>(en):<\/p>\n<pre><code class=\"dart\">class UsersViewModel extends ViewModel {   UsersViewModel(this.projectId);      final Observable&lt;int> projectId;      late final _users = state(&lt;User>[]);    late final filteredUsers = computed((watch) {     final projectId = watch(this.projectId);     return watch(users)       .where((user) => user.projects.contains(projectId))       .toList();   }); }  class TaskTrackerScreenViewModel extends ViewModel {   late final searchUsersVm = SearchUsersViewModel(this.selectedProjectId);    \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 projectId \u0441\u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 filteredUsers   late final selectedProjectId = state(32); }<\/code><\/pre>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 Habr (\u0438 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435). \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438.  \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u043b\u044e\u0431\u043e\u043c\u0443 \u0444\u0438\u0434\u0431\u0435\u043a\u0443 &#8212; \u0438 \u043f\u043e \u0441\u0442\u0430\u0442\u044c\u0435, \u0438 \u043f\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. <\/p>\n<p>API \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e stable, \u043d\u043e \u0432\u044b\u043f\u0443\u0441\u043a 1.0.0 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 100% test coverage. <\/p>\n<p><a href=\"https:\/\/github.com\/AlexanderFarkas\/beholder\" rel=\"noopener noreferrer nofollow\">Github<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/773980\/\"> https:\/\/habr.com\/ru\/articles\/773980\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u041f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u044f<\/h2>\n<p>\u042f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0438\u0441\u0430\u043b \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 Flutter (\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 1.2) \u0438 \u0443\u0441\u043f\u0435\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043a State Management&#8217;\u0443 (\u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430):<\/p>\n<ul>\n<li>\n<p>Streams \u0438 <a href=\"https:\/\/pub.dev\/packages\/rxdart\" rel=\"noopener noreferrer nofollow\">rxdart<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/bloclibrary.dev\/\" rel=\"noopener noreferrer nofollow\">BLoC<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/pub.dev\/packages\/provider\" rel=\"noopener noreferrer nofollow\">Provider<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/riverpod.dev\/\" rel=\"noopener noreferrer nofollow\">riverpod<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0435 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u044f \u0431\u044b\u043b \u043e\u0442 \u043d\u0438\u0445 \u0432 \u0432\u043e\u0441\u0442\u043e\u0440\u0433\u0435, \u043d\u043e \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438 \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 UI \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443. <\/p>\n<p>\u0422\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u043e \u0437\u043e\u0432\u0443 \u0434\u043e\u043b\u0433\u0430 \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0438\u0441\u0430\u0442\u044c Web \u043d\u0430 React + MobX, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u044f \u043f\u043e\u043d\u044f\u043b, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043d\u044f \u0441\u043a\u043e\u0432\u044b\u0432\u0430\u043b\u0438 \u0440\u0430\u043c\u043a\u0438 \u0438 \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432\u043e Flutter. <\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c \u0441 MobX, Counter \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">class CounterViewModel {   @observable   count = 0    constructor() {     makeObservable(this);   }    @action   increment = () => {     count++;   }; }  const CounterButton = observer(props => {   return &lt;div onclick={props.vm.increment}>{props.vm.count}&lt;\/div>; });<\/code><\/pre>\n<p>\u041d\u0438\u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438, \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 &#8212; \u043f\u0438\u0448\u0435\u0448\u044c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u044f <code>observable<\/code> &#8212; \u0438 \u0441\u043b\u0443\u0448\u0430\u0435\u0448\u044c \u0438\u0445 \u0432 &#171;\u0432\u0438\u0434\u0436\u0435\u0442\u0435&#187;. \u0414\u043b\u044f \u043c\u0435\u043d\u044f \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043a\u0430\u043a \u0433\u043b\u043e\u0442\u043e\u043a \u0441\u0432\u0435\u0436\u0435\u0433\u043e \u0432\u043e\u0437\u0434\u0443\u0445\u0430.<\/p>\n<p>\u041f\u043e \u043b\u0438\u0447\u043d\u044b\u043c \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u044f\u043c \u044f \u0441\u0442\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0438 \u043c\u0435\u043d\u044c\u0448\u0435 \u0443\u0441\u0442\u0430\u0432\u0430\u0442\u044c, \u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0442\u043e, \u0447\u0442\u043e \u044f \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043c\u043e\u0433 \u0441\u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0442\u043e\u043c, &#171;\u0447\u0442\u043e&#187; \u044f \u0445\u043e\u0447\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0430 \u043d\u0435 &#171;\u043a\u0430\u043a&#187;.<\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0432 MobX \u043c\u043d\u0435 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u043b\u0438\u0441\u044c 3 \u0432\u0435\u0449\u0438:<\/p>\n<ul>\n<li>\n<p>\u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c <code>observable<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u0432 99% \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043d\u043e \u044d\u0442\u043e\u0442 1% &#8212; \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u043b \u043c\u0435\u043d\u044f \u0437\u0430\u043b\u0435\u0437\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c <code>mobx<\/code> \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u043e\u043d \u0443\u0441\u0442\u0440\u043e\u0435\u043d<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 \u0432\u044b\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u0430\u044f \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0441\u0442\u044c &#8212; \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e, \u0430 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u0430\u044f &#8212; &#171;\u0434\u043e\u0441\u0442\u0430\u043b&#187; property \u043d\u0435 \u0432 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0443\u0436\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u043b &#171;\u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c&#187;.<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u044f \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u043b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 <code>observer<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0435\u0440\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0437\u0430 Flutter, \u044f \u0437\u0430\u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c MobX &#8212; \u043d\u043e \u0431\u044b\u043b \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0443\u0434\u0438\u0432\u043b\u0435\u043d \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434. \u041d\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 50 \u0442\u044b\u0441\u044f\u0447 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 `build_runner watch` \u043d\u0430 M1 Pro \u0432\u044b\u0434\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432 <a href=\"https:\/\/pub.dev\/packages\/freezed\" rel=\"noopener noreferrer nofollow\">freezed<\/a> \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<pre><code>[INFO] Starting Build [INFO] Updating asset graph completed, took 4ms [INFO] Running build completed, took 10.1s [INFO] Caching finalized dependency graph completed, took 283ms [INFO] Succeeded after 10.3s with 75 outputs (365 actions)<\/code><\/pre>\n<p>\u0422\u043e\u0433\u0434\u0430 \u044f \u0438 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c &#171;\u0441\u0432\u043e\u0439&#187; <code>mobx<\/code>&#8230;<\/p>\n<h2>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/h2>\n<ol>\n<li>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 <a href=\"https:\/\/pub.dev\/packages\/beholder_flutter\" rel=\"noopener noreferrer nofollow\">\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<\/a>:<\/p>\n<pre><code class=\"dart\">import \"package:beholder_flutter\/beholder_flutter.dart\";<\/code><\/pre>\n<\/li>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435 <code>ViewModel<\/code>  \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 <strong>\u043c\u0435\u0442\u043e\u0434<\/strong> <code>state<\/code><\/p>\n<pre><code class=\"dart\">class CounterViewModel extends ViewModel {   late final count = state(0);   void increment() => count.value++; }<\/code><\/pre>\n<\/li>\n<li>\n<p>\u0421\u043b\u0443\u0448\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Observer<\/code> \u0432\u0438\u0434\u0436\u0435\u0442\u0430:<\/p>\n<pre><code class=\"dart\">\/\/ \u0412\u043d\u0443\u0442\u0440\u0438 StatefulWidget final vm = CounterViewModel();  \/\/ ...  @override Widget build(BuildContext context) {   return Observer(     builder: (context, watch) {       final count = watch(vm.count);       return ElevatedButton(         onPressed: vm.increment,         child: Text(\"$count\"),       );      },   ); }  \/\/ ...<\/code><\/pre>\n<\/li>\n<\/ol>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435?<\/h2>\n<h4>Riverpod<\/h4>\n<ul>\n<li>\n<p>\u041d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u043e \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435\u043c DI \u0438 State Management&#8217;\u0430. <\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0441\u043e\u0440\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043a\u043e\u0443\u043f\u0430<\/p>\n<\/li>\n<li>\n<p>\u0422\u044f\u0436\u0435\u043b\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c &#8212; \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c State\/Future\/Stream \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u043d\u0430 StateNotifier<\/p>\n<\/li>\n<\/ul>\n<h4>BLoC<\/h4>\n<ul>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 copyWith. <\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c Cubit \u0438 Bloc &#8212; \u0438\u043d\u043e\u0433\u0434\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0438\u0437 event&#8217;\u043e\u0432 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 debounce&#8217;\u0430, \u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438\u0431\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u0447\u0435\u0440\u0435\u0437 Event&#8217;\u044b, \u043b\u0438\u0431\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u0435\u0434\u0438\u043d\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u043d\u0430 2 \u0447\u0430\u0441\u0442\u0438 (cubit \u0438 bloc). <\/p>\n<\/li>\n<li>\n<p> \u0421\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e, \u043d\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 Event&#8217;\u043e\u0432 \u0438 State&#8217;\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u044d\u043d\u0442\u0435\u0440\u043f\u0440\u0430\u0439\u0437 Java: <code>class RefreshPostsHomeScreenEvent<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u042f \u043c\u043e\u0433 \u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043d\u043e \u0432\u044b, \u043a\u0430\u043a \u043f\u0440\u043e\u0436\u0436\u0451\u043d\u043d\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0425\u0430\u0431\u0440\u0430, \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u044f \u0441\u043c\u043e\u0433\u0443 \u043d\u0430\u0439\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 <a href=\"https:\/\/neolurk.org\/wiki\/%D0%A4%D0%B0%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D1%82%D0%BE%D0%BA\" rel=\"noopener noreferrer nofollow\">\u0444\u0430\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a<\/a>.<\/p>\n<h2>\u0412\u044b \u0435\u0449\u0435 \u0437\u0434\u0435\u0441\u044c? \u0422\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0444\u0438\u0447\u0430\u043c<\/h2>\n<h4>\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439:<\/h4>\n<pre><code class=\"dart\">class User { \/* .. *\/ } class SearchUsersScreen extends ViewModel {   late final search = state('');   late final users = state(&lt;User>[]);    \/\/\/ `computed` \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 `state`\u043e\u0432    \/\/\/ \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 `computed`\u043e\u0432   late final lowercaseSearch = computed((watch) {     return watch(search).toLowerCase();   });      late final filteredUsers = computed((watch) {     return watch(users).where((user) {       final name = user.fullName.toLowerCase();       return name.contains(watch(lowercaseSearch));     }).toList();   })    \/\/\/ `computedFactory` - \u044d\u0442\u043e computed, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0449\u0435 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0443\u043c\u0435\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c   late final userById = computedFactory((watch, int id) {     return watch(users).singleWhere((user) => user.id == id);   }); }<\/code><\/pre>\n<h4>&#171;\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u0436\u0435\u0442&#187; &#8212; \u0441\u043a\u0430\u0436\u0435\u0442\u0435 \u0412\u044b, \u043d\u043e \u0442\u0443\u0442 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u044d\u0442\u043e:<\/h4>\n<pre><code class=\"dart\">import \"dart:async\";  \/\/ ... class SearchUsersScreen extends ViewModel {   Timer? timer;      late final search = state('')     ..listen((previous, current) {       timer?.cancel();       timer = Timer(         Duration(seconds: 1),         () => refresh(),       );     });    \/\/ AsyncValue \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.    late final users = state&lt;AsyncValue&lt;List&lt;User>>>(const Loading());      Future&lt;void> refresh()  async {     users       ..value = Loading()       ..value = await Result.guard(         () => ApiClient.fetchUsers(query: search.value)       );   }    \/\/ ... }<\/code><\/pre>\n<p>\u0427\u0442\u043e \u043d\u0430\u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u0435\u0435 <code>computed<\/code>&#8216;\u043e\u0432? \u041a\u0430\u043a \u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>users<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u043b <code>AsyncValue<\/code>? <\/p>\n<p>\u0410 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"dart\">late final filteredUsers = computed&lt;AsyncValue&lt;List&lt;User>>>((watch) {   return watch(users).mapValue((users) => users.where((user) {     final name = user.fullName.toLowerCase();     return name.contains(watch(lowercaseSearch));   }).toList()); })<\/code><\/pre>\n<p>\u0412\u0438\u0434\u0436\u0435\u0442 \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"dart\">Widget build(BuildContext context) {   return Observer(     builder: (context, watch) {       final users = watch(vm.filteredUsers);       return switch(users) {           Loading() => CircularProgressIndicator(),           Data(value: final users) => ListView(\/* .. *\/),           Failure(:final error) => Text(\"Error: \"),       };     }   ); }<\/code><\/pre>\n<p><em>\u0422.\u043a. <\/em><code>AsyncValue<\/code><em> &#8212; \u044d\u0442\u043e <\/em><code>sealed union<\/code><em>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0435 \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b. \u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e Pattern Matching &#8212; <\/em><a href=\"https:\/\/dart.dev\/language\/patterns\" rel=\"noopener noreferrer nofollow\"><em>\u0437\u0434\u0435\u0441\u044c<\/em><\/a><em>.<\/em><\/p>\n<h2>\u041a\u0430\u043a \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c?<\/h2>\n<p><code>ViewModel<\/code> \u043b\u0435\u0433\u043a\u043e \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c <a href=\"https:\/\/en.wikipedia.org\/wiki\/Composition_over_inheritance\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438<\/a>(en):<\/p>\n<pre><code class=\"dart\">class UsersViewModel extends ViewModel {   UsersViewModel(this.projectId);      final Observable&lt;int> projectId;      late final _users = state(&lt;User>[]);    late final filteredUsers = computed((watch) {     final projectId = watch(this.projectId);     return watch(users)       .where((user) => user.projects.contains(projectId))       .toList();   }); }  class TaskTrackerScreenViewModel extends ViewModel {   late final searchUsersVm = SearchUsersViewModel(this.selectedProjectId);    \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 projectId \u0441\u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 filteredUsers   late final selectedProjectId = state(32); }<\/code><\/pre>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 Habr (\u0438 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435). \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438.  \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u043b\u044e\u0431\u043e\u043c\u0443 \u0444\u0438\u0434\u0431\u0435\u043a\u0443 &#8212; \u0438 \u043f\u043e \u0441\u0442\u0430\u0442\u044c\u0435, \u0438 \u043f\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. <\/p>\n<p>API \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e stable, \u043d\u043e \u0432\u044b\u043f\u0443\u0441\u043a 1.0.0 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 100% test coverage. <\/p>\n<p><a href=\"https:\/\/github.com\/AlexanderFarkas\/beholder\" rel=\"noopener noreferrer nofollow\">Github<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/773980\/\"> https:\/\/habr.com\/ru\/articles\/773980\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-360183","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/360183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=360183"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/360183\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=360183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=360183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=360183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}