{"id":496276,"date":"2026-09-27T21:15:34","date_gmt":"2026-09-27T21:15:34","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=496276"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=496276","title":{"rendered":"\u041e \u0442\u043e\u043c, \u043a\u0430\u043a \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0439 \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0425\u043e\u0447\u0443 \u043f\u043e\u0441\u0432\u044f\u0442\u0438\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044e \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 JS \u0438 React, \u0440\u0430\u0441\u043a\u0440\u044b\u0432 \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u0432\u043e\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 &#171;nexus-state&#187;. \u041f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438, \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u0435\u0439 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u043d\u044b \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b \u0438 \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u041f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0441\u0443\u0442\u044c \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043c\u0443 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0418\u0434\u0435\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u0448\u043b\u0430 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e. \u041f\u0440\u043e\u0439\u0434\u044f \u0432\u0441\u0435 \u0441\u0435\u0440\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u0438\u0433\u0440,\u00abDark Souls\u00bb, \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0440\u0430\u043d\u043d\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u00abDemon&#8217;s Souls\u00bb (\u043f\u043e \u0438\u0440\u043e\u043d\u0438\u0438, \u0432 \u043d\u0435\u0433\u043e \u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0438\u0433\u0440\u0430\u043b), \u0430 \u0442\u043e\u0447\u043d\u0435\u0435, \u043d\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 &#171;Nexus&#187;. \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u0433\u0440\u044b \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0445\u0430\u0431, \u043a\u0443\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438\u0441\u044c, \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0442\u0434\u043e\u0445\u043d\u0443\u0442\u044c.<\/p>\n<p>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c. \u041e\u043d\u043e \u043b\u0430\u0442\u0438\u043d\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u0441\u0432\u044f\u0437\u044c\u00bb, \u00ab\u0443\u0437\u0435\u043b\u00bb, \u00ab\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u00bb \u2014 \u0438 \u0432 \u044d\u0442\u043e\u043c \u0431\u044b\u043b\u0430 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044f: \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0441\u043b\u043e\u0432\u043d\u043e \u043f\u0440\u043e\u0442\u0430\u0433\u043e\u043d\u0438\u0441\u0442 \u0438\u0433\u0440\u044b, \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a Nexus, \u043e\u0442\u043a\u0443\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e. \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u2014 \u0441\u0432\u044f\u0437\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>\u0412 npm \u0438\u043c\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043d\u044f\u0442\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u00abnexus-state\u00bb. \u041e\u0442 \u0441\u0435\u0431\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044e, \u0447\u0442\u043e \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u0443 \u0442\u0435\u0445, \u043a\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u0442\u043e \u0436\u0435 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u043e\u043f\u043e\u0440\u044b \u043d\u0430 \u0442\u0435\u0440\u043d\u0438\u0441\u0442\u043e\u043c \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432 \u0432\u0438\u0434\u0435 \u0442\u043e\u0439 \u0441\u0430\u043c\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u00abnexus-state\u00bb.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2bc\/718\/003\/2bc71800346d57fc03923fd0fe8e54b2.png\" width=\"660\" height=\"420\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/2bc\/718\/003\/2bc71800346d57fc03923fd0fe8e54b2.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2bc\/718\/003\/2bc71800346d57fc03923fd0fe8e54b2.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>\u041f\u0440\u043e\u043b\u043e\u0433<\/h2>\n<p>\u0418\u043c\u0435\u044f \u0437\u0430 \u043f\u043b\u0435\u0447\u0430\u043c\u0438 \u0433\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b UI\/UX \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0437\u043d\u0430\u043d\u0438\u044f JS \u0438 \u043e\u043f\u044b\u0442 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 HTML \u0441 CSS, \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 2021 \u0433\u043e\u0434\u0443 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 React. \u042d\u0442\u043e \u0431\u044b\u043b \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u0432 \u043c\u043e\u0451\u043c \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438.<\/p>\n<p>\u042f \u043f\u0438\u0441\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0438\u0437\u0443\u0447\u0430\u043b \u0445\u0443\u043a\u0438 \u0438 \u0440\u0430\u0434\u043e\u0432\u0430\u043b\u0441\u044f: \u043c\u043d\u0435 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u043c\u043e\u0433\u0443 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u0439 UI. \u041d\u043e \u0447\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u0437\u0430\u0434\u0430\u0447\u0438, \u0442\u0435\u043c \u0447\u0430\u0449\u0435 \u044f \u043d\u0430\u0442\u044b\u043a\u0430\u043b\u0441\u044f \u043d\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445 \u2014 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0422\u043e\u0447\u043d\u0435\u0435, \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0418\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u0433\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0432\u0441\u0435 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b. \u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u0440\u0438\u043c\u0435\u0440. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0430\u0439\u0442 \u0438\u0433\u0440\u044b, \u0433\u0434\u0435 \u043d\u0430\u0434\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u0433\u0435\u0440\u043e\u044f \u0438 \u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441 \u0441\u0440\u0430\u0437\u0443 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445:<\/p>\n<pre><code class=\"javascript\">function App() {  return (    &lt;&gt;      &lt;Header \/&gt;      &lt;Sidebar \/&gt;      &lt;Profile \/&gt;    &lt;\/&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0425\u0443\u043a useState \u0442\u0443\u0442 \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442: \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u2014 \u043e\u043d\u0438 \u0440\u0430\u0437\u044a\u0435\u0434\u0443\u0442\u0441\u044f.<\/p>\n<p>\u0412 \u0442\u0435\u043e\u0440\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043e\u0431\u0449\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u0440\u0430\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0438\u0437 \u043f\u0440\u043e\u043f\u0441\u0430\u043c\u0438. \u041d\u043e \u0443 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0435\u0441\u0442\u044c \u0446\u0435\u043d\u0430, \u0438 \u043e\u043d\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0439, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043d\u043e\u0433\u043e: \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0451 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u043e \u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u0443\u0434\u0430 \u043f\u043e\u0434\u043d\u044f\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441 \u044d\u0442\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b.<\/p>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u043f\u0430\u0441\u0430\u044e\u0442 \u0445\u0443\u043a\u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043b\u0438\u0448\u043d\u0438\u043c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c. \u0415\u0441\u0442\u044c \u0435\u0449\u0451 useContext \u2014 \u043e \u043d\u0451\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u043e\u0437\u0436\u0435, \u043d\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0443\u0442\u0438 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0418 \u0442\u0443\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0430\u044f \u043d\u0435\u043a\u0438\u0439 \u043e\u0431\u0449\u0438\u0439 Store, \u043e\u0442\u043a\u0443\u0434\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<pre><code>                   Store                     \u2502        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510        \u2193            \u2193            \u2193      Header       Sidebar      Profile<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043d\u043e\u0433\u043e. \u041d\u043e \u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435, \u0438 \u043c\u0435\u043d\u044f \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435: \u043f\u0440\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u044f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438. \u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0430 \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e, \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e. \u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043c\u0430\u0433\u0438\u0435\u0439.<\/p>\n<p>\u0418 \u0442\u0443\u0442 \u043c\u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u043e Flux, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442 \u043c\u0435\u043d\u044f \u0441 \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u043c\u0438 \u00ab\u0438\u0437\u0434\u0430\u0442\u0435\u043b\u044c\/\u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u00bb. \u042f \u0432\u043b\u044e\u0431\u043b\u044f\u044e\u0441\u044c \u0432 \u044d\u0442\u0443 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e \u0435\u0451 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a87\/23a\/c86\/a8723ac8613610f76b47bc3f502de074.png\" width=\"660\" height=\"420\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a87\/23a\/c86\/a8723ac8613610f76b47bc3f502de074.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a87\/23a\/c86\/a8723ac8613610f76b47bc3f502de074.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>\u0427\u0443\u0432\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f<\/h2>\n<p>Flux \u0443\u0431\u0440\u0430\u043b \u0432\u0441\u044e \u043c\u0430\u0433\u0438\u044e, \u0441\u0434\u0435\u043b\u0430\u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c. \u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u043e\u0440\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 Flux, \u043f\u043e\u043a\u0430 \u0431\u0435\u0437 Dispatcher \u2014 \u043a \u043d\u0435\u043c\u0443 \u043c\u044b \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043f\u043e\u0437\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/ myStore.js\/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u0430\u0448\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435let state = {  name: \"Duncan\",  role: \"knight\",};const listeners = new Set(); \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439export const store = {  \/\/ \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445  getState() {    return state;  },  \/\/ \u043c\u0435\u0442\u043e\u0434 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445  setState(newState) {    state = {      ...state,      ...newState,    };    \/\/ \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0430\u043c, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u044f \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445    listeners.forEach((listener) =&gt; listener());  },  \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f  subscribe(listener) {    listeners.add(listener);    return () =&gt; listeners.delete(listener); \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043a\u0438  },};<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">import { store } from \".\/myStore\";console.log(\"state -\", store.getState()); \/\/ \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c state - { name: \"Duncan\", role: \"knight\" }<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 Flux \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 React. Store \u0443\u043c\u0435\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 \u043e \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438, \u043d\u043e \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c React \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<br \/>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 React-\u0445\u0443\u043a.<\/p>\n<pre><code class=\"javascript\">\/\/ useStore.jsimport { useSyncExternalStore } from \"react\";import { store } from \".\/myStore\";export function useStore() {  return useSyncExternalStore(store.subscribe, store.getState);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 React-\u0445\u0443\u043a <code>useSyncExternalStore<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Flux Store. \u041a\u043e\u0433\u0434\u0430 Store \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438, React \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041d\u043e <code>useSyncExternalStore<\/code> \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e <code>Flux<\/code>. \u042d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0441\u0432\u044f\u0437\u0443\u044e\u0449\u0435\u0435 \u0437\u0432\u0435\u043d\u043e \u043c\u0435\u0436\u0434\u0443 Flux-Store \u0438 React.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u0430 \u0441\u0432\u044f\u0437\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 useStore \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 React-\u0445\u0443\u043a\u0438 \u2014 <code>useEffect<\/code> \u0438 <code>useState<\/code>.<\/p>\n<pre><code class=\"javascript\">\/\/ useStore.jsimport { useEffect, useState } from \"react\";import { store } from \".\/myStore\";export function useStore() {  const [state, setState] = useState(store.getState);  useEffect(() =&gt; {    return store.subscribe(() =&gt; {      setState(store.getState());    });  }, []);  return state;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0432\u0435\u0449\u044c: \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 Store. \u041a\u043e\u0433\u0434\u0430 Store \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0435\u0433\u043e subscribe \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448 callback, \u0430 \u0442\u043e\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 setState. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 React \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u0438 \u0445\u0443\u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0443\u0436\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Store. \u042d\u0442\u043e \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0445\u0443\u043a <code>useSyncExternalStore<\/code>.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <code>useState(store.getState)<\/code>: \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u0430 \u0431\u0435\u0437 \u0432\u044b\u0437\u043e\u0432\u0430 \u2014 \u044d\u0442\u043e \u043b\u0435\u043d\u0438\u0432\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440. React \u0441\u0430\u043c \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0435\u0451 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0430 \u043d\u0435 \u0441\u0430\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0430\u043c Flux \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e React. \u041e\u043d \u043b\u0438\u0448\u044c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0432\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430: \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (getState) \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f (subscribe). \u0412\u0441\u0451, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u044d\u0442\u043e \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0430 React-\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0422\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0442\u0435\u0440\u044f\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0435. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u043e \u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: <code>store.setState<\/code> \u0441\u043b\u0438\u0432\u0430\u0435\u0442 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043b\u044e\u0431\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438, \u0438 \u043f\u043e \u043a\u043e\u0434\u0443 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b. \u0418 \u0442\u0443\u0442 \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0435\u0439 Dispatcher, \u0441\u0443\u0437\u0438\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/p>\n<pre><code class=\"javascript\">\/\/ dispatcher.jsconst handlers = new Set(); \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439\/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c dispatcherexport const dispatcher = {  register(handler) {    handlers.add(handler);    return () =&gt; handlers.delete(handler);  },  \/\/ notify \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u0430\u043c \u0440\u0435\u0448\u0430\u043b, \u043a\u043e\u0433\u0434\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c  dispatch(action, notify) {    handlers.forEach((handler) =&gt; handler(action, notify));  },};<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c dispatcher \u043a \u043d\u0430\u0448\u0435\u043c\u0443 Flux:<\/p>\n<pre><code class=\"javascript\">\/\/ myStore.jsimport { dispatcher } from \".\/dispatcher\";let state = {  name: \"Duncan\",  role: \"knight\",};const listeners = new Set();\/\/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0434\u0435\u0441\u044c \u2014 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0436\u0438\u0432\u0451\u0442 statedispatcher.register((action, notify) =&gt; {  switch (action.type) {    case \"HERO_SET_NAME\":      state = {        ...state,        name: action.payload,      };      break;    case \"HERO_SET_ROLE\":      state = {        ...state,        role: action.payload,      };      break;    \/\/ \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0438 \u043d\u0438\u043a\u043e\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0438\u0442    default:      return;  }  notify(); \/\/ \u0437\u0434\u0435\u0441\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0447\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432});export const store = {  getState() {    return state;  },  \/\/ \u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f  dispatch(action) {    \/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e: \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0451 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f    dispatcher.dispatch(action, () =&gt; {      listeners.forEach((listener) =&gt; listener());    });  },  subscribe(listener) {    listeners.add(listener);    return () =&gt; listeners.delete(listener);  },};<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435 \u0438 \u0442\u043e, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u0441\u0442\u043e\u0440\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>dispatch<\/code>, \u0430 \u043d\u0435 <code>setState<\/code>: \u043e\u043d<\/p>\n<p>\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0430 \u043d\u0435 \u043a\u0443\u0441\u043e\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0438 \u0441\u0442\u0430\u0440\u043e\u0435 \u0438\u043c\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0443\u0442\u0430\u043b\u043e \u0431\u044b.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438: <code>type<\/code> \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u043c, \u0430 <code>payload<\/code> \u043d\u0435\u0441\u0451\u0442 \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<pre><code class=\"javascript\">import { store } from \".\/myStore\";store.dispatch({  type: \"HERO_SET_NAME\",  payload: \"Artorias\",});<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0430\u043a \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u0443 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0438 \u0440\u0430\u0434\u043e\u0432\u0430\u043b\u0441\u044f. \u0414\u0432\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u0430, <code>myStore.js<\/code> \u0438 <code>dispatcher.js<\/code>, \u2014 \u0438 \u0432 \u043d\u0438\u0445 \u0432\u0435\u0441\u044c \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0438, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u043d\u0435 \u0437\u043d\u0430\u043b \u0431\u044b, \u0437\u0430\u0447\u0435\u043c \u043e\u043d\u0430 \u0442\u0430\u043c.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/347\/d74\/b2e\/347d74b2e0618c39078c5f850f16fba5.png\" width=\"660\" height=\"420\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/347\/d74\/b2e\/347d74b2e0618c39078c5f850f16fba5.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/347\/d74\/b2e\/347d74b2e0618c39078c5f850f16fba5.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, Flux + createContext<\/h2>\n<p>\u042f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Flux, \u043d\u043e \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043e\u043d \u0440\u0430\u0437\u0440\u043e\u0441\u0441\u044f \u0438 \u043c\u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e npm \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u042f \u044d\u0442\u043e\u0433\u043e \u043d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u0434\u0435\u043b\u0430\u043b, \u043d\u043e \u044d\u0442\u043e \u0431\u044b\u043b \u0432\u044b\u0437\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u0440\u0438\u043d\u044f\u0442\u044c: \u0432 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u044f \u043c\u043e\u0433 \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0441\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u043d\u044b\u043d\u0435\u0448\u043d\u0438\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u043c. \u0414\u0430 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u044f \u043d\u0430\u0447\u0430\u043b \u2014 \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443 \u0432\u0435\u0441\u044c\u043c\u0430 \u043d\u0435\u0443\u043c\u0435\u043b\u043e \u2014 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u0412 \u043f\u0435\u0440\u0432\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e Flux-\u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 React \u2014 createContext \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0443 \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 createContext, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u0438\u0434\u0435\u043b\u0438 \u0438\u043b\u0438 \u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u0430\u043c\u0438:<\/p>\n<pre><code class=\"javascript\">\/\/ MyProvider.jsimport { createContext, useState } from \"react\";const MyContext = createContext(null);function MyProvider({ children }) {  const [hero, setHero] = useState({    name: \"Duncan\",    role: \"knight\",  });  return (    &lt;MyContext.Provider value={{ hero, setHero }}&gt;      {children}    &lt;\/MyContext.Provider&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043d\u0438\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">function App() {  return (    &lt;MyProvider&gt;      &lt;Header \/&gt;      &lt;Sidebar \/&gt;      &lt;Profile \/&gt;    &lt;\/MyProvider&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"javascript\">\/\/ Profile.jsimport { useContext } from \"react\";function Profile() {  const { hero, setHero } = useContext(MyContext);  return (    &lt;&gt;      &lt;h1&gt;Hello, {hero.name}&lt;\/h1&gt;      &lt;button onClick={() =&gt; setHero({ name: \"Artorias\", role: \"knight\" })}&gt;        Change name      &lt;\/button&gt;    &lt;\/&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u0433\u043b\u0443\u0431\u044c \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e. \u041d\u043e \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u043c \u043e\u043d \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f, \u0438 \u0432\u043e\u0442 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430.<\/p>\n<p><strong>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438.<\/strong> React \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: \u043e\u043d \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 <code>value<\/code> \u0446\u0435\u043b\u0438\u043a\u043e\u043c. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0437\u0432\u0430\u043b <code>useContext<\/code>, \u043e\u043d \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u2014 \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0447\u0438\u0442\u0430\u0435\u0442 \u043e\u0442\u0442\u0443\u0434\u0430 \u043e\u0434\u043d\u043e \u043f\u043e\u043b\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c.<\/p>\n<p>\u041f\u0440\u0438\u0447\u0451\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <code>value={{ hero, setHero }}<\/code> \u2014 \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0443\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0435\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435\u0433\u0434\u0430, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043c\u0435\u043d\u044f\u043b\u0441\u044f \u043b\u0438 <code>hero<\/code>.<\/p>\n<p>\u0418 <code>memo<\/code> \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0441\u043f\u0430\u0441\u0430\u0435\u0442: \u043e\u043d \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u043f\u0441\u044b, \u0430 <code>useContext<\/code> \u0447\u0438\u0442\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043e\u0431\u0445\u043e\u0434 \u043f\u0440\u043e\u043f\u0441\u043e\u0432. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 <code>memo<\/code> \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u0447\u0438\u0442\u0430\u0435\u0442, \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0441\u044f.<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0442\u044c \u2014 \u0440\u0435\u0437\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u0434\u0432\u0430-\u0442\u0440\u0438; \u0434\u0430\u043b\u044c\u0448\u0435 \u044d\u0442\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u0432, \u0433\u0434\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0445 \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u0438\u043d.<\/p>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0440\u043e\u0432\u043d\u043e \u0442\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0443\u0436\u0435 \u0440\u0435\u0448\u0438\u043b\u0438 \u0432 \u0441\u0432\u043e\u0435\u0439 Flux-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438: \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043d\u0443\u0436\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u0435\u0434\u0438\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c Flux \u0438 <code>useContext<\/code>:<\/p>\n<pre><code class=\"javascript\">\/\/ MyProvider.jsimport { useRef } from \"react\";let state = {  name: \"Duncan\",  role: \"knight\",};function MyProvider({ children }) {  const subscribers = useRef(new Set());  const setState = (newState) =&gt; {    state = {      ...state,      ...newState,    };    subscribers.current.forEach((callback) =&gt; callback());  };  return (    &lt;MyContext.Provider      value={{        getState: () =&gt; state,        setState,        subscribe: (callback) =&gt; {          subscribers.current.add(callback);          return () =&gt; subscribers.current.delete(callback);        },      }}    &gt;      {children}    &lt;\/MyContext.Provider&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u043d \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<p>\u041f\u0440\u0430\u0432\u0434\u0430, \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043a\u0430 \u0437\u0430\u0448\u0438\u0442\u044b \u0432 \u043c\u043e\u0434\u0443\u043b\u044c \u2014 \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0437\u0430\u0434\u0430\u0441\u0442 \u0441\u0432\u043e\u0438, \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e. \u0417\u0430\u043f\u043e\u043c\u043d\u0438\u043c \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u2014 \u0441\u043a\u043e\u0440\u043e \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f.<\/p>\n<p>\u0410 \u0432\u043e\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0447\u0438\u0442\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u2014 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043b\u0435\u0436\u0430\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <code>getState<\/code>, <code>setState<\/code> \u0438 <code>subscribe<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441\u0442\u043e\u0440\u0430, \u0430 \u043d\u0435 \u0441\u0430\u043c\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u043e\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0445\u0443\u043a useStore \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>useSyncExternalStore<\/code>, \u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ useStore.jsimport { useContext, useSyncExternalStore } from \"react\";export function useStore() {  const { getState, subscribe } = useContext(MyContext);  return useSyncExternalStore(subscribe, getState);}```\u0418 \u0434\u043e\u043b\u0433\u043e\u0436\u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:```jsx\/\/ Profile.jsimport { useContext } from \"react\";import { useStore } from \".\/useStore\";function Profile() {  const { name } = useStore(); \/\/ \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f  const { setState } = useContext(MyContext); \/\/ \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435  return (    &lt;&gt;      &lt;h1&gt;Hello, {name}&lt;\/h1&gt;      &lt;button onClick={() =&gt; setState({ name: \"Artorias\" })}&gt;        Change name      &lt;\/button&gt;    &lt;\/&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u044f\u0434\u043e\u043c \u0441 \u043d\u0438\u043c, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0443\u0437\u043d\u0430\u044e\u0442 \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0435\u0440\u0435\u0437 <code>subscribe<\/code>. \u0422\u0430 \u0441\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439 \u0432\u0441\u0435\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u043e\u0442\u043f\u0430\u043b\u0430. \u0418 \u044d\u0442\u043e \u0443\u0436\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<h4>\u0413\u0434\u0435 \u044d\u0442\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0440\u0430\u0437\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/h4>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u043c. \u041d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0433\u0434\u0435 \u0447\u0442\u043e \u043b\u0435\u0436\u0438\u0442:<\/p>\n<pre><code class=\"javascript\">let state = { ... };                      \/\/ \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430function MyProvider({ children }) {  const subscribers = useRef(new Set());  \/\/ \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code>state<\/code> \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043c\u043e\u0434\u0443\u043b\u044f: \u043e\u043d \u043e\u0434\u0438\u043d \u043d\u0430 \u0432\u0441\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0436\u0438\u0432\u0451\u0442, \u043f\u043e\u043a\u0430 \u0436\u0438\u0432 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440. <code>subscribers<\/code> \u0441\u043e\u0437\u0434\u0430\u043d \u0447\u0435\u0440\u0435\u0437 <code>useRef<\/code>: \u043e\u043d \u0441\u0432\u043e\u0439 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <code>MyProvider<\/code> \u0438 \u0443\u043c\u0438\u0440\u0430\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0438\u043c.<\/p>\n<p>\u041f\u043e\u043a\u0430 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u043e\u0434\u0438\u043d, \u044d\u0442\u043e \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;MyProvider&gt;  &lt;Profile \/&gt;    {\/* \u043e\u0434\u0438\u043d \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 *\/}&lt;\/MyProvider&gt;&lt;MyProvider&gt;  &lt;Sidebar \/&gt;    {\/* \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 *\/}&lt;\/MyProvider&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041e\u0431\u0430 \u0432\u0438\u0434\u044f\u0442 \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u2014 <code>state<\/code> \u043e\u0431\u0449\u0438\u0439. \u041d\u043e <code>setState<\/code>, \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430, \u0440\u0430\u0437\u0431\u0443\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432. <code>Sidebar<\/code> \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043d\u0435 \u0443\u0437\u043d\u0430\u0435\u0442 \u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0441 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 \u043d\u0435 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043f\u043e\u043b\u043e\u0432\u0438\u043d. \u041e\u0448\u0438\u0431\u043a\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e **\u0434\u0432\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430 \u0436\u0438\u0432\u0443\u0442 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0438 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0436\u0438\u0437\u043d\u0438**. \u0421\u0442\u043e\u0440 \u2014 \u044d\u0442\u043e \u043d\u0435 \u00ab\u0434\u0430\u043d\u043d\u044b\u0435\u00bb \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u00ab\u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0438\u00bb. \u0421\u0442\u043e\u0440 \u2014 \u044d\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0430\u043c\u0438 \u043d\u0430 \u043d\u0438\u0445. \u041e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0443\u043c\u0438\u0440\u0430\u0442\u044c.<\/p>\n<p>\u0415\u0441\u0442\u044c \u0438 \u0432\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430 \u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043c\u0435\u043d\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u0430\u044f: \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 <code>value <\/code>\u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 <code>subscribe<\/code> \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0438 <code>useSyncExternalStore<\/code> \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<h4>\u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u044c<\/h4>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f: \u0440\u0430\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0438 \u0436\u0438\u0432\u0443\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430, \u043f\u0443\u0441\u0442\u044c \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0436\u0438\u0432\u0451\u0442 \u0442\u0430\u043c \u0436\u0435. \u0417\u0430\u043e\u0434\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043e\u0431\u0445\u043e\u0434\u0438\u043b \u0441\u0442\u043e\u0440\u043e\u043d\u043e\u0439 \u2014 \u0430 \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0437\u0430\u0434\u0430\u0441\u0442 \u0441\u0432\u043e\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435? \u0427\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u0441:<\/p>\n<pre><code class=\"javascript\">\/\/ MyProvider.jsimport { useRef } from \"react\";function MyProvider({ children, initialState }) {  const stateRef = useRef(initialState);  const subscribers = useRef(new Set());  const setState = (newState) =&gt; {    stateRef.current = {      ...stateRef.current,      ...newState,    };    subscribers.current.forEach((callback) =&gt; callback());  };  return (    &lt;MyContext.Provider      value={{        getState: () =&gt; stateRef.current,        setState,        subscribe: (callback) =&gt; {          subscribers.current.add(callback);          return () =&gt; subscribers.current.delete(callback);        },      }}    &gt;      {children}    &lt;\/MyContext.Provider&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0443\u0442 \u0432\u0430\u0436\u043d\u0430 \u043e\u0434\u043d\u0430 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044c. \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043d\u0435\u043b\u044c\u0437\u044f:<\/p>\n<pre><code class=\"javascript\">function MyProvider({ children, state }) {  const setState = (newState) =&gt; {    state = { ...state, ...newState }; \/\/ \u043f\u0440\u0430\u0432\u043a\u0430 \u0436\u0438\u0432\u0451\u0442 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430  };<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>React \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043d\u043e\u0432\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0441 \u043d\u0443\u043b\u044f \u2014 \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u0432 \u043d\u0435\u0433\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u043b\u0438, \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442. \u041d\u0443\u0436\u043d\u043e \u043c\u0435\u0441\u0442\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0435\u043d\u0434\u0435\u0440 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0435\u0442, \u0438 \u044d\u0442\u043e <code>useRef<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0451 \u0447\u0435\u0441\u0442\u043d\u043e: \u0441\u0432\u043e\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0441\u043d\u0430\u0440\u0443\u0436\u0438, \u0430 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0441\u0442\u0430\u043b \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c.<\/p>\n<pre><code class=\"javascript\">const state = {  name: \"Duncan\",  role: \"knight\",};&lt;MyProvider initialState={state}&gt;  &lt;Profile \/&gt;&lt;\/MyProvider&gt;;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u044f \u0438 \u0441\u0442\u0440\u043e\u0438\u043b \u0434\u0432\u0435 \u0441\u0432\u043e\u0438 \u043f\u0435\u0440\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/857\/005\/121\/85700512155acb7c840bdc74ea9ac20e.png\" width=\"660\" height=\"420\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/857\/005\/121\/85700512155acb7c840bdc74ea9ac20e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/857\/005\/121\/85700512155acb7c840bdc74ea9ac20e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0424\u0430\u0431\u0440\u0438\u043a\u0438<\/h2>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c: <strong>\u0432\u0435\u0441\u044c \u0441\u0442\u043e\u0440 \u0436\u0438\u0432\u0451\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/strong>.<\/p>\n<p>\u0415\u0433\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0435\u0437 React \u2014 \u043d\u0443\u0436\u0435\u043d \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432 \u0442\u0435\u0441\u0442\u0435, \u043d\u0435 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u044f \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u043d\u0435 React, \u0432 \u0432\u043e\u0440\u043a\u0435\u0440\u0435, \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0412\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043e \u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0436\u0438\u0437\u043d\u0438 \u043a\u0443\u0441\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0445\u043e\u0442\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u044e\u0442.<\/p>\n<p>\u0414\u0430 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 <code>value<\/code> \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0430\u0441\u044c.<\/p>\n<p>\u0410 \u0432\u0435\u0434\u044c \u043e\u0442 React \u0437\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u0435\u043d \u0440\u043e\u0432\u043d\u043e \u043e\u0434\u0438\u043d \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u2014 <code>useRef<\/code>, \u0447\u0442\u043e\u0431\u044b \u0447\u0442\u043e-\u0442\u043e \u043f\u0435\u0440\u0435\u0436\u0438\u043b\u043e \u0440\u0435\u043d\u0434\u0435\u0440. \u041d\u043e \u0435\u0441\u043b\u0438 \u0441\u0442\u043e\u0440 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0436\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u0438 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0447\u0435\u0433\u043e: \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0438 \u0438 \u0442\u0430\u043a \u0436\u0438\u0432\u0451\u0442 \u0441\u0442\u043e\u043b\u044c\u043a\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>\u0412\u044b\u043d\u0435\u0441\u0435\u043c \u0432\u0441\u0451 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">function createStore(initial) {  let state = initial;  const listeners = new Set();  return {    getState: () =&gt; state,    setState: (next) =&gt; {      state = { ...state, ...next };      listeners.forEach((listener) =&gt; listener());    },    subscribe: (listener) =&gt; {      listeners.add(listener);      return () =&gt; listeners.delete(listener);    },  };}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0430\u043a\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0444\u0430\u0431\u0440\u0438\u043a\u043e\u0439. \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u043a\u043d\u0438\u0433\u0435 &#171;Learning JavaScript Design Patterns&#187;, \u043a\u043e\u0442\u043e\u0440\u0430\u044f, \u043f\u043e \u0438\u0440\u043e\u043d\u0438\u0438, \u043f\u043e\u043f\u0430\u043b\u0430\u0441\u044c \u043c\u043d\u0435 \u043f\u043e\u0437\u0436\u0435, \u0447\u0435\u043c \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0441\u0430\u043c\u043e\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0435\u0439.<\/p>\n<p>\u0412\u0441\u0451 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e: \u0432\u044b\u0437\u0432\u0430\u043b\u0438 \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0441\u0442\u043e\u0440. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0438, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0443. \u041d\u0443\u0436\u0435\u043d \u0432\u0442\u043e\u0440\u043e\u0439, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u2014 \u0432\u044b\u0437\u0432\u0430\u043b\u0438 \u0435\u0449\u0451 \u0440\u0430\u0437. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 Flux, \u043d\u043e \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0431\u044b \u043e\u043d \u0441\u0442\u0430\u043b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c.<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u044f \u0432 \u0438\u0442\u043e\u0433\u0435 \u0438 \u043f\u0440\u0438\u0448\u0451\u043b.<\/p>\n<h4>\u0427\u0442\u043e \u0434\u0430\u0451\u0442 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435<\/h4>\n<p>\u0424\u0430\u0431\u0440\u0438\u043a\u0430 \u0432\u044b\u0448\u0435 \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0436\u0438\u0437\u043d\u0438, \u043d\u043e \u043f\u043e\u043a\u0430 \u0443\u043c\u0435\u0435\u0442 \u0440\u043e\u0432\u043d\u043e \u0442\u043e \u0436\u0435, \u0447\u0442\u043e \u0438 \u043f\u0440\u0435\u0436\u043d\u0438\u0439 \u0441\u0442\u043e\u0440. \u0417\u0430\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c \u043c\u0435\u0441\u0442\u043e, \u043a\u0443\u0434\u0430 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435: <code>state<\/code> \u0438 <code>listeners<\/code> \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0438 \u0440\u044f\u0434\u043e\u043c \u0441 \u043d\u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0434\u0440\u0443\u0433\u0438\u0445.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0442\u043e\u0433\u043e, \u0440\u0430\u0434\u0438 \u0447\u0435\u0433\u043e \u0432\u0441\u0451 \u0437\u0430\u0442\u0435\u0432\u0430\u043b\u043e\u0441\u044c. \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0437\u0438\u044e \u043a \u043f\u043e\u0434\u044a\u0451\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430\u0432\u0435\u0440\u0445 \u2014 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0451 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u043e, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u043f\u0440\u0438\u0447\u0430\u0441\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b? \u041d\u0430\u0448 \u0441\u0442\u043e\u0440 \u043f\u043e\u043a\u0430 \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u0442\u0430\u043a \u0436\u0435: <code>listeners<\/code> \u2014 \u043e\u0434\u0438\u043d \u043d\u0430\u0431\u043e\u0440, \u0438 <code>setState<\/code> \u0431\u0443\u0434\u0438\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043e\u0434\u043d\u043e \u043f\u043e\u043b\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0431\u0443\u0434\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0445, \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 \u043d\u0430\u0434\u043e \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u043e \u043a\u043b\u044e\u0447\u0430\u043c:<\/p>\n<pre><code class=\"javascript\">function createStore(initial) {  let state = initial;  const listeners = new Map(); \/\/ \u043a\u043b\u044e\u0447 -&gt; \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 \u043d\u0430 \u043d\u0435\u0433\u043e  const notify = (keys) =&gt; {    \/\/ \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c, \u043a\u043e\u0433\u043e \u0437\u0432\u0430\u0442\u044c: \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u044e\u0447\u0435\u0439    \/\/ \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0434\u043d\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435, \u0430 \u043d\u0435 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043d\u0430 \u043a\u043b\u044e\u0447    const called = new Set();    keys.forEach((key) =&gt; {      listeners.get(key)?.forEach((listener) =&gt; called.add(listener));    });    listeners.get(\"*\")?.forEach((listener) =&gt; called.add(listener));    called.forEach((listener) =&gt; listener(state));  };  const get = (key) =&gt; (key === undefined ? state : state[key]);  const set = (next) =&gt; {    const prev = state;    state = { ...state, ...next };    \/\/ \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u0442\u0435\u043c \u043a\u043b\u044e\u0447\u0430\u043c, \u0447\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c    const changed = Object.keys(next).filter((key) =&gt; prev[key] !== state[key]);    if (changed.length) notify(changed);  };  const subscribe = (listener, keys = [\"*\"]) =&gt; {    keys.forEach((key) =&gt; {      if (!listeners.has(key)) listeners.set(key, new Set());      listeners.get(key).add(listener);    });    return () =&gt; keys.forEach((key) =&gt; listeners.get(key)?.delete(listener));  };  return { get, set, subscribe };}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u2014 <code>Set<\/code> \u0441\u0442\u0430\u043b <code>Map<\/code>, \u2014 \u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043b\u043e \u0434\u0440\u0443\u0433\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">const store = createStore({ name: \"Duncan\", role: \"knight\", level: 3 });store.subscribe(onName, [\"name\"]);store.subscribe(onLevel, [\"level\"]);store.set({ name: \"Artorias\" }); \/\/ onName \u0432\u044b\u0437\u0432\u0430\u043d, onLevel \u2014 \u043d\u0435\u0442store.set({ name: \"Artorias\" }); \/\/ \u0442\u043e \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: \u043d\u0435 \u0432\u044b\u0437\u0432\u0430\u043d \u043d\u0438\u043a\u0442\u043e<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u0440\u0438 \u0432\u0435\u0449\u0438 \u0440\u0430\u0437\u043e\u043c. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0447\u0438\u0442\u0430\u044e\u0449\u0438\u0439 <code>level<\/code>, \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u043c\u0435\u043d\u044b \u0438\u043c\u0435\u043d\u0438: \u043f\u043e\u043b\u043e\u0441\u043a\u0430 \u043e\u043f\u044b\u0442\u0430 \u043d\u0435 \u043c\u0438\u0433\u043d\u0451\u0442 \u043e\u0442\u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b \u0433\u0435\u0440\u043e\u044f. \u0417\u0430\u043f\u0438\u0441\u044c \u0442\u043e\u0433\u043e \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u043a\u043e\u0433\u043e \u043d\u0435 \u0440\u0430\u0437\u0431\u0443\u0434\u0438\u0442. \u0410 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a, \u0441\u043b\u0435\u0434\u044f\u0449\u0438\u0439 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430 <code>name<\/code> \u0438 <code>level<\/code>, \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u043e\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043e\u0434\u043d\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435, \u0430 \u043d\u0435 \u0434\u0432\u0430 \u2014 \u0440\u0430\u0434\u0438 \u044d\u0442\u043e\u0433\u043e \u0432 <code>notify<\/code> \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 <code>called<\/code>.<\/p>\n<h4>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0436\u0438\u0432\u0443\u0442 \u0442\u0430\u043c \u0436\u0435<\/h4>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e. \u041f\u043e\u043c\u043d\u0438\u0442\u0435 dispatcher? \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u043d\u043e \u0436\u0438\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u0441\u0442\u043e\u0440\u0430 \u0438 \u0437\u043d\u0430\u043b \u043e <code>state<\/code> \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u2014 \u0442\u0443 \u0441\u0430\u043c\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u044b \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043b\u0435\u0447\u0438\u043c.<\/p>\n<p>\u0420\u0430\u0437 \u0444\u0430\u0431\u0440\u0438\u043a\u0430 \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043d\u043e \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0410 \u043e\u043d\u0430 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0435\u0433\u043e \u0438 \u043e\u0442\u0434\u0430\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u044c <code>get<\/code> \u0438 <code>set<\/code>:<\/p>\n<pre><code class=\"javascript\">function createStore({ state: initial, acts }) {  let state = initial;  const listeners = new Map();  \/\/ ... notify, get, set, subscribe \u2014 \u043a\u0430\u043a \u0432\u044b\u0448\u0435 ...  \/\/ \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0440\u043e\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0434\u0435\u0441\u044c \u0436\u0435 \u0438 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 get\/set  const actions = acts ? acts(get, set) : {};  return { get, set, subscribe, acts: actions };}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u043f\u0440\u0438\u044f\u0442\u043d\u043e: \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0434\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u0442\u043e\u0440. \u0422\u0430\u043a \u043c\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043c \u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">const store = createStore({  state: { level: 1 },  acts: (get, set) =&gt; ({    levelUp() {      set({ level: get(\"level\") + 1 });    },    boost(n) {      set({ level: get(\"level\") + n });    },  }),});store.acts.levelUp();store.acts.boost(10);store.get(\"level\"); \/\/ 12<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435 \u0441 dispatcher: \u0442\u0430\u043c \u0431\u044b\u043b\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435-\u043e\u0431\u044a\u0435\u043a\u0442, <code>switch<\/code> \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u043c\u0443 <code>type<\/code> \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u043a\u0430\u043a-\u0442\u043e \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u2014 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0418 \u0437\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0435\u0433\u043e \u043c\u044b \u043d\u0435 \u043f\u0438\u0441\u0430\u043b\u0438. \u041d\u0435\u0442 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u043d\u0435\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u0442\u0438\u043f\u043e\u0432, \u043d\u0435\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0444\u0430\u0439\u043b\u0430\u043c\u0438. \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0442\u043e\u0440\u0443, \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u0438 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b41\/821\/80d\/b4182180d108f4b70383da00df665f0c.png\" width=\"660\" height=\"420\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b41\/821\/80d\/b4182180d108f4b70383da00df665f0c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b41\/821\/80d\/b4182180d108f4b70383da00df665f0c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>createNexus<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u043c \u0432\u043f\u043b\u043e\u0442\u043d\u0443\u044e \u043a \u0441\u0430\u043c\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. \u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440, \u2014 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439, \u0445\u043e\u0442\u044c \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439, \u043f\u0435\u0440\u0435\u0441\u043a\u0430\u0437 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0443 \u043d\u0435\u0451 \u0432\u043d\u0443\u0442\u0440\u0438. \u0424\u0430\u0431\u0440\u0438\u043a\u0430 \u0442\u0430\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>createNexus<\/code>, \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0447\u0442\u0438 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043d\u0430\u0448 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">import { createNexus } from \"nexus-state\";const nexus = createNexus({  state: { level: 1 },  acts: (get, set) =&gt; ({    levelUp() {      set({ level: get(\"level\") + 1 });    },  }),});nexus.acts.levelUp();nexus.get(\"level\"); \/\/ 2<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<h4>\u0427\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0430\u0431\u0440\u0438\u043a\u0430<\/h4>\n<p>\u0412\u044b\u0437\u043e\u0432 \u043e\u0442\u0434\u0430\u0451\u0442 \u0448\u0435\u0441\u0442\u044c \u0432\u0435\u0449\u0435\u0439 \u2014 \u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u043d\u0430\u0434 \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 \u0432\u044b\u0437\u043e\u0432\u043e\u043c, \u0440\u043e\u0432\u043d\u043e \u043a\u0430\u043a \u0432 \u043d\u0430\u0448\u0435\u0439 \u0443\u0447\u0435\u0431\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">const { get, set, subscribe, reset, middleware, acts } = nexus;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code><strong>get<\/strong><\/code> \u2014 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0438\u043b\u0438 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043b\u044e\u0447\u0443.<\/p>\n<pre><code class=\"javascript\">nexus.get(); \/\/ { level: 2 }nexus.get(\"level\"); \/\/ 2<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code><strong>set<\/strong><\/code> \u2014 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e. \u0412\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u043e \u043d\u0451\u043c \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">nexus.set({ level: 5 });nexus.set((state) =&gt; ({ level: state.level + 1 }));<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code><strong>subscribe<\/strong><\/code> \u2014 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u043a\u043b\u044e\u0447\u0435\u0439. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442\u043f\u0438\u0441\u043a\u0438. \u041a\u043b\u044e\u0447\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u044f\u0432\u043d\u043e, \u0430 <code>[\"*\"]<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u0432\u0441\u0435\u00bb.<\/p>\n<pre><code class=\"javascript\">const off = nexus.subscribe((state) =&gt; render(state), [\"level\"]);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code><strong>reset<\/strong><\/code> \u2014 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443: \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0438\u043b\u0438 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043a\u043b\u044e\u0447\u0430\u043c.<\/p>\n<pre><code class=\"javascript\">nexus.reset(\"level\"); \/\/ \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0440\u043e\u0432\u0435\u043d\u044cnexus.reset(); \/\/ \u0432\u0441\u0451 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code><strong>middleware<\/strong><\/code> \u2014 \u0432\u043a\u043b\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u00ab\u0445\u043e\u0447\u0443 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u00bb \u0438 \u00ab\u043e\u0431\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c\u00bb. \u0422\u043e\u0436\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u043d\u044f\u0442\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">const stop = nexus.middleware((prev, next, context) =&gt; {  console.log(context?.source, prev.level, \"=&gt;\", next.level);});<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code><strong>acts<\/strong><\/code> \u2014 \u0432\u0430\u0448\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0430.<\/p>\n<pre><code class=\"javascript\">nexus.acts.levelUp();<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<h4>\u0427\u0442\u043e \u043b\u0435\u0436\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438<\/h4>\n<p>\u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043c\u044b \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441\u043d\u0430\u0440\u0443\u0436\u0438. \u0417\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442 \u2014 \u044d\u0442\u043e \u0443\u0436\u0435 \u043d\u0435 API, \u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e: \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0438, \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u0445 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u0443\u0447\u0435\u0431\u043d\u043e\u0439 \u0444\u0430\u0431\u0440\u0438\u043a\u0435.<\/p>\n<pre><code class=\"javascript\">function createNexus(options) {  const frozenInitial = snapshot(options.state); \/\/ \u043d\u0435\u0442\u0440\u043e\u043d\u0443\u0442\u0430\u044f \u043a\u043e\u043f\u0438\u044f \u0434\u043b\u044f reset  let state = snapshot(options.state); \/\/ \u0436\u0438\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435  const listeners = new Map(); \/\/ \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0438 \u043f\u043e \u043a\u043b\u044e\u0447\u0430\u043c  const localMiddleware = []; \/\/ \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439  let batchDepth = 0; \/\/ \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439  const pendingKeys = new Set(); \/\/ \u0447\u0442\u043e \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u043e\u0441\u044c \u0437\u0430 \u0431\u0430\u0442\u0447  let currentActionName; \/\/ \u043a\u0430\u043a\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0434\u0451\u0442  \/\/ ...}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u0447\u043a\u0430 \u0437\u0434\u0435\u0441\u044c \u2014 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c, \u0438 \u043a\u0430\u0436\u0434\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0443 \u0441\u0442\u043e\u0440\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0451 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e.<\/p>\n<p><code>frozenInitial<\/code> \u2014 \u0447\u0442\u043e\u0431\u044b <code>reset<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e, \u0430 \u043d\u0435 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c. <code>localMiddleware<\/code> \u2014 \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043a\u0443\u0434\u0430 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438. <code>batchDepth<\/code> \u0441 <code>pendingKeys<\/code> \u2014 \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0441\u0434\u0435\u043b\u0430\u0432\u0448\u0435\u0435 \u043f\u044f\u0442\u044c <code>set<\/code> \u043f\u043e\u0434\u0440\u044f\u0434, \u0440\u0430\u0437\u0431\u0443\u0434\u0438\u043b\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0430 \u043d\u0435 \u043f\u044f\u0442\u044c.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u044f\u0441\u043d\u0438\u0442\u044c. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432 <code>createNexus<\/code> \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u044b: \u043f\u043e\u043a\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u043f\u043e\u0434\u043d\u044f\u0442, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043f\u044f\u0442\u0441\u044f, \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0443\u0445\u043e\u0434\u0438\u0442 \u043e\u0434\u043d\u043e \u2014 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435. \u041e\u0442\u0441\u044e\u0434\u0430 \u0436\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044f <code>currentActionName<\/code>: \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0438\u043c\u0435\u043d\u0435\u043c.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0443\u0442 \u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442 nexus-state \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445.<\/p>\n<h4>\u041e\u0442\u043a\u0443\u0434\u0430 \u043f\u0440\u0438\u0448\u043b\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435<\/h4>\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a, \u0438 \u0441\u0442\u043e\u0440 \u0435\u0433\u043e \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442:<\/p>\n<pre><code class=\"javascript\">nexus.set({ hero }, \"server\");\/\/ \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 meta \u0434\u0430\u043d\u043d\u044b\u043c\u0438nexus.set({ theme }, { source: \"storage\", meta: { restoredAt: Date.now() } });<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u042f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0438 \u0434\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432, \u0438 \u0434\u043e middleware:<\/p>\n<pre><code class=\"javascript\">nexus.subscribe(  (state, context) =&gt; {    console.log(\"\u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0438\u0437\", context?.source);  },  [\"hero\"],);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u0432\u0443\u0447\u0438\u0442 \u043a\u0430\u043a \u043c\u0435\u043b\u043e\u0447\u044c, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u0448\u044c\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u0433\u0434\u0435 \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c.<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u2014 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0421\u0442\u043e\u0440 \u043f\u0438\u0448\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 <code>localStorage<\/code> \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438 \u0447\u0438\u0442\u0430\u0435\u0442 \u0438\u0445 \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435. \u041d\u043e \u0447\u0442\u0435\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 <code>set<\/code>, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u044c \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0442\u0443\u0442 \u0436\u0435 \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b. \u042d\u0445\u043e. \u041e\u0431\u044b\u0447\u043d\u043e \u0441 \u043d\u0438\u043c \u0431\u043e\u0440\u044e\u0442\u0441\u044f \u0444\u043b\u0430\u0433\u0430\u043c\u0438 \u0432\u0440\u043e\u0434\u0435 <code>isHydrating<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438 \u0441\u043d\u044f\u0442\u044c.<\/p>\n<p>\u0422\u0430\u043a \u043c\u044b \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u043a <code>persist<\/code>. \u0415\u0441\u043b\u0438 \u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435, \u0444\u043b\u0430\u0433 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d: <code>persist<\/code> \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u043e\u0442 \u043d\u0435\u0433\u043e \u0441\u0430\u043c\u043e\u0433\u043e. \u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">import { createNexus, persist } from \"nexus-state\";const nexus = createNexus({  state: { name: \"Duncan\", role: \"knight\", level: 1 },});\/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u044f \u0438 \u043a\u043b\u0430\u0441\u0441, \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0443\u0441\u0442\u044c \u0436\u0438\u0432\u0451\u0442 \u043b\u0438\u0448\u044c \u0432 \u043f\u0430\u043c\u044f\u0442\u0438persist(nexus, { key: \"hero\", include: [\"name\", \"role\"] });<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 \u2014 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0438 \u0444\u043b\u0430\u0433\u043e\u0432, \u043d\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>\u0421\u0430\u043c <code>persist<\/code> \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0435 \u2014 \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0438\u0442, \u043e\u0442\u043a\u0443\u0434\u0430 \u043f\u0440\u0438\u0448\u043b\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435. \u0410 \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u043c\u0435\u0448\u0430\u0442\u044c\u0441\u044f <em>\u0434\u043e<\/em> \u0437\u0430\u043f\u0438\u0441\u0438, \u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0438 \u043b\u0435\u0436\u0438\u0442 <code>localMiddleware<\/code>. Middleware \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0437\u043e\u0432\u0443\u0442 \u043c\u0435\u0436\u0434\u0443 \u00ab\u0445\u043e\u0447\u0443 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u00bb \u0438 \u00ab\u043e\u0431\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c\u00bb, \u0438 \u043e\u043d\u0430 \u0432\u0438\u0434\u0438\u0442 \u043e\u0431\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">const stop = nexus.middleware((prev, next, context) =&gt; {  console.log(context?.source, prev.level, \"=&gt;\", next.level);});nexus.set({ level: 10 }, \"server\"); \/\/ server 1 =&gt; 10stop(); \/\/ middleware \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u044f\u0442\u044c<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0437 \u043d\u0435\u0451 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043e\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442 \u0442\u043e, \u0447\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u2014 \u0430 \u0432\u0435\u0440\u043d\u0443\u0432 <code>prev<\/code>, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0438 \u0432\u043e\u0432\u0441\u0435 \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c.<\/p>\n<p>\u0410\u0434\u0430\u043f\u0442\u0435\u0440 \u043a Redux DevTools \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0442\u0430\u043a \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443: \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 \u0432\u0438\u0434\u043d\u043e \u043d\u0435 \u0431\u0435\u0437\u043b\u0438\u043a\u043e\u0435 <code>SET_STATE<\/code>, \u0430 \u0438\u043c\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0441\u0430\u043c\u043e \u2014 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c <code>currentActionName<\/code> \u0438\u0437 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u0444\u0430\u0431\u0440\u0438\u043a\u0438.<\/p>\n<pre><code class=\"javascript\">import { devtools } from \"nexus-state\/devtools\";devtools(nexus, { name: \"hero\" });<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<h4>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a React<\/h4>\n<p>\u042f\u0434\u0440\u043e \u0433\u043e\u0442\u043e\u0432\u043e \u2014 \u0438, \u043a\u0430\u043a \u0438 Flux \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435, \u043e\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043f\u0440\u043e React. \u041d\u043e \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u0441 React-\u0437\u0430\u0434\u0430\u0447\u0438, \u0438 \u043f\u043e\u0440\u0430 \u0435\u0451 \u0437\u0430\u043a\u0440\u044b\u0442\u044c.<\/p>\n<p>\u0425\u0443\u043a\u0438 \u0436\u0438\u0432\u0443\u0442 \u0437\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">import { createReactNexus } from \"nexus-state\/react\";const nexus = createReactNexus({  state: { name: \"Duncan\", role: \"knight\" },  acts: (get, set) =&gt; ({    rename(name) {      set({ name });    },  }),});<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code>createReactNexus<\/code> \u2014 \u0442\u0430 \u0436\u0435 \u0444\u0430\u0431\u0440\u0438\u043a\u0430. \u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u043d\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>createNexus<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443 \u0442\u0440\u0438 \u0445\u0443\u043a\u0430, \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u044b\u0445 \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435 \u0441\u0442\u043e\u0440:<\/p>\n<pre><code class=\"javascript\">return {  ...nexus, \/\/ \u0432\u0441\u0451, \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 createNexus  use,  useSelector,  useRerender,};<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0443 \u044f\u0434\u0440\u0430 \u2014 <code>get<\/code>, <code>set<\/code>, <code>subscribe<\/code>, <code>reset<\/code>, <code>acts<\/code>, <code>middleware<\/code> \u2014 \u043f\u043b\u044e\u0441 React-\u0447\u0430\u0441\u0442\u044c.<\/p>\n<p>\u0410 \u0434\u0430\u043b\u044c\u0448\u0435 \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u0441\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u043e\u0441\u044c:<\/p>\n<pre><code class=\"javascript\">function Header() {  const name = nexus.use(\"name\");  return &lt;h1&gt;Hello, {name}&lt;\/h1&gt;;}function Sidebar() {  const name = nexus.use(\"name\");  return &lt;aside&gt;{name}&lt;\/aside&gt;;}function Profile() {  return (    &lt;button onClick={() =&gt; nexus.acts.rename(\"Artorias\")}&gt;Change name&lt;\/button&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"javascript\">function App() {  return (    &lt;&gt;      &lt;Header \/&gt;      &lt;Sidebar \/&gt;      &lt;Profile \/&gt;    &lt;\/&gt;  );}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0435\u0433\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442. <strong>\u041d\u0435\u0442 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430.<\/strong> \u0414\u0435\u0440\u0435\u0432\u043e \u043d\u0435 \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u043e \u043d\u0438 \u0432\u043e \u0447\u0442\u043e: \u0441\u0442\u043e\u0440 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0438 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0432\u0435\u0440\u0445, \u043d\u0438 \u0442\u044f\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0432\u043d\u0438\u0437 \u043f\u0440\u043e\u043f\u0441\u0430\u043c\u0438.<\/p>\n<p>\u0418 <code>Profile<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u044f \u043d\u0435 \u0447\u0438\u0442\u0430\u0435\u0442, \u043f\u0440\u0438 \u0435\u0433\u043e \u0441\u043c\u0435\u043d\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u2014 \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u043d\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d. <code>use(\"name\")<\/code> \u2014 \u044d\u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u0440\u043e\u0432\u043d\u043e \u043d\u0430 \u043e\u0434\u0438\u043d \u043a\u043b\u044e\u0447, \u0442\u0430 \u0441\u0430\u043c\u0430\u044f <code>Map<\/code> \u0438\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043f\u0440\u043e \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u0435, \u0430 \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u0435 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0435\u0441\u0442\u044c <code>useSelector<\/code>:<\/p>\n<pre><code class=\"javascript\">function Greeting() {  const fullName = nexus.useSelector((state) =&gt; `${state.name} ${state.role}`);  return &lt;span&gt;{fullName}&lt;\/span&gt;;}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041a\u043b\u044e\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b, \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442<\/h4>\n<p><code>createNexus<\/code> \u043b\u0435\u0436\u0438\u0442 \u0432 <code>nexus-state<\/code>, \u0430 <code>createReactNexus<\/code> \u2014 \u0432 <code>nexus-state\/react<\/code>. \u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0435 \u043a\u043e\u0441\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435.<\/p>\n<p>\u042f\u0434\u0440\u043e \u043d\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 React \u0432\u043e\u043e\u0431\u0449\u0435: \u0443 \u043f\u0430\u043a\u0435\u0442\u0430 \u043d\u043e\u043b\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0438 <code>createNexus<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043b\u044e\u0431\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u2014 \u0432 Node, \u0432 \u0432\u043e\u0440\u043a\u0435\u0440\u0435, \u0432 \u0442\u0435\u0441\u0442\u0435 \u0431\u0435\u0437 \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440\u0430. React \u0443\u043a\u0430\u0437\u0430\u043d \u043a\u0430\u043a \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 peer \u0438 \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c, \u043a\u0442\u043e \u0431\u0435\u0440\u0451\u0442 \u0432\u0442\u043e\u0440\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430.<\/p>\n<p>\u042d\u0442\u043e \u0440\u043e\u0432\u043d\u043e \u0442\u0430 \u043c\u044b\u0441\u043b\u044c, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u2014 \u00abFlux \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e React \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442\u00bb, \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0432\u0435\u0434\u0451\u043d\u043d\u0430\u044f \u0434\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0430\u043a\u0435\u0442\u0430. React-\u0445\u0443\u043a\u0438 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u043e\u0440\u0430, \u0430 \u0441\u043b\u043e\u0439 \u043f\u043e\u0432\u0435\u0440\u0445: <code>createReactNexus<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>createNexus<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 React.<\/p>\n<p>\u041a\u0440\u0443\u0433 \u0437\u0430\u043c\u043a\u043d\u0443\u043b\u0441\u044f. \u0422\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0438\u0437 \u043f\u0440\u043e\u043b\u043e\u0433\u0430 \u2014 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0434\u043d\u043e \u0438\u043c\u044f \u0432 \u0442\u0440\u0451\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u2014 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0435\u043c\u044f \u0441\u0442\u0440\u043e\u0447\u043a\u0430\u043c\u0438, \u0438 \u044f \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445.<\/p>\n<h4>\u0427\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430 \u043a\u0430\u0434\u0440\u043e\u043c<\/h4>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <code>createActs<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e \u0444\u0430\u0439\u043b\u0430\u043c, \u043d\u0435 \u0442\u0435\u0440\u044f\u044f \u043d\u0438 \u0442\u0438\u043f\u043e\u0432, \u043d\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0434\u0440\u0443\u0433 \u043a \u0434\u0440\u0443\u0433\u0443. \u0415\u0441\u0442\u044c \u0440\u0435\u0446\u0435\u043f\u0442\u044b \u0434\u043b\u044f Immer \u0438 \u0434\u043b\u044f SSR \u0432 Next.js.<\/p>\n<p>\u0418 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u2014 \u0442\u0438\u043f\u044b. \u042f \u043e\u0431\u0435\u0449\u0430\u043b \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e, \u0438 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u043b, \u043d\u043e \u0441\u043a\u0430\u0436\u0443 \u043e\u0434\u043d\u0443 \u0432\u0435\u0449\u044c: \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u043a\u0438 \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u043f\u0438\u0448\u0443\u0442\u0441\u044f. <code>get(\"level\")<\/code> \u0432\u0435\u0440\u043d\u0451\u0442 \u0447\u0438\u0441\u043b\u043e, \u0430 \u043d\u0435 <code>any<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0442 \u0444\u043e\u0440\u043c\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0413\u043b\u0443\u0431\u043e\u043a\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0442\u0435\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043b\u0430\u044e\u0442 \u044d\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e\u0439.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/92f\/57d\/bbe\/92f57dbbe0a9859ac65c41c1fba6ac0e.png\" width=\"660\" height=\"420\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/92f\/57d\/bbe\/92f57dbbe0a9859ac65c41c1fba6ac0e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/92f\/57d\/bbe\/92f57dbbe0a9859ac65c41c1fba6ac0e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h2>\u0418\u0442\u043e\u0433<\/h2>\n<p>\u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u044f \u0432\u044b\u043d\u0435\u0441: \u043c\u0430\u0433\u0438\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e. \u0412\u0441\u0451, \u0447\u0442\u043e \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043c\u043d\u0435 \u043d\u0435\u043f\u043e\u0441\u0442\u0438\u0436\u0438\u043c\u044b\u043c \u0432 \u0447\u0443\u0436\u0438\u0445 \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u0445, \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0441\u044f\u0442\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u2014 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f, \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0445 \u0437\u043e\u0432\u0451\u0442. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u2014 \u0434\u0435\u0442\u0430\u043b\u0438, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0448\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e, \u043f\u043e\u043d\u044f\u0442\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043d\u043e, \u043f\u0440\u0438\u0437\u043d\u0430\u044e\u0441\u044c, \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0431\u044b\u043b\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0437\u0430\u043d\u044f\u043b\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044e: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0449\u0435\u0439 \u0432\u0430\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u0421\u0430\u043c\u0430\u044f \u0446\u0435\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c nexus-state \u2014 \u043d\u0435 \u0444\u0438\u0447\u0438, \u0430 \u0442\u043e, \u0447\u0442\u043e \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0435\u0441\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a. \u042d\u0442\u043e \u043e\u0434\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0443\u0431\u0440\u0430\u043b\u043e \u0446\u0435\u043b\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0437\u0430\u0442\u044b\u043a\u0430\u044e\u0442 \u0444\u043b\u0430\u0433\u0430\u043c\u0438.<\/p>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u044f \u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u044f \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0445\u043e\u0442\u0435\u043b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043b\u0435\u0436\u0438\u0442 \u0432 <a href=\"https:\/\/www.npmjs.com\/package\/nexus-state\" rel=\"noopener nofollow\">[npm]<\/a>, \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u2014 <a href=\"https:\/\/github.com\/voodoofugu\/nexus-state\" rel=\"noopener nofollow\">[\u043d\u0430 GitHub]<\/a>. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/voodoofugu.github.io\/nexus-state\" rel=\"noopener nofollow\">[\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e]<\/a>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e\u0441\u044e\u0434\u0430 \u2014 \u0441\u043f\u0430\u0441\u0438\u0431\u043e, \u0438 \u043f\u0443\u0441\u0442\u044c \u0432\u0430\u0448 Nexus \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d60\/22e\/b71\/d6022eb713561e21d4cbcc0e0482cc9d.png\" width=\"660\" height=\"420\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/d60\/22e\/b71\/d6022eb713561e21d4cbcc0e0482cc9d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d60\/22e\/b71\/d6022eb713561e21d4cbcc0e0482cc9d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<\/div>\n<p>\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\/1087264\/\">https:\/\/habr.com\/ru\/articles\/1087264\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0425\u043e\u0447\u0443 \u043f\u043e\u0441\u0432\u044f\u0442\u0438\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044e \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 JS \u0438 React, \u0440\u0430\u0441\u043a\u0440\u044b\u0432 \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u0432\u043e\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 &#171;nexus-state&#187;. \u041f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438, \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u0435\u0439 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u043d\u044b \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b \u0438 \u043a\u0430\u043a \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442. \u041f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0441\u0443\u0442\u044c \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043c\u0443 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438.\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435\u0418\u0434\u0435\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u0448\u043b\u0430 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e. \u041f\u0440\u043e\u0439\u0434\u044f \u0432\u0441\u0435 \u0441\u0435\u0440\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u0438\u0433\u0440,\u00abDark Souls\u00bb, \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0440\u0430\u043d\u043d\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u00abDemon&#8217;s Souls\u00bb (\u043f\u043e \u0438\u0440\u043e\u043d\u0438\u0438, \u0432 \u043d\u0435\u0433\u043e \u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0438\u0433\u0440\u0430\u043b), \u0430 \u0442\u043e\u0447\u043d\u0435\u0435, \u043d\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 &#171;Nexus&#187;. \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u0433\u0440\u044b \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0445\u0430\u0431, \u043a\u0443\u0434\u0430 \u0438\u0433\u0440\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438\u0441\u044c, \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0442\u0434\u043e\u0445\u043d\u0443\u0442\u044c.\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c. \u041e\u043d\u043e \u043b\u0430\u0442\u0438\u043d\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u0441\u0432\u044f\u0437\u044c\u00bb, \u00ab\u0443\u0437\u0435\u043b\u00bb, \u00ab\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u00bb \u2014 \u0438 \u0432 \u044d\u0442\u043e\u043c \u0431\u044b\u043b\u0430 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044f: \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0441\u043b\u043e\u0432\u043d\u043e \u043f\u0440\u043e\u0442\u0430\u0433\u043e\u043d\u0438\u0441\u0442 \u0438\u0433\u0440\u044b, \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a Nexus, \u043e\u0442\u043a\u0443\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e. \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u2014 \u0441\u0432\u044f\u0437\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.\u0412 npm \u0438\u043c\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043d\u044f\u0442\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u00abnexus-state\u00bb. \u041e\u0442 \u0441\u0435\u0431\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044e, \u0447\u0442\u043e \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u0443 \u0442\u0435\u0445, \u043a\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u0442\u043e \u0436\u0435 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u043e\u043f\u043e\u0440\u044b \u043d\u0430 \u0442\u0435\u0440\u043d\u0438\u0441\u0442\u043e\u043c \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432 \u0432\u0438\u0434\u0435 \u0442\u043e\u0439 \u0441\u0430\u043c\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u00abnexus-state\u00bb.\u041f\u0440\u043e\u043b\u043e\u0433\u0418\u043c\u0435\u044f \u0437\u0430 \u043f\u043b\u0435\u0447\u0430\u043c\u0438 \u0433\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b UI\/UX \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0437\u043d\u0430\u043d\u0438\u044f JS \u0438 \u043e\u043f\u044b\u0442 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 HTML \u0441 CSS, \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 2021 \u0433\u043e\u0434\u0443 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 React. \u042d\u0442\u043e \u0431\u044b\u043b \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u0432 \u043c\u043e\u0451\u043c \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438.\u042f \u043f\u0438\u0441\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0438\u0437\u0443\u0447\u0430\u043b \u0445\u0443\u043a\u0438 \u0438 \u0440\u0430\u0434\u043e\u0432\u0430\u043b\u0441\u044f: \u043c\u043d\u0435 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u043c\u043e\u0433\u0443 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u0439 UI. \u041d\u043e \u0447\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u0437\u0430\u0434\u0430\u0447\u0438, \u0442\u0435\u043c \u0447\u0430\u0449\u0435 \u044f \u043d\u0430\u0442\u044b\u043a\u0430\u043b\u0441\u044f \u043d\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.\u041e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445 \u2014 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0422\u043e\u0447\u043d\u0435\u0435, \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0418\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u0433\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0432\u0441\u0435 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b. \u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u0440\u0438\u043c\u0435\u0440. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0430\u0439\u0442 \u0438\u0433\u0440\u044b, \u0433\u0434\u0435 \u043d\u0430\u0434\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u0433\u0435\u0440\u043e\u044f \u0438 \u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441 \u0441\u0440\u0430\u0437\u0443 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445:function App() {  return (    &lt;&gt;      &lt;Header \/&gt;      &lt;Sidebar \/&gt;      &lt;Profile \/&gt;    &lt;\/&gt;  );}\u0425\u0443\u043a useState \u0442\u0443\u0442 \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442: \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u2014 \u043e\u043d\u0438 \u0440\u0430\u0437\u044a\u0435\u0434\u0443\u0442\u0441\u044f.\u0412 \u0442\u0435\u043e\u0440\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043e\u0431\u0449\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u0440\u0430\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0438\u0437 \u043f\u0440\u043e\u043f\u0441\u0430\u043c\u0438. \u041d\u043e \u0443 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0435\u0441\u0442\u044c \u0446\u0435\u043d\u0430, \u0438 \u043e\u043d\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0439, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043d\u043e\u0433\u043e: \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0451 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u043e \u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u0443\u0434\u0430 \u043f\u043e\u0434\u043d\u044f\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441 \u044d\u0442\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b.\u041f\u0435\u0440\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u043f\u0430\u0441\u0430\u044e\u0442 \u0445\u0443\u043a\u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043b\u0438\u0448\u043d\u0438\u043c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c. \u0415\u0441\u0442\u044c \u0435\u0449\u0451 useContext \u2014 \u043e \u043d\u0451\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u043e\u0437\u0436\u0435, \u043d\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0443\u0442\u0438 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.\u0418 \u0442\u0443\u0442 \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0430\u044f \u043d\u0435\u043a\u0438\u0439 \u043e\u0431\u0449\u0438\u0439 Store, \u043e\u0442\u043a\u0443\u0434\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.                   Store                     \u2502        \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510        \u2193            \u2193            \u2193      Header       Sidebar      Profile\u0413\u043e\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043d\u043e\u0433\u043e. \u041d\u043e \u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435, \u0438 \u043c\u0435\u043d\u044f \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435: \u043f\u0440\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u044f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438. \u0412\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0430 \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e, \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e. \u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043c\u0430\u0433\u0438\u0435\u0439.\u0418 \u0442\u0443\u0442 \u043c\u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u043e Flux, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442 \u043c\u0435\u043d\u044f \u0441 \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u043c\u0438 \u00ab\u0438\u0437\u0434\u0430\u0442\u0435\u043b\u044c\/\u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u00bb. \u042f \u0432\u043b\u044e\u0431\u043b\u044f\u044e\u0441\u044c \u0432 \u044d\u0442\u0443 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e \u0435\u0451 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c.\u0427\u0443\u0432\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044fFlux \u0443\u0431\u0440\u0430\u043b \u0432\u0441\u044e \u043c\u0430\u0433\u0438\u044e, \u0441\u0434\u0435\u043b\u0430\u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c. \u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u043e\u0440\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 Flux, \u043f\u043e\u043a\u0430 \u0431\u0435\u0437 Dispatcher \u2014 \u043a \u043d\u0435\u043c\u0443 \u043c\u044b \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043f\u043e\u0437\u0436\u0435.\/\/ myStore.js\/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u0430\u0448\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435let state = {  name: &#171;Duncan&#187;,  role: &#171;knight&#187;,};const listeners = new Set(); \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439export const store = {  \/\/ \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445  getState() {    return state;  },  \/\/ \u043c\u0435\u0442\u043e\u0434 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445  setState(newState) {    state = {      &#8230;state,      &#8230;newState,    };    \/\/ \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u0430\u043c, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u044f \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445    listeners.forEach((listener) =&gt; listener());  },  \/\/ \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f  subscribe(listener) {    listeners.add(listener);    return () =&gt; listeners.delete(listener); \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043a\u0438  },};\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u043e \u0442\u0430\u043a:import { store } from &#171;.\/myStore&#187;;console.log(&#171;state -&#171;, store.getState()); \/\/ \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c state &#8212; { name: &#171;Duncan&#187;, role: &#171;knight&#187; }\u0421\u0435\u0439\u0447\u0430\u0441 Flux \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 React. Store \u0443\u043c\u0435\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 \u043e \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438, \u043d\u043e \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c React \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 React-\u0445\u0443\u043a.\/\/ useStore.jsimport { useSyncExternalStore } from &#171;react&#187;;import { store } from &#171;.\/myStore&#187;;export function useStore() {  return useSyncExternalStore(store.subscribe, store.getState);}\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 React-\u0445\u0443\u043a useSyncExternalStore, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Flux Store. \u041a\u043e\u0433\u0434\u0430 Store \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438, React \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.\u041d\u043e useSyncExternalStore \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e Flux. \u042d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0441\u0432\u044f\u0437\u0443\u044e\u0449\u0435\u0435 \u0437\u0432\u0435\u043d\u043e \u043c\u0435\u0436\u0434\u0443 Flux-Store \u0438 React.\u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u0430 \u0441\u0432\u044f\u0437\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 useStore \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 React-\u0445\u0443\u043a\u0438 \u2014 useEffect \u0438 useState.\/\/ useStore.jsimport { useEffect, useState } from &#171;react&#187;;import { store } from &#171;.\/myStore&#187;;export function useStore() {  const [state, setState] = useState(store.getState);  useEffect(() =&gt; {    return store.subscribe(() =&gt; {      setState(store.getState());    });  }, []);  return state;}\u0417\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0432\u0435\u0449\u044c: \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 Store. \u041a\u043e\u0433\u0434\u0430 Store \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0435\u0433\u043e subscribe \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448 callback, \u0430 \u0442\u043e\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 setState. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 React \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440, \u0438 \u0445\u0443\u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0443\u0436\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Store. \u042d\u0442\u043e \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0445\u0443\u043a useSyncExternalStore.\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 useState(store.getState): \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u0430 \u0431\u0435\u0437 \u0432\u044b\u0437\u043e\u0432\u0430 \u2014 \u044d\u0442\u043e \u043b\u0435\u043d\u0438\u0432\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440. React \u0441\u0430\u043c \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0435\u0451 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0430 \u043d\u0435 \u0441\u0430\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0430\u043c Flux \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e React. \u041e\u043d \u043b\u0438\u0448\u044c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0432\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430: \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (getState) \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f (subscribe). \u0412\u0441\u0451, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 \u044d\u0442\u043e \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0430 React-\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438.\u0422\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0442\u0435\u0440\u044f\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0435. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u043e \u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: store.setState \u0441\u043b\u0438\u0432\u0430\u0435\u0442 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043b\u044e\u0431\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438, \u0438 \u043f\u043e \u043a\u043e\u0434\u0443 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b. \u0418 \u0442\u0443\u0442 \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0435\u0439 Dispatcher, \u0441\u0443\u0437\u0438\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430\u0440\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.\/\/ dispatcher.jsconst handlers = new Set(); \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439\/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c dispatcherexport const dispatcher = {  register(handler) {    handlers.add(handler);    return () =&gt; handlers.delete(handler);  },  \/\/ notify \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0434\u0430\u043b\u044c\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u0430\u043c \u0440\u0435\u0448\u0430\u043b, \u043a\u043e\u0433\u0434\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c  dispatch(action, notify) {    handlers.forEach((handler) =&gt; handler(action, notify));  },};\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c dispatcher \u043a \u043d\u0430\u0448\u0435\u043c\u0443 Flux:\/\/ myStore.jsimport { dispatcher } from &#171;.\/dispatcher&#187;;let state = {  name: &#171;Duncan&#187;,  role: &#171;knight&#187;,};const listeners = new Set();\/\/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0434\u0435\u0441\u044c \u2014 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0436\u0438\u0432\u0451\u0442 statedispatcher.register((action, notify) =&gt; {  switch (action.type) {    case &#171;HERO_SET_NAME&#187;:      state = {        &#8230;state,        name: action.payload,      };      break;    case &#171;HERO_SET_ROLE&#187;:      state = {        &#8230;state,        role: action.payload,      };      break;    \/\/ \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0438 \u043d\u0438\u043a\u043e\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0438\u0442    default:      return;  }  notify(); \/\/ \u0437\u0434\u0435\u0441\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0447\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432});export const store = {  getState() {    return state;  },  \/\/ \u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f  dispatch(action) {    \/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e: \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0451 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f    dispatcher.dispatch(action, () =&gt; {      listeners.forEach((listener) =&gt; listener());    });  },  subscribe(listener) {    listeners.add(listener);    return () =&gt; listeners.delete(listener);  },};\u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435 \u0438 \u0442\u043e, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u0441\u0442\u043e\u0440\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f dispatch, \u0430 \u043d\u0435 setState: \u043e\u043d\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0430 \u043d\u0435 \u043a\u0443\u0441\u043e\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0438 \u0441\u0442\u0430\u0440\u043e\u0435 \u0438\u043c\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0443\u0442\u0430\u043b\u043e \u0431\u044b.\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438: type \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u043c, \u0430 payload \u043d\u0435\u0441\u0451\u0442 \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.import { store } from &#171;.\/myStore&#187;;store.dispatch({  type: &#171;HERO_SET_NAME&#187;,  payload: &#171;Artorias&#187;,});\u0422\u0430\u043a \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u0443 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0438 \u0440\u0430\u0434\u043e\u0432\u0430\u043b\u0441\u044f. \u0414\u0432\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u0430, myStore.js \u0438 dispatcher.js, \u2014 \u0438 \u0432 \u043d\u0438\u0445 \u0432\u0435\u0441\u044c \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0438, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u043d\u0435 \u0437\u043d\u0430\u043b \u0431\u044b, \u0437\u0430\u0447\u0435\u043c \u043e\u043d\u0430 \u0442\u0430\u043c.\u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, Flux + createContext\u042f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Flux, \u043d\u043e \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043e\u043d \u0440\u0430\u0437\u0440\u043e\u0441\u0441\u044f \u0438 \u043c\u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e npm \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u042f \u044d\u0442\u043e\u0433\u043e \u043d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u0434\u0435\u043b\u0430\u043b, \u043d\u043e \u044d\u0442\u043e \u0431\u044b\u043b \u0432\u044b\u0437\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u0440\u0438\u043d\u044f\u0442\u044c: \u0432 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u044f \u043c\u043e\u0433 \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0441\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u043d\u044b\u043d\u0435\u0448\u043d\u0438\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u043c. \u0414\u0430 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e.\u0418\u0442\u0430\u043a, \u044f \u043d\u0430\u0447\u0430\u043b \u2014 \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443 \u0432\u0435\u0441\u044c\u043c\u0430 \u043d\u0435\u0443\u043c\u0435\u043b\u043e \u2014 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u0412 \u043f\u0435\u0440\u0432\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e Flux-\u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 React \u2014 createContext \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440.\u041d\u0430\u0447\u043d\u0443 \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 createContext, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u0438\u0434\u0435\u043b\u0438 \u0438\u043b\u0438 \u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u0430\u043c\u0438:\/\/ MyProvider.jsimport { createContext, useState } from &#171;react&#187;;const MyContext = createContext(null);function MyProvider({ children }) {  const [hero, setHero] =&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-496276","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/496276","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=496276"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/496276\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=496276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=496276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=496276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}