{"id":342800,"date":"2022-12-17T09:00:15","date_gmt":"2022-12-17T09:00:15","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=342800"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2022-12-17T09:00:15","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=342800","title":{"rendered":"<span>Redux \u0432 Angular. \u0422\u0443\u0434\u0430 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/0c2\/5ea\/5c1\/0c25ea5c1c4aebc7fe6fca63425cb0f7.jpg\" width=\"1920\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0c2\/5ea\/5c1\/0c25ea5c1c4aebc7fe6fca63425cb0f7.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0430\u0440\u0443 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0442\u044e\u0433\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c \u043f\u0440\u043e <a href=\"https:\/\/redux.js.org\" rel=\"noopener noreferrer nofollow\">Redux<\/a>. \u0421\u0435\u0439\u0447\u0430\u0441 redux \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u043c-\u0442\u043e \u043e\u0431\u044b\u0434\u0435\u043d\u043d\u044b\u043c \u0432 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041d\u0430 \u043f\u043e\u0440\u043e\u0433\u0435 2023 \u0433\u043e\u0434\u0430 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f redux \u0432 Angular, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u0445, \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a \u043a\u0430\u043a\u0438\u043c \u0432\u044b\u0432\u043e\u0434\u0430\u043c \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u0437\u0430 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0437\u0431\u0438\u0442\u0430 \u043d\u0430 \u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430:<\/p>\n<ul>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0433\u0434\u0435 \u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0435 \u043f\u0440\u043e redux, \u0433\u0434\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e <code>redux<\/code> \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Angular.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u0433\u0434\u0435 \u044f \u043e\u0431\u043e\u0431\u0449\u0430\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u043c <code>redux<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u044e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 <code>state<\/code>.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0412 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u043e\u0432 \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u044f \u043f\u0438\u0441\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u044e \u0438 \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e <code>redux<\/code>, \u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<\/blockquote>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u2014 <a href=\"https:\/\/redux.fafn.ru\" rel=\"noopener noreferrer nofollow\">redux.fafn.ru<\/a>.<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/redux.fafn.ru\/assets\/images\/redux.jpg&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux \u0432 Angular<\/span><\/div>\n<p><a href=\"https:\/\/redux.fafn.ru\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">redux.fafn.ru<\/a><\/div>\n<\/div>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 &#8212; <a href=\"https:\/\/github.com\/Fafnur\/angular-samples\" rel=\"noopener noreferrer nofollow\">angular-samples<\/a>.<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/opengraph.githubassets.com\/5dfc309f7cb3d8619c5baffeb760dd716507804a675ec957b889d09ec4afd014\/Fafnur\/angular-samples&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>GitHub &#8212; Fafnur\/angular-samples: Samples of using different solutions in Angular<\/span><\/div>\n<p><a href=\"https:\/\/github.com\/Fafnur\/angular-samples\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">github.com<\/a><\/div>\n<\/div>\n<ul>\n<li>\n<p>\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u0432 <a href=\"https:\/\/github.com\/Fafnur\/angular-samples\/tree\/main\/apps\/redux\" rel=\"noopener noreferrer nofollow\">app\/redux<\/a><em>.\u00a0<\/em><\/p>\n<\/li>\n<li>\n<p><em>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432<\/em> <a href=\"https:\/\/github.com\/Fafnur\/angular-samples\/tree\/main\/libs\/redux\" rel=\"noopener noreferrer nofollow\">libs\/redux<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f!<\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/125\/059\/157\/125059157a87a5fd2cf096da6697ae62.gif\" width=\"800\" height=\"518\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/125\/059\/157\/125059157a87a5fd2cf096da6697ae62.gif\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e redux<\/h3>\n<p>\u0412 \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u043e\u043c\u043d\u044b\u0445 \u0432\u0435\u0447\u0435\u0440\u043e\u0432 \u0432 \u0410\u043b\u043c\u0430\u0442\u0435, \u043a\u043e\u0433\u0434\u0430 \u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0434\u0435\u043b\u0430\u043b \u0440\u0435\u0432\u044c\u044e, \u043a\u043e \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u0430 \u043c\u044b\u0441\u043b\u044c, \u0430 \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u0445\u0430\u0431\u0440 \u043f\u0440\u043e <code>redux<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u0438 \u0441\u043a\u0430\u0437\u0430\u043b \u0431\u044b \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<blockquote>\n<p>\u0412\u0435\u0434\u044c \u044f \u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u044e \u0438 \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043a \u0447\u0435\u043c\u0443 \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f &#8212; \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0412\u0435\u0434\u044c \u0447\u0435\u043c \u043f\u0440\u043e\u0449\u0435 \u043a\u043e\u0434, \u0442\u0435\u043c \u043f\u0440\u043e\u0449\u0435 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c.<\/p>\n<\/blockquote>\n<p>\u0418 \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0438\u0434\u0435\u044f: \u201c\u0417\u0430 \u0441\u0443\u0431\u0431\u043e\u0442\u0443 \u0441\u0434\u0435\u043b\u0430\u044e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u00a0 \u0432\u043e\u0441\u043a\u0440\u0435\u0441\u0435\u043d\u044c\u0435 \u043d\u0430\u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u044e! \u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0430\u043d!\u201d.<\/p>\n<blockquote>\n<p><em>\u0421\u0442\u0430\u0442\u044c\u044e \u044f \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438\u043c \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c: \u201c\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0447\u0442\u043e \u043f\u0438\u0448\u0443\u0442 \u0443\u043c\u043d\u044b\u0435 \u043b\u044e\u0434\u0438, \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0436\u0435!\u201d. \u041d\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043f\u043e\u0432\u0435\u0441\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/em><\/p>\n<\/blockquote>\n<p>\u0412 \u0442\u043e\u0442 \u0432\u0435\u0447\u0435\u0440 \u044f \u0431\u044b\u043b \u043f\u043e\u043b\u043e\u043d \u044d\u043d\u0442\u0443\u0437\u0438\u0430\u0437\u043c\u0430 \u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u0437\u0430 \u043f\u0440\u043e\u0435\u043a\u0442. \u042d\u0442\u043e \u0431\u044b\u043b \u0432\u0435\u0447\u0435\u0440 \u043f\u044f\u0442\u043d\u0438\u0446\u044b.\u00a0\u00a0<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0432\u0435\u0447\u0435\u0440\u0430\u043c\u0438 \u043f\u044f\u0442\u043d\u0438\u0446\u044b \u043c\u044b \u0445\u043e\u0434\u0438\u043c \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u0432 \u0431\u0430\u0440, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448 \u0438\u0434\u0435\u0439\u043d\u044b\u0439 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0442\u0435\u043b\u044c \u0438 \u043f\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440 \u0447\u0443\u0442\u044c \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u0441\u044f \u043f\u043e\u043f\u043e\u043b\u0430\u043c \u043f\u043e\u0441\u043b\u0435 \u0434\u0430\u0443\u043d\u0445\u0438\u043b\u043b\u0430 \u0438 \u043e\u0442\u043b\u0435\u0436\u0438\u0432\u0430\u043b\u0441\u044f \u0432 \u0433\u043e\u0441\u0442\u0438\u043d\u0438\u0446\u0435, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0435\u0447\u0435\u0440 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0439.<\/p>\n<p>\u042f \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0442\u043a\u0440\u044b\u043b \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0437\u0430\u0448\u0435\u043b \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 Angular. \u0412\u0437\u044f\u043b \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u0432 Angular, \u0438 \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>redux<\/code>.<\/p>\n<p>\u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0437\u0432\u0430\u043b \u0435\u0433\u043e <code>redux<\/code>.\u00a0<\/p>\n<p>\u041d\u043e \u0432\u0441\u0435 \u0437\u0430\u0441\u0442\u043e\u043f\u043e\u0440\u0438\u043b\u043e\u0441\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0448\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <code>redu\u0445<\/code> \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0447\u0435\u0433\u043e, \u044f \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>redux<\/code>?<\/p>\n<\/li>\n<li>\n<p>\u0410 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e \u0438\u0445 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435?<\/p>\n<\/li>\n<li>\n<p>\u0410 \u043a\u0430\u043a \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0432\u0441\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435? \u041a\u0430\u043a \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c?<\/p>\n<\/li>\n<li>\n<p>\u0418 \u0447\u0442\u043e \u043d\u0430 \u0441\u0447\u0435\u0442 <code>UI<\/code>? \u041a\u0430\u0436\u0434\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b? \u0422\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0435?<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043d\u0430\u043b\u0438 \u043c\u0435\u043d\u044f \u0432 \u0441\u0442\u0443\u043f\u043e\u0440. \u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/ngrx.io\/\" rel=\"noopener noreferrer nofollow\">Ngrx<\/a> \u0434\u043b\u044f <code>redux<\/code>. \u041d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e \u0435\u0441\u043b\u0438 \u044f \u043d\u0430\u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e <code>Ngrx<\/code>, \u0438 \u043d\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e <a href=\"https:\/\/www.ngxs.io\/\" rel=\"noopener noreferrer nofollow\">Ngxs<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/opensource.salesforce.com\/akita\/\" rel=\"noopener noreferrer nofollow\">Akita<\/a>. \u0422\u043e\u0433\u0434\u0430 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e \u0442\u0440\u0438 \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438: <code>Ngrx<\/code>, <code>Ngxs<\/code> \u0438 <code>Akita<\/code>.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0441\u043e\u0431\u043e\u0439 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 <a href=\"https:\/\/nx.dev\" rel=\"noopener noreferrer nofollow\">Nx<\/a>, \u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0435\u0448\u0438\u043b\u0430\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0440\u0435\u0448\u0438\u043b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/thomasburlesonia.medium.com\/ngrx-facades-better-state-management-82a04b9a1e39\" rel=\"noopener noreferrer nofollow\">Facade<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043b \u0431\u044b \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 <code>redux<\/code>. \u0418 \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0430 \u0431\u044b \u0441\u0432\u043e\u0439 Facade, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u043e\u0439 \u0441\u0430\u0439\u0442, \u0433\u0434\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043b\u0438\u0441\u044c \u0431\u044b \u0441\u043f\u0438\u0441\u043a\u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439, \u0430 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043f\u0440\u0435\u0432\u044c\u044e &#171;\u041d\u043e\u0432\u043e\u0441\u0442\u0438&#187; \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043f\u043e\u043b\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u043e\u0441\u0442\u0438.<\/p>\n<blockquote>\n<p>\u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b \u0447\u0438\u0442\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0441\u0442\u0438, \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u0432\u0437\u044f\u0442\u044c \u0441 \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u2014 \u041f\u0430\u043d\u043e\u0440\u0430\u043c\u044b.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0431\u044b\u043b \u0432\u044b\u0432\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 <code>redux<\/code>. \u0415\u0441\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0432 <code>AppModule<\/code> \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 <code>redux<\/code>, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439.<\/p>\n<p>\u042f \u0434\u043e\u043b\u0433\u043e \u0445\u043e\u0434\u0438\u043b \u0432\u043e\u043a\u0440\u0443\u0433 \u0434\u0430 \u043e\u043a\u043e\u043b\u043e \u0438 \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <code>redux<\/code> \u0432 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0431\u043e\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0435\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u041a\u0430\u043a \u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0e1\/747\/1cf\/0e17471cf453af41ff3846cab4545f0b.gif\" alt=\"\u0417\u0430\u043f\u0443\u0441\u043a shell \u0438 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439\" title=\"\u0417\u0430\u043f\u0443\u0441\u043a shell \u0438 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439\" width=\"800\" height=\"490\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0e1\/747\/1cf\/0e17471cf453af41ff3846cab4545f0b.gif\"\/><figcaption>\u0417\u0430\u043f\u0443\u0441\u043a shell \u0438 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/figcaption><\/figure>\n<p>\u0414\u043e\u043b\u0436\u0435\u043d \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443, \u0447\u0442\u043e \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u043d\u0435\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b. \u042f \u0431\u044b\u043b \u0437\u043d\u0430\u043a\u043e\u043c \u0441 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c, \u043d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u0432 \u0442\u0430\u043d\u043a\u0435: \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u2013 \u044d\u0442\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u0435\u0434\u0430\u0432\u043d\u044f\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u043f\u0440\u043e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b &#8212; <a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/701152\" rel=\"noopener noreferrer nofollow\">(\u041c\u0438\u043a\u0440\u043e)\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0438 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack<\/a>. \u0412\u0441\u0435\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f. <\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0435\u0433\u043e <a class=\"mention\" href=\"\/users\/findyourdream\">@FindYourDream<\/a> \u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u043b \u2013 \u044d\u0442\u043e, \u043a\u0430\u043a \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0432 NX.<\/p>\n<p>\u0412 <code>Nx<\/code> \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0438 \u0443 \u0432\u0430\u0441 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0435 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u0441\u044f\u0442\u043e\u043a <code>remote<\/code>:<\/p>\n<pre><code class=\"bash\">nx g \/angular:host redux\/dashboard --remotes=redux\/ngrx,redux\/ngxs,redux\/akita<\/code><\/pre>\n<blockquote>\n<p>\u042d\u0442\u043e \u0432\u0441\u0435! \u042d\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0432\u0441\u0435, \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u0412\u0441\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b, \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<\/blockquote>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<pre><code class=\"bash\">nx serve redux-dashboard --devRemotes=redux-ngrx,redux-ngxs,redux-akita<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><code>localhost:4200<\/code> \u2014 <code>redux-dashboard<\/code>, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><code>localhost:4201<\/code> \u2014 <code>redux-ngrx<\/code>, remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 c <code>Ngrx<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>localhost:4202<\/code> \u2014 <code>redux-ngxs<\/code>, remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 c <code>Ngxs<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>localhost:4203<\/code> \u2014 <code>redux-akita<\/code>, remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 c <code>Akita<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 <code>remote<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 <code>Nx<\/code>.<\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u043e\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435, \u0442\u043e \u0432 <code>Nx<\/code> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u043e\u043c\u0438\u043c\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u043d\u0430\u0447\u0435 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u043d\u043e\u0432\u043e\u0441\u0442\u044c: <code>\/post\/id<\/code>, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0432 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0443\u0442\u044c \u0431\u0443\u0434\u0435\u0442 <code>\/remote\/post\/id<\/code>. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0433\u0438\u044e \u0441 \u043f\u0443\u0442\u044f\u043c\u0438. \u041b\u0438\u0431\u043e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0442\u043e\u043a\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u043f\u0443\u0442\u0438, \u0433\u0434\u0435 \u0434\u043b\u044f \u043f\u0443\u0442\u0435\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0444\u0438\u043a\u0441, \u043b\u0438\u0431\u043e \u043f\u0438\u0448\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435: \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0435\u0444\u0438\u043a\u0441.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u041e\u0441\u043e\u0431\u0443\u044e \u0440\u0430\u0434\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0435\u043f\u043b\u043e\u0439 \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.\u00a0<\/p>\n<\/blockquote>\n<p>\u0421\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <code>angular<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0430\u0442\u0438\u043a\u0438. \u0414\u043b\u044f \u0440\u0430\u0437\u0434\u0430\u0447\u0438 \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 <code>nginx<\/code>. <\/p>\n<p>\u042f \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/redux.fafn.ru\" rel=\"noopener noreferrer nofollow\">redux.fafn.ru<\/a>\u00a0 &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ngrx.fafn.ru\" rel=\"noopener noreferrer nofollow\">ngrx.fafn.ru<\/a> &#8212; \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043e <code>ngrx<\/code>;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ngxs.fafn.ru\" rel=\"noopener noreferrer nofollow\">ngxs.fafn.ru<\/a> &#8212; \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043e <code>ngxs<\/code>;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/akita.fafn.ru\" rel=\"noopener noreferrer nofollow\">akita.fafn.ru<\/a> &#8212; \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043e <code>akita<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0423 \u043c\u0435\u043d\u044f \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u044e \u0434\u0435\u043c\u043e \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043d\u0430 \u043d\u0435\u043c \u0443\u0436\u0435 \u0435\u0441\u0442\u044c node \u0438 nginx. \u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0430\u043f\u043e\u0447\u043a\u0443 \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0441\u043f\u0443\u043b\u0438\u043b \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u043e\u0431\u0440\u0430\u043b \u043f\u0440\u043e\u0434 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0421\u043e\u0437\u0434\u0430\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 nginx \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u043e\u0442\u043a\u0440\u044b\u043b \u0441\u0430\u0439\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c \u2013 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0430\u0447\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043a\u043e\u0440\u0441\u0430\u043c\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442, \u0442\u043e \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0435\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043b \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u043e\u0441\u0441\u0434\u043e\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 production \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435. \u042d\u0442\u043e \u0447\u0440\u0435\u0432\u0430\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0441 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p><em>\u041f\u043e\u043c\u043d\u044e, \u043f\u043e \u043c\u043e\u043b\u043e\u0434\u043e\u0441\u0442\u0438 \u043c\u044b \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u043e\u0439\u00a0 \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u044b. \u042f \u0442\u043e\u0433\u0434\u0430 \u0431\u044b\u043b \u0441\u043b\u0430\u0431\u043e\u0432\u0430\u0442 \u0432 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u0438 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0436\u0435 \u0434\u0435\u043d\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b \u0437\u0430\u043f\u0443\u0449\u0435\u043d, \u0443 \u043d\u0430\u0441 \u0443\u043a\u0440\u0430\u043b\u0438 \u0432\u0441\u0435 \u0434\u0435\u043d\u044c\u0433\u0438 \u0441\u043e \u0441\u0447\u0435\u0442\u0430 &#8212; \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0434\u0435\u0441\u044f\u0442\u044c \u0431\u0430\u043a\u0441\u043e\u0432. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u044f \u043d\u0430\u0447\u0430\u043b \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438.<\/em>\u00a0<\/p>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0434\u0443\u043d\u0441\u0442\u0432\u0430 \u0438 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0438 \u044d\u0442\u043e\u0433\u043e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c73\/962\/5d3\/c739625d315d307a809ad465c1d7ae78.gif\" width=\"800\" height=\"570\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c73\/962\/5d3\/c739625d315d307a809ad465c1d7ae78.gif\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0446\u0438\u043a\u043b \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 \u043c\u0435\u0434\u0438\u0443\u043c\u0435<\/h3>\n<p>\u0421\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 &#8212; \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u044c\u0438 \u0434\u043b\u044f \u0434\u0443\u0448\u0438.\u00a0<\/p>\n<blockquote>\n<p>\u042d\u0442\u043e \u043a\u0430\u043a-\u0431\u0443\u0434\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043a\u0443 \u0431\u0430\u0440\u043e\u043b\u044b \u0438\u043b\u0438 \u0431\u0430\u0440\u0431\u0430\u0440\u0435\u0441\u043a\u0438 \u0432 \u043f\u044f\u0442\u043d\u0438\u0446\u0443 \u0432\u0435\u0447\u0435\u0440\u043e\u043c \u0438 \u0441\u0434\u043e\u0431\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u043e\u043b\u0438\u0432\u043a\u0430\u043c\u0438, \u043e\u0440\u0435\u0445\u0430\u043c\u0438 \u0438 \u0433\u0440\u0430\u043d\u0430 \u043f\u0430\u0434\u0430\u043d\u043e.<\/p>\n<\/blockquote>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044f \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 <a href=\"https:\/\/habr.com\/\" rel=\"noopener noreferrer nofollow\">habr<\/a> \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0418 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 \u043c\u0435\u0434\u0438\u0443\u043c\u0435. \u0420\u0430\u0437\u0431\u0438\u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u0435\u0439 \u0443 \u043c\u0435\u043d\u044f \u0432\u044b\u0448\u0435\u043b \u0446\u0438\u043a\u043b \u0438\u0437 \u0442\u0440\u0438\u043d\u0430\u0434\u0446\u0430\u0442\u0438 \u0441\u0442\u0430\u0442\u0435\u0439.<\/p>\n<p>\u0422\u0443\u0434\u0430 \u0432\u043e\u0448\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u0438:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-591ba785e0fc\" rel=\"noopener noreferrer nofollow\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81-%D0%BC%D0%B8%D0%BA%D1%80%D0%BE%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B0%D0%BC%D0%B8-5e03618e0cc8\" rel=\"noopener noreferrer nofollow\"><u>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u043c\u0438<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2-e905c4f6354d\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D1%84%D0%B5%D0%B9%D0%BA%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE-api-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B5%D0%B9-11be9cdbea0e\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0435\u0439\u043a\u043e\u0432\u043e\u0433\u043e API \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-ui-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D0%B4%D0%BB%D1%8F-%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B5%D0%B9-51482a493016\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%BA%D0%BE%D0%BD%D1%86%D0%B5%D0%BF%D1%82%D1%8B-%D0%B8-%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D0%B8%D1%8F-%D0%B2-redux-34834a395265\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u043d\u0446\u0435\u043f\u0442\u044b \u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u0432 Redux<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%80%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D0%B0%D1%86%D0%B8%D0%B8-%D0%BF%D0%BE-%D0%BE%D1%80%D0%B3%D0%B0%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8-state-2f122e1b8cd\" rel=\"noopener noreferrer nofollow\"><u>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 state<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-ngrx-%D0%B2-%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D0%B8-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-82b0f12a0396\" rel=\"noopener noreferrer nofollow\"><u>Ngrx \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-ngxs-8a5e330bc41e\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Ngxs<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-akita-81456b166675\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Akita<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%80%D0%B0%D0%B7%D0%BD%D1%8B%D1%85-%D1%80%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B9-redux-ngrx-vs-ngxs-vs-akita-c756c2f2f4a4\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux. Ngrx vs Ngxs vs Akita<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-state-management-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%BC%D0%B8-%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0%D0%BC%D0%B8-angular-c93691e0074c\" rel=\"noopener noreferrer nofollow\">State management \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 Angular<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-791a07dddc15\" rel=\"noopener noreferrer nofollow\"><u>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/u><\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0426\u0438\u043a\u043b \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 <code>redux<\/code>.  \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043e\u0431\u0437\u043e\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043d\u044e\u0430\u043d\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0435 \u043f\u0440\u043e redux<\/h2>\n<h3>\u041a\u043e\u043d\u0446\u0435\u043f\u0442\u044b \u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f Redux<\/h3>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e <code>redux<\/code>. <\/p>\n<blockquote>\n<p>\u042f \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443, \u043d\u043e \u043d\u0430\u043f\u043e\u043c\u043d\u044e \u0442\u0435\u043c, \u043a\u0442\u043e \u0437\u0430\u0431\u044b\u043b \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435.<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/8c0\/514\/f07\/8c0514f07d952704abca66565c96afb1.jpg\" width=\"1400\" height=\"735\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8c0\/514\/f07\/8c0514f07d952704abca66565c96afb1.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0441\u044f \u0441\u0443\u0442\u044c <code>redux<\/code> \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0430 \u0432\u044b\u0448\u0435 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435.<\/p>\n<ol>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437 <code>store<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0442\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442 (\u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442) \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u0430\u043a-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 <code>store<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u042d\u043a\u0448\u0435\u043d \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>store<\/code>. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a <code>store<\/code> \u0431\u044b\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d, \u0442\u043e \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ol>\n<p>\u0413\u0434\u0435 \u0436\u0435 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442?<\/p>\n<p>\u0427\u0430\u0441\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a. \u041d\u0430\u0436\u0430\u043b\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0430 1.<\/p>\n<blockquote>\n<p>\u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u0445\u0443\u0434\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f redux. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 redux \u0434\u043b\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u0432. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 JavaScript, \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 \u2013 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c \u0441\u0447\u0430\u0441\u0442\u044c\u0435.<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/21d\/037\/afe\/21d037afe29c72b57b790fb67f59d236.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Redux\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Redux\" width=\"1440\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/21d\/037\/afe\/21d037afe29c72b57b790fb67f59d236.gif\"\/><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Redux<\/figcaption><\/figure>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430.<\/p>\n<ol>\n<li>\n<p> \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432 <code>UI<\/code> \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 &#171;\u043a\u043b\u0438\u043a&#187; \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p> \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0448\u0435\u043d. <\/p>\n<\/li>\n<li>\n<p>\u042d\u043a\u0448\u0435\u043d \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 <code>state<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0441\u0442\u0435\u0439\u0442, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f <code>UI<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u043a API.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/efe\/abb\/229\/efeabb2296b2461d7aedc0e0e748a93d.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u043a API\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u043a API\" width=\"1440\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/efe\/abb\/229\/efeabb2296b2461d7aedc0e0e748a93d.gif\"\/><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u043a API<\/figcaption><\/figure>\n<p>\u0412\u0441\u0435 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a API. \u0418 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u043e\u0442\u0432\u0435\u0442, \u044d\u043a\u0448\u0435\u043d \u043b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u043b\u0438\u0431\u043e \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439. <\/p>\n<h3>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 Redux<\/h3>\n<p>\u041a \u043c\u043e\u0435\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0430\u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d <code>redux<\/code>. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443, \u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <code>action<\/code>, <code>reducer<\/code> \u0438 <code>state<\/code>.<\/p>\n<p><strong>\u0427\u0442\u043e \u0436\u0435 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043a\u0448\u0435\u043d \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435?<\/strong><\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u044d\u043a\u0448\u0435\u043d\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>type<\/code>. \u0422\u0438\u043f \u044d\u043a\u0448\u0435\u043d\u0430    \u044d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<blockquote>\n<p>\u0412 \u0440\u0430\u0437\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043f\u043e \u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0448\u0435\u043d\u043e\u0432. \u0412 \u043e\u0434\u043d\u043e \u0432\u0440\u0435\u043c\u044f \u0431\u044b\u043b\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0448\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u0437\u0430\u0442\u0435\u043c \u043e\u0442 \u044d\u0442\u043e\u0439 \u0437\u0430\u0442\u0435\u0438 \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0438 \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043a \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0442\u0438\u043f\u043e\u043c.<\/p>\n<\/blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u044d\u043a\u0448\u0435\u043d\u043e\u0432:\u00a0<\/p>\n<pre><code class=\"typescript\">{ type: 'Post Load' } { type: 'Post Load Success' }  { type: 'Post Load Failure' }<\/code><\/pre>\n<p>\u0421\u0430\u043c\u043e\u0439 \u0432\u0430\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e <code>redux<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>State<\/code>.\u00a0<\/p>\n<blockquote>\n<p>\u041d\u0435 \u0437\u0440\u044f \u0436\u0435 <code>redux<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>state management<\/code>\u2019\u043e\u043c. \u0411\u044b\u043b\u043e \u0431\u044b \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0441\u0442\u0435\u0439\u0442 \u0431\u044b\u043b \u0431\u044b \u043d\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u041d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u0434\u0430, \u0433\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0443\u043c\u0443\u0434\u0440\u044f\u044e\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>redux<\/code> \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0446\u0435\u043b\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0442\u043e \u0435\u0441\u0442\u044c \u0435\u0441\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u0442\u0435\u0439\u0442 \u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044d\u043a\u0448\u0435\u043d\u043e\u0432.\u00a0<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0434 <code>state<\/code> \u044f \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. <code>Store<\/code> \u044d\u0442\u043e \u0441\u0435\u0440\u0432\u0438\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u0432\u0441\u0435 state \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b.<\/p>\n<p>Store \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>state<\/code>.<\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 <code>store<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0433\u0434\u0435 \u043a\u043b\u044e\u0447\u043e\u043c \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0430, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 <code>state<\/code>.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>store<\/code> \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0435\u0439\u0442\u043e\u0432 <code>user<\/code> \u0438 <code>posts<\/code>:<\/p>\n<pre><code class=\"typescript\">{    users: {     current: { id: number };     loaded: boolean   }   posts: {      entities: { [key: number]:  { id: number, title: string } },      ids: number[],      loaded: boolean   },  } <\/code><\/pre>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0440\u0430\u0437\u043d\u043e\u0439, \u0438\u043b\u0438 \u043d\u0435 \u0431\u044b\u0442\u044c \u0432\u043e\u0432\u0441\u0435.\u00a0<\/p>\n<blockquote>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 Ngrx \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0432 Ngxs \u044d\u043a\u0448\u0435\u043d\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435, \u0442\u0430\u043a \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435, \u0430 \u0432 Akita \u0440\u0435\u0448\u0438\u043b\u0438 \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u043b\u044f \u0441\u043b\u0430\u0431\u0430\u043a\u043e\u0432 \u0438 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0438\u0445 \u0441\u043e\u0432\u0441\u0435\u043c*.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0431\u044b\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b <code>actions<\/code> \u0438 <code>state<\/code>, \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440.<\/p>\n<p>\u0420\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0447\u0438\u0441\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <code>switch-case<\/code> \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e, \u0433\u0434\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0438\u043f \u044d\u043a\u0448\u0435\u043d\u0430:<\/p>\n<pre><code class=\"typescript\">export function postReducer(state: PostState, action: Action): PostState {   let result: PostState;    switch (action.type) {     case '[Post] Load Success':       result = {          ...state,          posts: action.posts ?? [],         loaded: true       };       break;     default:       result = state ?? initialPostState;   }    return result; } <\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u044d\u043a\u0448\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430.<\/p>\n<p>\u041d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u044d\u043a\u0448\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430. \u042d\u0442\u043e \u043b\u0438\u0448\u044c \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e\u043c\u0443 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u043a\u0448\u0435\u043d, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440, \u0438 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u0435\u0441\u0442 \u043d\u0430 \u0434\u0430\u043d\u043d\u0443\u044e \u043c\u0443\u0442\u0430\u0446\u0438\u044e.<\/p>\n<h3>Ngrx \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438<\/h3>\n<p><code>Ngrx<\/code> \u043c\u043e\u044f \u043b\u044e\u0431\u0438\u043c\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f redux \u0432 Angular. \u041e\u043d \u0431\u044b\u043b \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c, \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0448\u0435\u0441\u0442\u044c \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u043d\u043e \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438 \u043e\u0434\u043d\u043e\u0433\u043e &#8212;<code>@ngrx\/store<\/code>.<\/p>\n<blockquote>\n<p>\u0410 \u0442\u0430\u043a \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u043a\u0443\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c: <code>@ngrx\/effects<\/code> ,<code>@ngrx\/entity<\/code> , <code>@ngrx\/router-store<\/code>,<code>@ngrx\/schematics<\/code> , <code>@ngrx\/store-devtools<\/code>.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0432 <code>AppModule<\/code>.<\/p>\n<p>\u0418 \u043f\u043e\u0434 \u043a\u043e\u043d\u0435\u0446 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 feature store. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">ng g @ngrx\/angular:ngrx post --module=libs\/redux\/ngrx\/posts\/state\/src\/lib\/posts-state.module.ts<\/code><\/pre>\n<blockquote>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u043a\u0438 ngrx \u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043e, \u043a\u0430\u043a \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b. \u0427\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u00a0\u0434\u043b\u044f eslint &#8212; eslint-plugin-ngrx.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0431\u0443\u0434\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430:<\/p>\n<pre><code class=\"bash\">posts \u251c\u2500\u2500 +state \u2502   \u251c\u2500\u2500 post.actions.ts \u2502   \u251c\u2500\u2500 post.effects.ts \u2502   \u251c\u2500\u2500 post.reducer.ts \u2502   \u2514\u2500\u2500 post.selectors.ts \u2514\u2500\u2500 posts-state.module.ts<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 <code>redux<\/code>:<\/p>\n<ul>\n<li>\n<p><code>post.actions.ts<\/code> \u2014 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u044d\u043a\u0448\u0435\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p><code>post.effects.ts<\/code> \u2014 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p><code>post.reducer.ts<\/code> \u2014 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>state<\/code> \u0438 <code>reducer<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>post.selectors.ts<\/code> \u2014 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 <code>Ngrx<\/code> \u044d\u043a\u0448\u0435\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>createAction<\/code> \u0438 <code>props<\/code>.\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0448\u0435\u043d\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">export const load = createAction('[Post] Load');  export const loadSuccess = createAction('[Post] Load Success', props&lt;{ posts: Post[] }>());<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043f\u043d\u0443\u0442\u044c \u0447\u0443\u0442\u044c \u0433\u043b\u0443\u0431\u0436\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e <code>createAction<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <code>Action<\/code>:<\/p>\n<pre><code class=\"typescript\">export interface Action {     type: string; }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c post.reducer.ts, \u0442\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c state, initialState \u0438 reducer.<\/p>\n<blockquote>\n<p>\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e <code>ngrx<\/code> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0435\u0439\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>@ngrx\/entity<\/code>. \u042d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u0432\u0438\u0434\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0438\u0437 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435.<\/p>\n<\/blockquote>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0441\u0442\u0435\u0439\u0442\u0430, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e <code>state<\/code>:<\/p>\n<pre><code class=\"typescript\">export interface PostState\u00a0 { \u00a0\u00a0readonly loaded: boolean; \u00a0\u00a0readonly posts: Post[] | null; }  export const initialPostState: PostState = { \u00a0\u00a0loaded: false, };<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 <code>state<\/code> \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>ngrx\/entity<\/code>:<\/p>\n<pre><code class=\"typescript\">export interface PostState extends EntityState&lt;Post> { \u00a0\u00a0readonly loaded: boolean; }  export const postAdapter = createEntityAdapter&lt;Post>({ \u00a0\u00a0selectId: (entity) => entity.uuid, });  export const initialPostState: PostState = postAdapter.getInitialState({ \u00a0\u00a0loaded: false, });<\/code><\/pre>\n<p><code>EntityState<\/code> &#8212; \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u0438\u0434\u0430:<\/p>\n<pre><code>{ id: number[] | string[]; entities: Record&lt;string, T>}<\/code><\/pre>\n<p>\u0420\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u0432 <code>ngrx<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>createReducer<\/code>.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e <code>reducer<\/code>:<\/p>\n<pre><code class=\"typescript\">const reducer = createReducer(   initialPostState,   on(     PostActions.loadSuccess,     (state, { posts }): PostState => ({         ...state,         posts,         loaded: true,     })   ), );  export function postReducer(state: PostState | undefined, action: Action): PostState {   return reducer(state, action); }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u044d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>state<\/code>, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0438\u0434\u0443\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0441 <code>on<\/code>. <code>On<\/code> \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0432\u0438\u0434\u044b \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u0432 \u043a\u043e\u043d\u0446\u0435 \u0438\u0434\u0435\u0442 \u043a\u043e\u043b\u0431\u0435\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 <code>dispatch<\/code>\u2019\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0440\u0430\u043d\u0435\u0435.<\/p>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 <code>createReducer<\/code> \u0438 on, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f &#171;<code>switch-case<\/code>&#187; \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e, \u0433\u0434\u0435 \u043f\u0440\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043a\u0448\u0435\u043d\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043b\u0431\u0435\u043a.\u00a0<\/p>\n<\/blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 reducer \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>@ngrx\/entity<\/code>:<\/p>\n<pre><code class=\"typescript\">const reducer = createReducer(   initialPostState,   on(     PostActions.loadSuccess,     (state, { posts }): PostState =>       postAdapter.setAll(posts, {         ...state,         loaded: true,       })   ),   on(PostActions.clearSuccess, (state): PostState => postAdapter.removeAll(state)),   on(PostActions.loadOneSuccess, PostActions.createSuccess, (state, { post }): PostState => postAdapter.upsertOne(post, state)) );<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <code>state<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>postAdapter<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0430\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u044b. \u042d\u0444\u0444\u0435\u043a\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439:<\/p>\n<pre><code class=\"typescript\">@Injectable() export class PostEffects {   load$ = createEffect(() => {     return this.actions.pipe(       ofType(PostActions.load),       switchMap(() =>         this.postApiService.get().pipe(           tap((posts) => this.postStore.set(posts)),           map((posts) => PostActions.loadSuccess({ posts })),           catchError((error) => of(PostActions.loadFailure({ error })))         )       )     );   }); }<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0442\u0440\u0438 \u044d\u043a\u0448\u0435\u043d\u0430: <code>load<\/code>, <code>loadSuccess<\/code> \u0438 <code>loadFailure<\/code>.<\/p>\n<ul>\n<li>\n<p><code>load<\/code> &#8212; \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p><code>loadSuccess<\/code> &#8212; \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u0431\u044b\u043b\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p><code>loadFailure<\/code> &#8212; \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p><code>actions<\/code> &#8212; \u044d\u0442\u043e \u0432\u0441\u0435 \u044d\u043a\u0448\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p><code>ofType<\/code> &#8212; \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0442\u0438\u043f\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>\u0423 <code>nx<\/code> \u0435\u0441\u0442\u044c \u043a\u0440\u0443\u0442\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <code>fetch<\/code>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b:<\/p>\n<pre><code class=\"typescript\">load$ = createEffect(() => {   return this.actions$.pipe(     ofType(PostActions.load),     fetch({       id: () => 'load',       run: () => this.postApiService.get().pipe(map((posts) => PostActions.loadSuccess({ posts }))),       onError: (action, error) => PostActions.loadFailure({ error }),     })   ); });<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>ngrx<\/code> \u0434\u0430\u043b\u0435\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0438\u0437 state.<\/p>\n<p>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>createFeatureSelector<\/code> \u0438 <code>createSelector<\/code>.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0435\u0439\u0442 \u0446\u0435\u043b\u0438\u043a\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">const selectPostState = createFeatureSelector&lt;PostState>(POST_FEATURE_KEY);<\/code><\/pre>\n<blockquote>\n<p><code>POST_FEATURE_KEY<\/code> &#8212; \u044d\u0442\u043e \u043a\u043b\u044e\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 <code>store<\/code> .<\/p>\n<\/blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0438\u0437 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e <code>state<\/code>:<\/p>\n<pre><code class=\"typescript\">const selectLoaded = createSelector(selectPostState, (state) => state.loaded);<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0438\u0437 <code>store<\/code>:<\/p>\n<pre><code class=\"typescript\">class SimpleComponent implements OnInit {   loaded$!: Observable&lt;boolean>;    constructor(private readonly store: Store) {}    ngOnInit() {     this.loaded$ = this.store.select(selectLoaded);     this.store.dispatch(load());   } }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0448\u0435\u043d, \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>dispatch<\/code> \u0432 <code>store<\/code>.<\/p>\n<h3>Ngxs \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438<\/h3>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 <code>redux<\/code> \u0441\u0442\u0430\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 <code>Ngxs<\/code>.\u00a0<\/p>\n<blockquote>\n<p>\u0413\u043e\u0432\u043e\u0440\u044f\u0442 \u0447\u0442\u043e \u0440\u0435\u0431\u044f\u0442\u0430 \u0438\u0437 <code>ngxs<\/code> \u0445\u043e\u0442\u0435\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e <code>redux<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0447\u0435\u043c <code>ngrx<\/code> \u0438 \u0431\u044b\u043b\u0430 \u0431\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u0430 \u043a \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443.<\/p>\n<\/blockquote>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>redux<\/code> \u0432 <code>ngxs<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/946\/011\/2af\/9460112affb24fb06110df3ed1e88b37.jpg\" width=\"471\" height=\"245\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/946\/011\/2af\/9460112affb24fb06110df3ed1e88b37.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0430\u043f\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 <code>store<\/code>. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u044b \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d <code>store<\/code>, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 <code>ngxs<\/code> \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u043f\u0430\u043a\u0435\u0442:<\/p>\n<pre><code class=\"bash\">yarn add @ngxs\/store<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c store \u0432 <code>AppModule<\/code>:<\/p>\n<pre><code class=\"typescript\">@NgModule({   imports: [NgxsModule.forRoot([])], }) export class AppModule {}<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 feature store \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f ngxs cli.<\/p>\n<pre><code class=\"bash\">ngxs --name post<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u043f\u0438\u0441\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u044e, \u043d\u0430 \u043c\u043e\u0435\u043c macbook \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438\u0437 <code>ngxs cli<\/code> \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0438 \u044f \u0432\u0441\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u0440\u0443\u0447\u043a\u0430\u043c\u0438.<\/p>\n<pre><code class=\"bash\">posts-state \u251c\u2500\u2500 state \u2502   \u251c\u2500\u2500 post.actions.ts \u2502   \u2514\u2500\u2500 post.state.ts \u2514\u2500\u2500 posts-state.module.ts<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 <code>redux<\/code>:<\/p>\n<ul>\n<li>\n<p>post.actions.ts \u2014 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u044d\u043a\u0448\u0435\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p>post.state.ts \u2014 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u044d\u043a\u0448\u0435\u043d\u044b.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0423\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0432 <code>ngxs<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 \u0434\u043b\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439, \u0432\u043c\u0435\u0441\u0442\u043e \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0432 <code>ngrx<\/code>.<\/p>\n<\/blockquote>\n<p>\u041d\u0430\u0447\u043d\u0443 \u0441 \u0444\u0430\u0439\u043b\u0430 \u0441 \u044d\u043a\u0448\u0435\u043d\u0430\u043c\u0438. \u0412 <code>ngxs<\/code> \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u044d\u043a\u0448\u0435\u043d\u0430:<\/p>\n<pre><code class=\"typescript\">export class Load {   static readonly type = '[Post] Load'; }<\/code><\/pre>\n<p>\u041a\u043b\u0430\u0441\u0441 \u044d\u043a\u0448\u0435\u043d\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>type<\/code>. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u044d\u043a\u0448\u0435\u043d, \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u044d\u043a\u0448\u0435\u043d\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n<pre><code class=\"typescript\">export class LoadSuccess {   static readonly type = '[Post] Load Success';    constructor(public readonly posts: Post[]) {} }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u0441\u0442\u0435\u0439\u0442\u0430 &#8212; <code>post.state.ts<\/code>.\u00a0<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 <code>state<\/code> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043c\u0443\u0442\u0430\u0446\u0438\u0438 (\u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440) \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u044d\u043a\u0448\u0435\u043d\u043e\u0432.<\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441\u0442\u0435\u0439\u0442\u0430 \u0432 <code>ngxs<\/code> \u0438\u043c\u0435\u0435\u0442 \u0441\u0443\u0444\u0444\u0438\u043a\u0441 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u0433\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043c\u043e\u0434\u0435\u043b\u044c\u044e.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<pre><code class=\"typescript\">export interface PostStateModel {   readonly loaded: boolean; }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f <code>@State<\/code>.<\/p>\n<pre><code class=\"typescript\">@State&lt;PostStateModel>({   name: 'posts',   defaults: initialPostState, }) export class PostState {}<\/code><\/pre>\n<ul>\n<li>\n<p><code>name<\/code> &#8212; \u044d\u0442\u043e \u043a\u043b\u044e\u0447 <code>feature<\/code><\/p>\n<\/li>\n<li>\n<p><code>defaults<\/code> &#8212; \u044d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043e\u0434\u0435\u043b\u044c \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">export interface PostStateModel {   readonly loaded: boolean;   readonly ids: string[];   readonly entities: Record&lt;string, Post>; }<\/code><\/pre>\n<p>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438 <code>@Selector<\/code>.<\/p>\n<pre><code class=\"typescript\">@Selector() static loaded(state: PostStateModel): boolean {   return state.loaded; }<\/code><\/pre>\n<p>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u0432\u0435\u0441\u0442\u0438 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 <code>observable<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044e <code>@Select<\/code>.<\/p>\n<pre><code class=\"typescript\">export class SimpleComponent {   @Select(PostState.loaded)   loaded$!: Observable&lt;boolean>;    constructor(private readonly store: Store) {} }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0443\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>createSelector<\/code>:<\/p>\n<pre><code class=\"typescript\">static post(uuid: string): (state: PostStateModel) => Post | null {   return createSelector([PostState], (state: PostStateModel) => {     return state.entities[uuid] ?? null;   }); }<\/code><\/pre>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">export class SimpleComponent implements OnInit {   constructor(private readonly store: Store, private readonly route: ActivatedRoute) {}    ngOnInit() {      const { uuid } = this.route.snapshot.params;       this.store.select(PostState.post(uuid))   } }<\/code><\/pre>\n<p>\u0412 ngxs \u044d\u043a\u0448\u0435\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0440\u043e\u043b\u044c \u043a\u0430\u043a \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0442\u0430\u043a \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u042d\u043a\u0448\u0435\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438 <code>@Action<\/code>.<\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0448\u0435\u043d\u0430 \u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"typescript\">@Action(PostActions.Load) load(ctx: StateContext&lt;PostStateModel>) {   ctx.setState({     ...state,     loaded: true   }); }<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e <code>state<\/code>.<\/p>\n<p>\u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u044d\u043a\u0448\u0435\u043d \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">@Action(PostActions.Load) load(ctx: StateContext&lt;PostStateModel>) {   return this.postApiService.get().pipe(     map((posts) => {       const state = ctx.getState();        ctx.setState({         ...state,         ids: posts.map((post) => post.uuid),         entities: posts.reduce((acc, current) => ({ ...acc, [current.uuid]: current }), {}),       });        return ctx.dispatch(new PostActions.LoadSuccess(posts));     }),     catchError((error: unknown) => ctx.dispatch(new PostActions.LoadFailure(error)))   ); }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043d\u0430\u0441 \u0438\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0438 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0431\u044b\u043b \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u043e\u0442\u0432\u0435\u0442, \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u044d\u043a\u0448\u0435\u043d\u044b. \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0448\u0435\u043d <code>LoadSuccess<\/code>, \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>LoadFailure<\/code>.<\/p>\n<p>\u041d\u0430\u0434\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u044d\u043a\u0448\u0435\u043d\u044b \u0432 <code>ngxs<\/code>. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 redux. <\/p>\n<p>\u042d\u043a\u0448\u0435\u043d\u044b \u0432 <code>ngxs<\/code> \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/175\/c6e\/696\/175c6e6960bc943f0ced5d8a5ee04b03.jpg\" width=\"364\" height=\"475\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/175\/c6e\/696\/175c6e6960bc943f0ced5d8a5ee04b03.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u042d\u043a\u0448\u0435\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 4 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439:<\/p>\n<ul>\n<li>\n<p><code>dispatched<\/code> &#8212; \u044d\u043a\u0448\u0435\u043d \u0431\u044b\u043b \u0432\u044b\u0437\u0432\u0430\u043d, \u043d\u043e \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d;<\/p>\n<\/li>\n<li>\n<p><code>errored<\/code>, <code>canceled<\/code> \u0438 <code>successful<\/code> &#8212; \u044d\u043a\u0448\u0435\u043d \u0431\u044b\u043b \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043a\u0430\u043a \u043e\u0448\u0438\u0431\u043a\u0430, \u043e\u0442\u043c\u0435\u043d\u0430 \u0438 \u0443\u0441\u043f\u0435\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0432\u0430\u0442\u043e\u0439.<\/p>\n<pre><code>dispatch Load dispatch LoadSuccess LoadSuccess finished Load finished<\/code><\/pre>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u044d\u043a\u0448\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0440\u043e\u0436\u0434\u0435\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0448\u0435\u043d\u0430 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u044b \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0441\u0430\u043c \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0445 \u043f\u043e\u0440\u043e\u0434\u0438\u043b.<\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <code>dispatch<\/code> \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 <code>store<\/code>:<\/p>\n<pre><code class=\"typescript\">class SimpleComponent {   constructor(private readonly store: Store) {}     onLoad() {     this.store.dispatch(new PostActions.Load());   } }<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0446\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u0432 <code>Ngxs<\/code> \u0435\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 <code>Actions<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u0436\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u0432 <code>Ngrx<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043a\u0448\u0435\u043d\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b <code>onAction<\/code>, <code>ofActionDispatched<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u044d\u043a\u0448\u0435\u043d\u0430.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u044d\u043a\u0448\u0435\u043d:<\/p>\n<pre><code class=\"typescript\">loadSuccess$ = this.actions.pipe(   ofActionDispatched(PostActions.LoadSuccess),   map(({ posts }) => posts) );<\/code><\/pre>\n<h3>Ngxs Labs<\/h3>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435 \u043c\u043e\u0433\u0443 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u0437 <a href=\"https:\/\/www.ngxs.io\/ngxs-labs\/intro\" rel=\"noopener noreferrer nofollow\">ngxs labs<\/a>. <\/p>\n<blockquote>\n<p><code>@ngxs-labs\/data<\/code> &#8212; \u044d\u0442\u043e \u0440\u0443\u0441\u0441\u043a\u0438\u0435 \u0440\u0435\u0431\u044f\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043e\u0434\u043d\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u043e\u0447\u043d\u043e.<\/p>\n<\/blockquote>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 <code>Ngxs<\/code>, \u0437\u043d\u0430\u044e\u0442 \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>@ngxs-labs\/data<\/code> \u2014 \u043e\u043d \u0436\u0435 <code>@angular-ru\/ngxs<\/code> \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f ngxs, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0438 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f redux \u0432 <code>ngxs<\/code> \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>@ngxs-labs\/data<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/8e0\/908\/cd1\/8e0908cd166d83f5cdcf20d02b68794c.jpg\" width=\"1400\" height=\"785\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8e0\/908\/cd1\/8e0908cd166d83f5cdcf20d02b68794c.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<blockquote>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0442 <code>@ngxs-labs\/data<\/code> \u0432\u0441\u0435 \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u0442\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u0430\u043d\u043e\u043d\u0438\u0447\u043d\u043e\u0433\u043e <code>redux<\/code> \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0441\u0432\u043e\u0439 <code>state management<\/code>. <\/p>\n<\/blockquote>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440, \u0432\u0437\u044f\u0442\u044b\u0439 \u0438\u0437 <a href=\"https:\/\/angular-ru.gitbook.io\/sdk\/ngxs\/ngxs\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>:<\/p>\n<p>\u0414\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439:<\/p>\n<p>\u00a0<code>counter.state.ts<\/code>:<\/p>\n<pre><code class=\"typescript\">import { State, Action, StateContext } from '@ngxs\/store';  export class Increment {     static readonly type = '[Counter] Increment'; }  export class Decrement {     static readonly type = '[Counter] Decrement'; }  @State&lt;number>({     name: 'counter',     defaults: 0 }) export class CounterState {     @Action(Increment)     increment(ctx: StateContext&lt;number>) {         ctx.setState(ctx.getState() + 1);     }      @Action(Decrement)     decrement(ctx: StateContext&lt;number>) {         ctx.setState(ctx.getState() - 1);     } }<\/code><\/pre>\n<p>app.component.ts:<\/p>\n<pre><code class=\"typescript\">import { Component } from '@angular\/core'; import { Select, Store } from '@ngxs\/store';  import { CounterState, Increment, Decrement } from '.\/counter.state';  @Component({     selector: 'app-root',     template: `         &lt;ng-container *ngIf=\"counter$ | async as counter\">             &lt;h1>{{ counter }}&lt;\/h1>         &lt;\/ng-container>          &lt;button (click)=\"increment()\">Increment&lt;\/button>         &lt;button (click)=\"decrement()\">Decrement&lt;\/button>     ` }) export class AppComponent {     @Select(CounterState) counter$: Observable&lt;number>;     constructor(private store: Store) {}      increment() {         this.store.dispatch(new Increment());     }      decrement() {         this.store.dispatch(new Decrement());     } }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430:<\/p>\n<pre><code class=\"typescript\">import { State } from '@ngxs\/store'; import { DataAction, StateRepository } from '@angular-ru\/ngxs\/decorators'; import { NgxsDataRepository } from '@angular-ru\/ngxs\/repositories';  @StateRepository() @State&lt;number>({     name: 'counter',     defaults: 0 }) @Injectable() export class CounterState extends NgxsDataRepository&lt;number> {     @DataAction() increment() {         this.ctx.setState((state) => ++state);     }      @DataAction() decrement() {         this.ctx.setState((state) => --state);     } }<\/code><\/pre>\n<p>\u0418 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"typescript\">import { Component } from '@angular\/core';  import { CounterState } from '.\/counter.state';  @Component({     selector: 'app-root',     template: `         &lt;h1>{{ counter.snapshot }}&lt;\/h1>         &lt;button (click)=\"counter.increment()\">Increment&lt;\/button>         &lt;button (click)=\"counter.decrement()\">Decrement&lt;\/button>     ` }) export class AppComponent {     constructor(counter: CounterState) {} }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b. <\/p>\n<blockquote>\n<p><em>\u041f\u0440\u0430\u0432\u0434\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: &#171;\u0417\u0430\u0447\u0435\u043c \u0432\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0445 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c?&#187;<\/em><\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043f\u043d\u0443\u0442\u044c \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0442\u043e \u0442\u0430\u043c \u0432\u0441\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u0438 \u043c\u0435\u043d\u044c\u0448\u0435 <code>redux<\/code>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043d\u043e\u0432\u044b\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u043d\u043e \u0432\u0441\u0435 \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u0442\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0442 \u043a\u0430\u043d\u043e\u043d\u043e\u0432.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430:<\/p>\n<pre><code class=\"typescript\">import { Injectable } from '@angular\/core'; import { createEntityCollections, EntityCollections } from '@angular-ru\/cdk\/entity'; import { DataAction, Payload, StateRepository } from '@angular-ru\/ngxs\/decorators'; import { NgxsDataEntityCollectionsRepository } from '@angular-ru\/ngxs\/repositories'; import { NgxsOnInit, State } from '@ngxs\/store';  import { PostApiService } from '@angular-samples\/redux\/posts\/api'; import { Post } from '@angular-samples\/redux\/posts\/common';  interface PostStateOptions {   loaded: boolean; }  export type PostStateModel = EntityCollections&lt;Post, string, PostStateOptions>;  export const initialPostState: PostStateModel = {   ...createEntityCollections(),   loaded: false, };  @StateRepository() @State&lt;PostState>({   name: 'posts',   defaults: initialPostState, }) @Injectable() export class PostStateRepository extends NgxsDataEntityCollectionsRepository&lt;Post, string, PostStateOptions> implements NgxsOnInit {   constructor(private readonly postApiService: PostApiService) {     super();   }    override selectId(entity: Post): string {     return entity.uuid;   }    override ngxsOnInit(ctx: StateContext&lt;PostStateModel>): void {      \/\/ TODO: Need to call ctx.dispatch(new PostActions.Load());   } }<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 <code>state<\/code>:<\/p>\n<pre><code class=\"typescript\">@Component() export class AppComponent implements OnInit {     constructor(private readonly postStateRepository: PostStateRepository, private readonly postApiService: PostApiService) {}      public ngOnInit(): void {         this.postApiService.get().subscribe((posts: Post[]) => {             this.postStateRepository.setAll(posts);         });     } }<\/code><\/pre>\n<p>\u0418\u0437-\u0437\u0430 \u044f\u0432\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u044b\u0448\u0435.<\/p>\n<blockquote>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0432 <code>PostStateRepository<\/code> \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u0438 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043c, \u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<\/blockquote>\n<h3>Akita \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438<\/h3>\n<p>\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441 \u043d\u0430\u0442\u044f\u0436\u043a\u043e\u0439, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043d\u0435\u0441\u0442\u0438 \u043a <code>redux<\/code> &#8212; \u044d\u0442\u043e <code>Akita<\/code>.\u00a0<\/p>\n<blockquote>\n<p>Akita \u0442\u0432\u043e\u0440\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u043d\u0444\u043b\u044e\u0435\u043d\u0441\u0438\u0440\u0430 (\u043d\u0435 Angular Team) &#8212; <a href=\"https:\/\/netbasal.com\" rel=\"noopener noreferrer nofollow\">Netanel Basal<\/a>.<\/p>\n<\/blockquote>\n<p><code>Akita<\/code> \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0430 <code>redux<\/code> \u0441 \u0446\u0435\u043b\u044c\u044e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f <code>boilerplate code<\/code>.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432 <code>akita<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/e38\/738\/dc8\/e38738dc8a5d62d33a0511cdedcb8d20.jpg\" width=\"1400\" height=\"690\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e38\/738\/dc8\/e38738dc8a5d62d33a0511cdedcb8d20.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u044f <code>akita<\/code> \u043e\u0442 <code>redux<\/code> \u0432 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u043a\u0430\u0447\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f <code>query<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441 \u043d\u0435\u043a\u0438\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435\u043c \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043d\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 <code>akita<\/code> \u0442\u0430\u043a\u0436\u0435 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u0430.<\/p>\n<pre><code class=\"bash\">yarn add @datorama\/akita<\/code><\/pre>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0439\u043b\u0435\u0440\u043e\u0432 &#8212; \u0432 <code>akita<\/code> \u043d\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u043a\u0448\u0435\u043d\u044b \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438\u0437 <code>ngrx<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0430\u043a\u0435\u0442\u043e\u043c:<\/p>\n<pre><code class=\"bash\">yarn add @ngneat\/effects-ng<\/code><\/pre>\n<p>\u0418 \u0435\u0441\u043b\u0438 <code>Ngrx<\/code> \u0438 <code>Ngxs<\/code> \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u0432 <code>AppModule<\/code>, \u0442\u043e <code>Akita<\/code> \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.\u00a0<\/p>\n<blockquote>\n<p>\u0417\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 &#8212; \u043c\u043e\u0434\u0443\u043b\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0442\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 <code>AppModule<\/code>.<\/p>\n<\/blockquote>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 <code>akita<\/code> \u043d\u0435\u0442\u0443 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 devtools \u043d\u0430 \u043f\u0440\u044f\u043c\u0443\u044e. \u041c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0430\u043a\u0435\u0442\u044b <code>@ngneat\/elf<\/code>, <code>@ngneat\/elf-devtools<\/code> \u0438 \u0442\u043e\u0433\u0434\u0430 <code>akita<\/code> \u0431\u0443\u0434\u0435\u0442 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0412 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435, \u0432 <code>Akita<\/code> \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u044d\u043a\u0448\u0435\u043d\u044b, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440.<\/p>\n<blockquote>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u044d\u0442\u043e redux \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0439 \u0432\u0441\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e.<\/p>\n<\/blockquote>\n<p>\u0412 Akita \u0435\u0441\u0442\u044c cli, \u043d\u043e \u044f \u0438\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0438 \u043d\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b \u0438\u0445.\u00a0<\/p>\n<p>\u0413\u043e\u0432\u043e\u0440\u044f\u0442 \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>akita<\/code> \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"bash\">posts\/state \u251c\u2500\u2500 state \u2502   \u251c\u2500\u2500 post.query.ts \u2502   \u251c\u2500\u2500 post.service.ts \u2502   \u2514\u2500\u2500 post.store.ts \u2514\u2500\u2500 posts-state.module.ts<\/code><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 akita:<\/p>\n<ul>\n<li>\n<p><code>post.query.ts<\/code> \u2014 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b;<\/p>\n<\/li>\n<li>\n<p><code>post.service.ts<\/code> \u2014 \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c;<\/p>\n<\/li>\n<li>\n<p><code>post.store.ts<\/code> \u2014 \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0434\u043b\u044f <code>redux<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u044d\u043a\u0448\u0435\u043d\u044b \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0449\u0435 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430:<\/p>\n<ul>\n<li>\n<p><code>post.actions.ts<\/code> \u2014 \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u044d\u043a\u0448\u0435\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p><code>post.effects.ts<\/code> \u2014 \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0447\u043d\u0443 c <code>post.store.ts<\/code>.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441\u0442\u0435\u0439\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">export interface PostState extends EntityState&lt;Post, string> {   readonly loaded: boolean; }<\/code><\/pre>\n<p>\u0418 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435:<\/p>\n<pre><code class=\"typescript\">export const initialPostState: PostState = {   loaded: false }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0438\u0434\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<pre><code class=\"typescript\">@Injectable() @StoreConfig({ name: 'posts', idKey: 'uuid', resettable: true }) export class PostStore extends EntityStore&lt;PostState> {   constructor() {     super(initialPostState);   } }<\/code><\/pre>\n<p>\u041a \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f <code>@StoreConfig<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<ul>\n<li>\n<p><code>name<\/code> &#8212; \u0438\u043c\u044f <code>feature<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>idKey<\/code> &#8212; \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u043b\u044e\u0447\u043e\u043c \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p><code>resettable<\/code> &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e <code>state<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <code>query<\/code>. <code>Query<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u043e\u043a\u0430\u0447\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044c <code>PostQuery<\/code>:<\/p>\n<pre><code class=\"typescript\">@Injectable() export class PostQuery extends QueryEntity&lt;PostState> {   loaded$ = this.select((state) => state.loaded);    posts$ = this.selectAll();    postsPromo$ = this.selectAll({     filterBy: [({ promo }) => promo],     sortBy: (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime(),   });    constructor(protected override store: PostStore) {     super(store);   } }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 <code>store<\/code>:<\/p>\n<pre><code class=\"typescript\">loaded$ = this.select((state) => state.loaded);<\/code><\/pre>\n<p>\u041d\u043e \u0432\u0441\u044f \u043c\u043e\u0449\u044c <code>query<\/code> \u0432\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0438\u0437 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"typescript\">postsPromo$ = this.selectAll({   filterBy: [({ promo }) => promo],   sortBy: (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime(), });<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>promo<\/code> \u0440\u0430\u0432\u043d\u043e <code>true<\/code>, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0434\u0430\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435-\u043b\u0438\u0448\u044c \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u0441\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"typescript\">post$ = (uuid: string) => this.selectEntity(uuid).pipe(map((post) => post ?? null));<\/code><\/pre>\n<p>\u042d\u043a\u0448\u0435\u043d\u044b \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043f\u0438\u0440\u0443\u044e\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0437 <code>Ngrx<\/code>.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0448\u0435\u043d\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">import { createAction, props } from '@ngneat\/effects'; import { Post, PostChange, PostCreate } from '@angular-samples\/redux\/posts\/common';  export const load = createAction('[Post] Load'); export const loadSuccess = createAction('[Post] Load Success', props&lt;{ posts: Post[] }>());<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">import { createEffect, ofType } from '@ngneat\/effects'; import { Actions } from '@ngneat\/effects-ng';  @Injectable() export class PostEffects {   load$ = createEffect(() => {     return this.actions.pipe(       ofType(PostActions.load),       switchMap(() =>         this.postApiService.get().pipe(           tap((posts) => this.postStore.set(posts)),           map((posts) => PostActions.loadSuccess({ posts })),           catchError((error) => of(PostActions.loadFailure({ error })))         )       )     );   });    constructor(     private readonly postApiService: PostApiService,     private readonly postStore: PostStore,     private readonly actions: Actions   ) {} }<\/code><\/pre>\n<p>\u042d\u0444\u0444\u0435\u043a\u0442 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0438\u0437 <code>Ngrx<\/code>. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f reducer \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c <code>state<\/code>:<\/p>\n<pre><code class=\"typescript\">tap((posts) => this.postStore.set(posts))<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0432\u043e\u043f\u0440\u043e\u0441 &#8212; \u043a\u0430\u043a \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b? \u042d\u043a\u0448\u0435\u043d\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>dispatch<\/code>:<\/p>\n<pre><code class=\"typescript\">import { dispatch, ofType } from '@ngneat\/effects';  class SimpleComponent {   onLoad(): void {     dispatch(PostActions.load());   } }<\/code><\/pre>\n<p>\u0417\u0430\u0431\u0430\u0432\u043d\u043e, \u043d\u043e \u043c\u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c &#8212; \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 <code>Akita<\/code> \u0441 \u044d\u043a\u0448\u0435\u043d\u0430\u043c\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u0438\u0437 <code>ngrx<\/code>. \u041a\u0430\u043a\u043e\u0432\u043e \u0431\u044b\u043b\u043e \u043c\u043e\u0435 \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u043e\u0441\u044c. \u0414\u0430\u0436\u0435 \u0434\u0435\u0432 \u0442\u0443\u043b\u0437\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438. \u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0441\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438.<\/p>\n<h3>Elf \u0432 \u0448\u0430\u043f\u043a\u0435<\/h3>\n<p><a href=\"https:\/\/ngneat.github.io\/elf\" rel=\"noopener noreferrer nofollow\">Elf<\/a> \u2014 \u044d\u0442\u043e \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 <code>akita<\/code>.\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <code>Akita<\/code> \u0441 \u044d\u043a\u0448\u0435\u043d\u0430\u043c\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438, \u0442\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043e\u0442\u043b\u0438\u0447\u0438\u0439 \u043e\u0442 redux \u043d\u0435\u0442\u0443. <code>Elf<\/code> \u0436\u0435 \u0448\u0430\u0433\u043d\u0443\u043b \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"typescript\">import { createStore, withProps, select } from '@ngneat\/elf';  interface AuthProps {   user: { id: string } | null; }  const authStore = createStore(   { name: 'auth' },   withProps&lt;AuthProps>({ user: null }) );  export class AuthRepository {   user$ = authStore.pipe(select((state) => state.user));    updateUser(user: AuthProps['user']) {     authStore.update((state) => ({       ...state,       user,     }));   } }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0435\u0434\u0438\u043d\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0443. \u0414\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 store \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b. \u0414\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b.<\/p>\n<blockquote>\n<p><code>Elf<\/code> \u044d\u0442\u043e <code>state management<\/code> \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>Angular<\/code>. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0432\u0430\u043c \u043d\u0430\u0434\u043e\u0435\u043b Angular, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u041e\u041e\u041f:<\/p>\n<pre><code class=\"typescript\">import { createStore, withProps, select } from '@ngneat\/elf';  interface AuthProps {   user: { id: string } | null; }  const authStore = createStore(   { name: 'auth' },   withProps&lt;AuthProps>({ user: null }) );  export const user$ = authStore.pipe(select((state) => state.user));  export function updateUser(user: AuthProps['user']) {   authStore.update((state) => ({     ...state,     user,   })); }<\/code><\/pre>\n<p>\u0427\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438? \u0422\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0432 <code>Akita<\/code>. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043a\u043e\u0434 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435.<\/p>\n<p>\u0412 <code>Elf<\/code>, \u043a\u0430\u043a\u00a0 \u0438 \u0432 <code>Akita<\/code> \u0435\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<pre><code class=\"typescript\">import { createStore } from '@ngneat\/elf'; import {   selectAllEntities,   setEntities,   withEntities, } from '@ngneat\/elf-entities';  interface Todo {   id: number;   label: string; }  const todosStore = createStore({ name: 'todos' }, withEntities&lt;Todo>());  todosStore.pipe(selectAllEntities()).subscribe((todos) => {   console.log(todos); });  todosStore.update(   setEntities([     { id: 1, label: 'one ' },     { id: 2, label: 'two' },   ]) ); <\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<h3>Redux \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 Angular<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u043b <code>Elf<\/code> \u0443 \u043c\u0435\u043d\u044f \u0437\u0430\u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u043c\u044b\u0441\u043b\u044c &#8212; \u0410 \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a?<\/p>\n<blockquote>\n<p>\u042f \u043e\u0442\u0431\u0440\u043e\u0441\u0438\u043b \u044d\u0442\u0443 \u043c\u044b\u0441\u043b\u044c \u0441\u0440\u0430\u0437\u0443, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043e\u0439 \u0433\u0430\u0440\u0430\u0436 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0437\u0430\u0431\u0438\u0442 \u043a\u0443\u0447\u0435\u0439 \u0441\u0442\u0430\u0440\u044b\u0445 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432.<\/p>\n<\/blockquote>\n<p>\u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0430\u043b \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e, \u0442\u043e \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043d\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0430\u043c Angular, \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043a\u043e\u0440\u0431\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n<p>\u0412 \u043e\u0434\u043d\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u0431\u044f\u0442\u0430 \u0438\u0437 <code>Nx<\/code> \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0441\u0430\u0434\u044b \u0434\u043b\u044f <code>ngrx<\/code>. \u041f\u043e\u0434 \u0444\u0430\u0441\u0430\u0434\u043e\u043c \u043e\u043d\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u043b\u0438 \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u0440\u044b\u0432\u0430\u043b \u0431\u044b \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e <code>redux<\/code>.<\/p>\n<p>\u0418\u0434\u0435\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043f\u043b\u043e\u0445\u043e\u0439, \u0447\u0442\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u0430 \u043d\u0435 \u043e\u0442 \u043a\u0443\u0447\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442 \u0432 <code>ngrx<\/code>.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0441\u0430\u0434\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 <code>ngrx<\/code> \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>rxjs<\/code>.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0443 \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445 state:<\/p>\n<pre><code class=\"typescript\">export interface PostState {   readonly loaded: boolean;   readonly ids: string[];   readonly entities: Record&lt;string, Post>; } <\/code><\/pre>\n<ul>\n<li>\n<p><code>loaded<\/code> \u2014 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p><code>ids<\/code> \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p><code>entities<\/code> \u2014 \u0441\u043b\u043e\u0432\u0430\u0440\u044c \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0432\u0441\u0435\u0445 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435:<\/p>\n<pre><code class=\"typescript\">export const initialPostState: PostState = {   ids: [],   entities: {},   loaded: false, };<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u043c \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c:<\/p>\n<pre><code class=\"typescript\">@Injectable() export class NativePostFacade implements OnDestroy {   private readonly destroy$ = new Subject&lt;void>();    ngOnDestroy(): void {     this.destroy$.next();     this.destroy$.complete();   } }<\/code><\/pre>\n<blockquote>\n<p>destroy$ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043f\u0438\u0441\u043a\u0438 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430<\/p>\n<\/blockquote>\n<p>\u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>BehaviorSubject<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c <code>initialPostState<\/code>.<\/p>\n<pre><code class=\"typescript\">private readonly state$ = new BehaviorSubject&lt;PostState>(initialPostState);<\/code><\/pre>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">loaded$ = this.state$.pipe(map((state) => state.loaded)); posts$ = this.state$.pipe(map((state) => Object.values(state.entities)));<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">post$ = (uuid: string) => this.state$.pipe(map((state) => state.entities[uuid] ?? null));<\/code><\/pre>\n<p>\u0414\u043b\u044f \u044d\u043c\u0443\u043b\u044f\u0446\u0438\u0438 \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 <code>Subject<\/code>:<\/p>\n<pre><code class=\"typescript\">loadSuccess$ = new Subject&lt;Post[]>(); loadFailure$ = new Subject&lt;unknown>();<\/code><\/pre>\n<p>\u0422\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 \u044d\u0444\u0444\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">load(): void {   this.postApiService     .get()     .pipe(       tap((posts) => {         const state = this.state$.getValue();         this.state$.next({           ...state,           ids: posts.map((post) => post.uuid),           entities: posts.reduce((acc, current) => ({ ...acc, [current.uuid]: current }), {}),         });         this.loadSuccess$.next(posts);       }),       catchError((error) => {         this.loadFailure$.next(error);          return throwError(() => error);       }),       takeUntil(this.destroy$)     )     .subscribe(); }<\/code><\/pre>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e API. \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b, \u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0445 \u0432 state \u0438 \u0438\u0441\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0430 \u0438\u043d\u0430\u0447\u0435 \u0438\u0441\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>load()<\/code>:<\/p>\n<pre><code class=\"typescript\">class SimpleComponent implements OnInit {   posts$!: Observable&lt;Post[]>;     constructor(private readonly postFacade: PostFacade) {}    ngOnInit() {    this.posts$ = this.postFacade.post$;        this.postFacade.load();   } }<\/code><\/pre>\n<h3>Ngrx VS Ngxs VS Akita VS Angular Service<\/h3>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439.<\/p>\n<p><strong>Ngrx<\/strong><\/p>\n<p>\u041f\u043b\u044e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u0411\u043b\u0438\u0437\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0430\u043c <code>redux<\/code>. \u0412 <code>ngrx<\/code> \u0435\u0441\u0442\u044c <code>actions<\/code>, <code>reducer<\/code>, <code>selectors<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0441\u0432\u043e\u044e \u0440\u043e\u043b\u044c, \u0441\u043b\u0435\u0434\u0443\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0443 <code>redux<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u042d\u0444\u0444\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u0438\u043d\u0443\u0441\u044b:<\/p>\n<ul>\n<li>\n<p><code>Boilerplate code<\/code>. \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.\u00a0\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u043b\u043e\u0445\u0438\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0442\u0435\u0441\u0442\u044b. \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 <code>feature state<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041c\u043e\u0434\u0435\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u044d\u043a\u0448\u0435\u043d\u044b \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0447\u0442\u043e \u043f\u043b\u043e\u0445\u043e \u0434\u043b\u044f <code>highload<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Ngxs<\/strong><\/p>\n<p>\u041f\u043b\u044e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430. \u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 <code>ngrx<\/code>, \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0441\u0442\u0430\u044f \u043a\u0440\u0438\u0432\u0430\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f. \u0412\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u0438\u043d\u0443\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u041f\u043b\u043e\u0445\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u0430\u0432\u043d\u043e \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u0430\u0441\u044c.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u0441\u0442\u0435\u0439\u0442\u0435, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u0435\u0440\u0432\u0438\u0441 <code>store<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u044d\u043a\u0448\u0435\u043d\u043e\u0432. \u042d\u043a\u0448\u0435\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0443 \u044d\u043a\u0448\u0435\u043d\u043e\u0432. \u0418\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u0430.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Akita<\/strong><\/p>\n<p>\u041f\u043b\u044e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0449\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. \u0411\u043e\u043b\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0447\u0435\u043c <code>ngrx<\/code> \u0438\u043b\u0438 <code>ngxs<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0438\u043d\u0438\u043c\u0443\u043c <code>boilerplate code<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u0438\u043d\u0443\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u044d\u043a\u0448\u0435\u043d\u044b \u0438 \u044d\u0444\u0444\u043a\u0442\u044b \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0414\u043b\u044f \u0438\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437-\u0437\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430, \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0445\u0443\u043a <code>OnInitEffects<\/code> \u0432 <code>@ngneat\/effects<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Angular Service<\/strong><\/p>\n<p>\u041f\u043b\u044e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u0437-\u0437\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435*.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u0438\u043d\u0443\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0440\u043e\u043b\u044c \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <code>redux<\/code> \u0432 Angular, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0441\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 <code>state<\/code>.<\/p>\n<blockquote>\n<p>\u0425\u043e\u0442\u044f \u0441\u0435\u0439\u0447\u0430\u0441 \u044f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 redux \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Angular \u0438 <code>rxjs<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/blockquote>\n<h3>\u041a\u0430\u043a\u0443\u044e \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0432\u044b\u0431\u0440\u0430\u0442\u044c?<\/h3>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>redux<\/code> \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b. <code>Ngrx<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043a\u0430\u043d\u043e\u043d\u0430\u043c <code>redux<\/code> \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u043e\u043d\u044f\u0442\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e redux \u0441 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0432 \u0432\u0438\u0434\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. <code>Ngxs<\/code> \u0434\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0431\u043b\u0438\u0437\u043a\u043e\u0435 \u043a Angular \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. <code>Akita<\/code> \u0432\u0441\u043a\u043e\u0440\u043c\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u043c\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443, \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>state management<\/code> \u0432 \u043f\u0440\u043e\u0435\u043a\u0442.\u00a0<\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0441\u0442\u0440\u0430\u0434\u0430\u0435\u0442 \u0432 \u043f\u043b\u0430\u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0418 \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0443\u0436\u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c, \u0442\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 Angular.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0442\u0430\u0435\u0442 \u0432\u044b\u0431\u043e\u0440 \u0432 \u043f\u043b\u0430\u043d\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 redux, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b:<\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>Ngrx<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0436\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Ngxs<\/code>, <code>Akita<\/code> \u0438\u043b\u0438 <code>Elf<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>Elf<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0442\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 redux, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0439\u0442\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 Angular \u0441\u0435\u0440\u0432\u0438\u0441\u044b.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 state<\/h3>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 <code>redux<\/code> \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043d\u0435\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439 <code>state<\/code>. \u042f \u0434\u0430\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 redux.<\/p>\n<ol>\n<li>\n<p>\u0425\u0440\u0430\u043d\u0438\u0442\u0435 \u0432 <code>state<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0432 <code>state<\/code>. \u041f\u043e\u043c\u0438\u043c\u043e \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u0441\u0442\u0435\u0439\u0442 \u0443\u043b\u0435\u0442\u0430\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0432 \u0441\u0442\u0435\u0439\u0442\u0435 \u043c\u043e\u0433\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f: \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439, \u0444\u043b\u0430\u0433 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 &#171;\u0438\u0434\u0435\u0442 \u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430&#187; \u043d\u043e\u0432\u043e\u0441\u0442\u0438, \u043e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u0433\u0434\u0430 \u0432 \u0441\u0442\u0435\u0439\u0442 \u043f\u0440\u043e\u043d\u0438\u043a\u0430\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0435\u0439\u0442. \u0415\u0441\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0438\u0434\u0442\u0438 \u0434\u0432\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430, \u0442\u043e\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0434\u0432\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c, \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0432 \u0441\u0442\u0435\u0439\u0442\u0435, \u0430 \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0445 \u0432 &#171;\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b&#187; \u0438 &#171;\u0421\u0435\u0440\u0432\u0438\u0441\u044b&#187;. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 <code>state<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<ol start=\"2\">\n<li>\n<p>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <code>redux<\/code>, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n<\/li>\n<\/ol>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043d\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 <code>state<\/code>, \u0442\u043e, \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>redux<\/code> \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u041e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 Angular \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>redux<\/code> \u043a\u0430\u043a <code>event management<\/code>, \u0430 \u043d\u0435 <code>state management<\/code>. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c, \u0438 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439.<\/p>\n<ol start=\"3\">\n<li>\n<p>\u041d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445<\/p>\n<\/li>\n<\/ol>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0442\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u042d\u0442\u043e  \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. <\/p>\n<ol start=\"4\">\n<li>\n<p>\u041d\u0435 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0439\u0442\u0435 <code>state<\/code> \u0432 <code>state<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043f\u043b\u043e\u0445\u043e\u043c\u0443 \u0438 \u0440\u0435\u0448\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u0435\u0439\u0442\u044b \u0432 \u0441\u0442\u0435\u0439\u0442\u0435. \u0421\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0432\u044b \u0435\u0449\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043a\u0443\u0447\u0443 \u0431\u043e\u043b\u0438. <\/p>\n<ol start=\"5\">\n<li>\n<p>\u041d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442\u044b \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445<\/p>\n<\/li>\n<\/ol>\n<p>\u041b\u044e\u0431\u044b\u0435 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442\u044b \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442 \u043a \u043d\u0435\u043f\u0440\u0435\u0434\u0432\u0438\u0434\u0435\u043d\u043d\u044b\u043c \u0441\u0430\u0439\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043e\u0442 <code>redux<\/code> \u0438\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0441\u043e\u0432\u0441\u0435\u043c. <\/p>\n<ol start=\"6\">\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 <code>id<\/code> \u0432 <code>fetch<\/code> \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>Nx<\/code> \u0438 <code>ngrx<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0439\u0442\u0435 <code>id<\/code> \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0435 <code>fetch<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u0442\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a <code>API<\/code>.\u00a0<\/p>\n<ol start=\"7\">\n<li>\n<p>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u0432 (\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0447\u0435\u0433\u043e \u043b\u0438\u0431\u043e) \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445<\/p>\n<\/li>\n<\/ol>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u0432 \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043a \u0442\u0440\u0435\u043c \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c:<\/p>\n<ol>\n<li>\n<p>\u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 <code>SSR<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0439\u0434\u0435\u0442 \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u044d\u043a\u0448\u0435\u043d\u043e\u0432. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0436\u0438\u0432\u0443\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u043e \u043f\u0440\u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c, \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0441\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u043e\u0432.<\/p>\n<\/li>\n<\/ol>\n<h3>\u041c\u043e\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a redux<\/h3>\n<p>\u0412 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f <code>redux<\/code> \u043e\u043a\u0430\u0437\u0430\u043b \u043d\u0430 \u043c\u0435\u043d\u044f \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u0432 \u043f\u043b\u0430\u043d\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438. <\/p>\n<p>\u0421\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c, \u044f \u043f\u043e\u043d\u044f\u043b \u0447\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u2013 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0438 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0430\u043b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>state<\/code>, \u0434\u0435\u043b\u0430\u044f \u0438\u0445 \u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435.<\/p>\n<blockquote>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0440\u044f\u0434\u0430 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0443\u0442\u0438\u043b\u0438\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443.<\/p>\n<\/blockquote>\n<p>\u0412 \u043e\u0434\u043d\u043e \u0432\u0440\u0435\u043c\u044f \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e payload, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430 \u044d\u043a\u0448\u0435\u043d\u044b \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"typescript\">interface ActionPayload&lt;T> {    readonly type: string;   readonly payload: T  }<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0443\u0442\u0438\u043b\u0438\u0442\u044b <code>payload()<\/code>:<\/p>\n<pre><code class=\"typescript\">import { props } from '@ngrx\/store';  export function payload&lt;P>(): ActionCreatorProps&lt;{ payload: P }> {   return props&lt;{ payload: P }>(); }<\/code><\/pre>\n<p>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:<\/p>\n<pre><code class=\"typescript\">export const loadSuccess = createAction('[Post] Load Success', payload&lt;Post[]>());<\/code><\/pre>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043b\u044e\u0441 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u2013 \u043f\u0440\u043e\u0441\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 <code>payload<\/code> \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0448\u0435\u043d\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0448\u043b\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c <code>payload<\/code>&#8216;\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0438 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b \u043f\u0440\u043e\u0449\u0435, \u0437\u0430 \u0441\u0447\u0435\u0442 \u043e\u0442\u043a\u0430\u0437\u0430 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 <code>state<\/code> \u2013 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>payload<\/code> \u043e\u0442\u043f\u0430\u043b\u0430.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044f <code>rxjs<\/code> \u0438 <code>Angular<\/code> \u044f \u043d\u0430\u0447\u0430\u043b \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 <code>redux<\/code> \u0432 \u0446\u0435\u043b\u043e\u043c. \u0415\u0441\u043b\u0438 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0440\u044f\u0434 \u043f\u0440\u0430\u0432\u0438\u043b \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435: \u043d\u0435 \u043c\u0435\u0448\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0443\u0447\u0443, \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>\u041e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u043f\u043b\u044e\u0441 <code>redux<\/code> \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0441 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u0430\u0431\u043e\u0439 \u0431\u0430\u0437\u043e\u0439, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u041e\u0434\u043d\u0430\u043a\u043e, \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 100 \u0441\u0442\u0435\u0439\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u0442\u043e \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0448\u0430\u043d\u0441 \u0447\u0442\u043e \u0432\u0441\u0435 \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043e\u043c.<\/p>\n<blockquote>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n<\/blockquote>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043e\u0442 <code>redux<\/code> \u043f\u043e\u0447\u0442\u0438 \u0432\u0435\u0437\u0434\u0435. \u0427\u0435\u043c \u043f\u0440\u043e\u0449\u0435 \u043a\u043e\u0434, \u0442\u0435\u043c \u043f\u0440\u043e\u0449\u0435 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430.<\/p>\n<p>\u042f \u043d\u0435 \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u044e \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 <code>redux<\/code>. \u041f\u0440\u043e\u0441\u0442\u043e <code>state management<\/code> \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0432\u0441\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438.<\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441, \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0435\u043b\u0438\u0437 Angular, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f. Angular \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0432\u0435\u0431 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0432\u0435\u0441\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0430 \u044d\u0442\u0438 \u0440\u0435\u043b\u044c\u0441\u044b.<\/p>\n<p>\u042f \u0434\u0443\u043c\u0430\u044e <code>redux<\/code> \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u0440\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u0432 \u0447\u0442\u043e-\u0442\u043e \u0438\u043d\u043e\u0435: \u0432 \u0447\u0442\u043e-\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435.<\/p>\n<h3>\u0420\u0435\u0437\u044e\u043c\u0435<\/h3>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u044b\u043b\u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>redux<\/code> \u0438 <code>state management<\/code>:<\/p>\n<ul>\n<li>\n<p><code>Ngrx<\/code> &#8212; \u043f\u0435\u0440\u0432\u0430\u044f \u0438 \u0441\u0430\u043c\u0430\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f redux \u0432 Angular;<\/p>\n<\/li>\n<li>\n<p><code>Ngxs<\/code> &#8212; \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f redux, \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u043d\u0430\u044f \u043a \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443;<\/p>\n<\/li>\n<li>\n<p><code>Akita<\/code> &#8212; \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0430 redux;<\/p>\n<\/li>\n<li>\n<p><code>Elf<\/code> &#8212; \u0434\u0440\u0443\u0433\u043e\u0439 state management;<\/p>\n<\/li>\n<li>\n<p><code>Angular Service<\/code> &#8212; \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u043f\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044f \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u044b\u0431\u043e\u0440\u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0435\u0439\u0442\u0430.<\/p>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u2014 <a href=\"https:\/\/redux.fafn.ru\" rel=\"noopener noreferrer nofollow\">redux.fafn.ru<\/a>.<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/redux.fafn.ru\/assets\/images\/redux.jpg&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux \u0432 Angular<\/span><\/div>\n<p><a href=\"https:\/\/redux.fafn.ru\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">redux.fafn.ru<\/a><\/div>\n<\/div>\n<p>\u041a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 &#8212; <a href=\"https:\/\/github.com\/Fafnur\/angular-samples\" rel=\"noopener noreferrer nofollow\">angular-samples<\/a>.<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/opengraph.githubassets.com\/861d9602222d0f29983b2d38b96e3decead7b6da3feb78fb1d18643fb4a1407c\/Fafnur\/angular-samples&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>GitHub &#8212; Fafnur\/angular-samples: Samples of using different solutions in Angular<\/span><\/div>\n<p><a href=\"https:\/\/github.com\/Fafnur\/angular-samples\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">github.com<\/a><\/div>\n<\/div>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/706092\/\"> https:\/\/habr.com\/ru\/post\/706092\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0430\u0440\u0443 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0442\u044e\u0433\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c \u043f\u0440\u043e <a href=\"https:\/\/redux.js.org\" rel=\"noopener noreferrer nofollow\">Redux<\/a>. \u0421\u0435\u0439\u0447\u0430\u0441 redux \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u043c-\u0442\u043e \u043e\u0431\u044b\u0434\u0435\u043d\u043d\u044b\u043c \u0432 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041d\u0430 \u043f\u043e\u0440\u043e\u0433\u0435 2023 \u0433\u043e\u0434\u0430 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f redux \u0432 Angular, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u0445, \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a \u043a\u0430\u043a\u0438\u043c \u0432\u044b\u0432\u043e\u0434\u0430\u043c \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u0437\u0430 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0437\u0431\u0438\u0442\u0430 \u043d\u0430 \u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430:<\/p>\n<ul>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0433\u0434\u0435 \u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0435 \u043f\u0440\u043e redux, \u0433\u0434\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e <code>redux<\/code> \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Angular.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u0433\u0434\u0435 \u044f \u043e\u0431\u043e\u0431\u0449\u0430\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u043c <code>redux<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u044e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 <code>state<\/code>.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0412 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u043e\u0432 \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u044f \u043f\u0438\u0441\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u044e \u0438 \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e <code>redux<\/code>, \u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<\/blockquote>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u2014 <a href=\"https:\/\/redux.fafn.ru\" rel=\"noopener noreferrer nofollow\">redux.fafn.ru<\/a>.<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/redux.fafn.ru\/assets\/images\/redux.jpg&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux \u0432 Angular<\/span><\/div>\n<p><a href=\"https:\/\/redux.fafn.ru\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">redux.fafn.ru<\/a><\/div>\n<\/div>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 &#8212; <a href=\"https:\/\/github.com\/Fafnur\/angular-samples\" rel=\"noopener noreferrer nofollow\">angular-samples<\/a>.<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/opengraph.githubassets.com\/5dfc309f7cb3d8619c5baffeb760dd716507804a675ec957b889d09ec4afd014\/Fafnur\/angular-samples&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>GitHub &#8212; Fafnur\/angular-samples: Samples of using different solutions in Angular<\/span><\/div>\n<p><a href=\"https:\/\/github.com\/Fafnur\/angular-samples\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">github.com<\/a><\/div>\n<\/div>\n<ul>\n<li>\n<p>\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u0432 <a href=\"https:\/\/github.com\/Fafnur\/angular-samples\/tree\/main\/apps\/redux\" rel=\"noopener noreferrer nofollow\">app\/redux<\/a><em>.\u00a0<\/em><\/p>\n<\/li>\n<li>\n<p><em>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432<\/em> <a href=\"https:\/\/github.com\/Fafnur\/angular-samples\/tree\/main\/libs\/redux\" rel=\"noopener noreferrer nofollow\">libs\/redux<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u044f\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f!<\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e redux<\/h3>\n<p>\u0412 \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u043e\u043c\u043d\u044b\u0445 \u0432\u0435\u0447\u0435\u0440\u043e\u0432 \u0432 \u0410\u043b\u043c\u0430\u0442\u0435, \u043a\u043e\u0433\u0434\u0430 \u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0434\u0435\u043b\u0430\u043b \u0440\u0435\u0432\u044c\u044e, \u043a\u043e \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u0430 \u043c\u044b\u0441\u043b\u044c, \u0430 \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u0445\u0430\u0431\u0440 \u043f\u0440\u043e <code>redux<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u0438 \u0441\u043a\u0430\u0437\u0430\u043b \u0431\u044b \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<blockquote>\n<p>\u0412\u0435\u0434\u044c \u044f \u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u044e \u0438 \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043a \u0447\u0435\u043c\u0443 \u044f \u043f\u0440\u0438\u0448\u0435\u043b \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f &#8212; \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0412\u0435\u0434\u044c \u0447\u0435\u043c \u043f\u0440\u043e\u0449\u0435 \u043a\u043e\u0434, \u0442\u0435\u043c \u043f\u0440\u043e\u0449\u0435 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c.<\/p>\n<\/blockquote>\n<p>\u0418 \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0438\u0434\u0435\u044f: \u201c\u0417\u0430 \u0441\u0443\u0431\u0431\u043e\u0442\u0443 \u0441\u0434\u0435\u043b\u0430\u044e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u00a0 \u0432\u043e\u0441\u043a\u0440\u0435\u0441\u0435\u043d\u044c\u0435 \u043d\u0430\u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u044e! \u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0430\u043d!\u201d.<\/p>\n<blockquote>\n<p><em>\u0421\u0442\u0430\u0442\u044c\u044e \u044f \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438\u043c \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c: \u201c\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0447\u0442\u043e \u043f\u0438\u0448\u0443\u0442 \u0443\u043c\u043d\u044b\u0435 \u043b\u044e\u0434\u0438, \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0436\u0435!\u201d. \u041d\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043f\u043e\u0432\u0435\u0441\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/em><\/p>\n<\/blockquote>\n<p>\u0412 \u0442\u043e\u0442 \u0432\u0435\u0447\u0435\u0440 \u044f \u0431\u044b\u043b \u043f\u043e\u043b\u043e\u043d \u044d\u043d\u0442\u0443\u0437\u0438\u0430\u0437\u043c\u0430 \u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u0437\u0430 \u043f\u0440\u043e\u0435\u043a\u0442. \u042d\u0442\u043e \u0431\u044b\u043b \u0432\u0435\u0447\u0435\u0440 \u043f\u044f\u0442\u043d\u0438\u0446\u044b.\u00a0\u00a0<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0432\u0435\u0447\u0435\u0440\u0430\u043c\u0438 \u043f\u044f\u0442\u043d\u0438\u0446\u044b \u043c\u044b \u0445\u043e\u0434\u0438\u043c \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u0432 \u0431\u0430\u0440, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448 \u0438\u0434\u0435\u0439\u043d\u044b\u0439 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0442\u0435\u043b\u044c \u0438 \u043f\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440 \u0447\u0443\u0442\u044c \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u043b\u0441\u044f \u043f\u043e\u043f\u043e\u043b\u0430\u043c \u043f\u043e\u0441\u043b\u0435 \u0434\u0430\u0443\u043d\u0445\u0438\u043b\u043b\u0430 \u0438 \u043e\u0442\u043b\u0435\u0436\u0438\u0432\u0430\u043b\u0441\u044f \u0432 \u0433\u043e\u0441\u0442\u0438\u043d\u0438\u0446\u0435, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0435\u0447\u0435\u0440 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0439.<\/p>\n<p>\u042f \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0442\u043a\u0440\u044b\u043b \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0437\u0430\u0448\u0435\u043b \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 Angular. \u0412\u0437\u044f\u043b \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u0432 Angular, \u0438 \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>redux<\/code>.<\/p>\n<p>\u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0437\u0432\u0430\u043b \u0435\u0433\u043e <code>redux<\/code>.\u00a0<\/p>\n<p>\u041d\u043e \u0432\u0441\u0435 \u0437\u0430\u0441\u0442\u043e\u043f\u043e\u0440\u0438\u043b\u043e\u0441\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0448\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u043a\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <code>redu\u0445<\/code> \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0447\u0435\u0433\u043e, \u044f \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>redux<\/code>?<\/p>\n<\/li>\n<li>\n<p>\u0410 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e \u0438\u0445 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435?<\/p>\n<\/li>\n<li>\n<p>\u0410 \u043a\u0430\u043a \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0432\u0441\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435? \u041a\u0430\u043a \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c?<\/p>\n<\/li>\n<li>\n<p>\u0418 \u0447\u0442\u043e \u043d\u0430 \u0441\u0447\u0435\u0442 <code>UI<\/code>? \u041a\u0430\u0436\u0434\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b? \u0422\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0435?<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043d\u0430\u043b\u0438 \u043c\u0435\u043d\u044f \u0432 \u0441\u0442\u0443\u043f\u043e\u0440. \u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/ngrx.io\/\" rel=\"noopener noreferrer nofollow\">Ngrx<\/a> \u0434\u043b\u044f <code>redux<\/code>. \u041d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e \u0435\u0441\u043b\u0438 \u044f \u043d\u0430\u043f\u0438\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e <code>Ngrx<\/code>, \u0438 \u043d\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e <a href=\"https:\/\/www.ngxs.io\/\" rel=\"noopener noreferrer nofollow\">Ngxs<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/opensource.salesforce.com\/akita\/\" rel=\"noopener noreferrer nofollow\">Akita<\/a>. \u0422\u043e\u0433\u0434\u0430 \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e \u0442\u0440\u0438 \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438: <code>Ngrx<\/code>, <code>Ngxs<\/code> \u0438 <code>Akita<\/code>.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0441\u043e\u0431\u043e\u0439 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 <a href=\"https:\/\/nx.dev\" rel=\"noopener noreferrer nofollow\">Nx<\/a>, \u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0435\u0448\u0438\u043b\u0430\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0440\u0435\u0448\u0438\u043b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/thomasburlesonia.medium.com\/ngrx-facades-better-state-management-82a04b9a1e39\" rel=\"noopener noreferrer nofollow\">Facade<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043b \u0431\u044b \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 <code>redux<\/code>. \u0418 \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0430 \u0431\u044b \u0441\u0432\u043e\u0439 Facade, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u043e\u0439 \u0441\u0430\u0439\u0442, \u0433\u0434\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u043b\u0438\u0441\u044c \u0431\u044b \u0441\u043f\u0438\u0441\u043a\u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439, \u0430 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043f\u0440\u0435\u0432\u044c\u044e &#171;\u041d\u043e\u0432\u043e\u0441\u0442\u0438&#187; \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043f\u043e\u043b\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u043e\u0441\u0442\u0438.<\/p>\n<blockquote>\n<p>\u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b \u0447\u0438\u0442\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0441\u0442\u0438, \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u0432\u0437\u044f\u0442\u044c \u0441 \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u2014 \u041f\u0430\u043d\u043e\u0440\u0430\u043c\u044b.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0431\u044b\u043b \u0432\u044b\u0432\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 <code>redux<\/code>. \u0415\u0441\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0432 <code>AppModule<\/code> \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 <code>redux<\/code>, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439.<\/p>\n<p>\u042f \u0434\u043e\u043b\u0433\u043e \u0445\u043e\u0434\u0438\u043b \u0432\u043e\u043a\u0440\u0443\u0433 \u0434\u0430 \u043e\u043a\u043e\u043b\u043e \u0438 \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <code>redux<\/code> \u0432 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0431\u043e\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0435\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u041a\u0430\u043a \u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux<\/h3>\n<figure class=\"full-width\"><figcaption>\u0417\u0430\u043f\u0443\u0441\u043a shell \u0438 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/figcaption><\/figure>\n<p>\u0414\u043e\u043b\u0436\u0435\u043d \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443, \u0447\u0442\u043e \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u043d\u0435\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b. \u042f \u0431\u044b\u043b \u0437\u043d\u0430\u043a\u043e\u043c \u0441 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c, \u043d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u0432 \u0442\u0430\u043d\u043a\u0435: \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u2013 \u044d\u0442\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u0435\u0434\u0430\u0432\u043d\u044f\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 \u043f\u0440\u043e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b &#8212; <a href=\"https:\/\/habr.com\/ru\/company\/tinkoff\/blog\/701152\" rel=\"noopener noreferrer nofollow\">(\u041c\u0438\u043a\u0440\u043e)\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0438 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack<\/a>. \u0412\u0441\u0435\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f. <\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0435\u0433\u043e <a class=\"mention\" href=\"\/users\/findyourdream\">@FindYourDream<\/a> \u043d\u0435 \u0441\u043a\u0430\u0437\u0430\u043b \u2013 \u044d\u0442\u043e, \u043a\u0430\u043a \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u0432 NX.<\/p>\n<p>\u0412 <code>Nx<\/code> \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0438 \u0443 \u0432\u0430\u0441 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0435 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u0441\u044f\u0442\u043e\u043a <code>remote<\/code>:<\/p>\n<pre><code class=\"bash\">nx g \/angular:host redux\/dashboard --remotes=redux\/ngrx,redux\/ngxs,redux\/akita<\/code><\/pre>\n<blockquote>\n<p>\u042d\u0442\u043e \u0432\u0441\u0435! \u042d\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0432\u0441\u0435, \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u0412\u0441\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b, \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<\/blockquote>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<pre><code class=\"bash\">nx serve redux-dashboard --devRemotes=redux-ngrx,redux-ngxs,redux-akita<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u0447\u0435\u0442\u044b\u0440\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><code>localhost:4200<\/code> \u2014 <code>redux-dashboard<\/code>, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><code>localhost:4201<\/code> \u2014 <code>redux-ngrx<\/code>, remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 c <code>Ngrx<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>localhost:4202<\/code> \u2014 <code>redux-ngxs<\/code>, remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 c <code>Ngxs<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>localhost:4203<\/code> \u2014 <code>redux-akita<\/code>, remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 c <code>Akita<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 <code>remote<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 <code>Nx<\/code>.<\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u043e\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435, \u0442\u043e \u0432 <code>Nx<\/code> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u043e\u043c\u0438\u043c\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u043d\u0430\u0447\u0435 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u043d\u043e\u0432\u043e\u0441\u0442\u044c: <code>\/post\/id<\/code>, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0432 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0443\u0442\u044c \u0431\u0443\u0434\u0435\u0442 <code>\/remote\/post\/id<\/code>. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0433\u0438\u044e \u0441 \u043f\u0443\u0442\u044f\u043c\u0438. \u041b\u0438\u0431\u043e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0442\u043e\u043a\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u043f\u0443\u0442\u0438, \u0433\u0434\u0435 \u0434\u043b\u044f \u043f\u0443\u0442\u0435\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0444\u0438\u043a\u0441, \u043b\u0438\u0431\u043e \u043f\u0438\u0448\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435: \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0435\u0444\u0438\u043a\u0441.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u041e\u0441\u043e\u0431\u0443\u044e \u0440\u0430\u0434\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0435\u043f\u043b\u043e\u0439 \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.\u00a0<\/p>\n<\/blockquote>\n<p>\u0421\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <code>angular<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0430\u0442\u0438\u043a\u0438. \u0414\u043b\u044f \u0440\u0430\u0437\u0434\u0430\u0447\u0438 \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 <code>nginx<\/code>. <\/p>\n<p>\u042f \u0440\u0435\u0448\u0438\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/redux.fafn.ru\" rel=\"noopener noreferrer nofollow\">redux.fafn.ru<\/a>\u00a0 &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 <code>shell<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ngrx.fafn.ru\" rel=\"noopener noreferrer nofollow\">ngrx.fafn.ru<\/a> &#8212; \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043e <code>ngrx<\/code>;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ngxs.fafn.ru\" rel=\"noopener noreferrer nofollow\">ngxs.fafn.ru<\/a> &#8212; \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043e <code>ngxs<\/code>;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/akita.fafn.ru\" rel=\"noopener noreferrer nofollow\">akita.fafn.ru<\/a> &#8212; \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043e <code>akita<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0423 \u043c\u0435\u043d\u044f \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u044e \u0434\u0435\u043c\u043e \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043d\u0430 \u043d\u0435\u043c \u0443\u0436\u0435 \u0435\u0441\u0442\u044c node \u0438 nginx. \u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0430\u043f\u043e\u0447\u043a\u0443 \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0441\u043f\u0443\u043b\u0438\u043b \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0441\u043e\u0431\u0440\u0430\u043b \u043f\u0440\u043e\u0434 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0421\u043e\u0437\u0434\u0430\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 nginx \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u044f \u043e\u0442\u043a\u0440\u044b\u043b \u0441\u0430\u0439\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c \u2013 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0430\u0447\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043a\u043e\u0440\u0441\u0430\u043c\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442, \u0442\u043e \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0435\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043b \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u043e\u0441\u0441\u0434\u043e\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 production \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435. \u042d\u0442\u043e \u0447\u0440\u0435\u0432\u0430\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0441 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p><em>\u041f\u043e\u043c\u043d\u044e, \u043f\u043e \u043c\u043e\u043b\u043e\u0434\u043e\u0441\u0442\u0438 \u043c\u044b \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u043e\u0439\u00a0 \u043f\u0438\u0440\u0430\u043c\u0438\u0434\u044b. \u042f \u0442\u043e\u0433\u0434\u0430 \u0431\u044b\u043b \u0441\u043b\u0430\u0431\u043e\u0432\u0430\u0442 \u0432 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u0438 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0436\u0435 \u0434\u0435\u043d\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b \u0437\u0430\u043f\u0443\u0449\u0435\u043d, \u0443 \u043d\u0430\u0441 \u0443\u043a\u0440\u0430\u043b\u0438 \u0432\u0441\u0435 \u0434\u0435\u043d\u044c\u0433\u0438 \u0441\u043e \u0441\u0447\u0435\u0442\u0430 &#8212; \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0434\u0435\u0441\u044f\u0442\u044c \u0431\u0430\u043a\u0441\u043e\u0432. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u044f \u043d\u0430\u0447\u0430\u043b \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438.<\/em>\u00a0<\/p>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0434\u0443\u043d\u0441\u0442\u0432\u0430 \u0438 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0438 \u044d\u0442\u043e\u0433\u043e:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>\u041a\u0430\u043a \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0446\u0438\u043a\u043b \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 \u043c\u0435\u0434\u0438\u0443\u043c\u0435<\/h3>\n<p>\u0421\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 \u0445\u0430\u0431\u0440\u0435 &#8212; \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u044c\u0438 \u0434\u043b\u044f \u0434\u0443\u0448\u0438.\u00a0<\/p>\n<blockquote>\n<p>\u042d\u0442\u043e \u043a\u0430\u043a-\u0431\u0443\u0434\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0431\u0443\u0442\u044b\u043b\u043e\u0447\u043a\u0443 \u0431\u0430\u0440\u043e\u043b\u044b \u0438\u043b\u0438 \u0431\u0430\u0440\u0431\u0430\u0440\u0435\u0441\u043a\u0438 \u0432 \u043f\u044f\u0442\u043d\u0438\u0446\u0443 \u0432\u0435\u0447\u0435\u0440\u043e\u043c \u0438 \u0441\u0434\u043e\u0431\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u043e\u043b\u0438\u0432\u043a\u0430\u043c\u0438, \u043e\u0440\u0435\u0445\u0430\u043c\u0438 \u0438 \u0433\u0440\u0430\u043d\u0430 \u043f\u0430\u0434\u0430\u043d\u043e.<\/p>\n<\/blockquote>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044f \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430 <a href=\"https:\/\/habr.com\/\" rel=\"noopener noreferrer nofollow\">habr<\/a> \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0418 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 \u043c\u0435\u0434\u0438\u0443\u043c\u0435. \u0420\u0430\u0437\u0431\u0438\u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u0435\u0439 \u0443 \u043c\u0435\u043d\u044f \u0432\u044b\u0448\u0435\u043b \u0446\u0438\u043a\u043b \u0438\u0437 \u0442\u0440\u0438\u043d\u0430\u0434\u0446\u0430\u0442\u0438 \u0441\u0442\u0430\u0442\u0435\u0439.<\/p>\n<p>\u0422\u0443\u0434\u0430 \u0432\u043e\u0448\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u0438:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-591ba785e0fc\" rel=\"noopener noreferrer nofollow\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81-%D0%BC%D0%B8%D0%BA%D1%80%D0%BE%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B0%D0%BC%D0%B8-5e03618e0cc8\" rel=\"noopener noreferrer nofollow\"><u>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u043c\u0438<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2-e905c4f6354d\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D1%84%D0%B5%D0%B9%D0%BA%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE-api-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B5%D0%B9-11be9cdbea0e\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0444\u0435\u0439\u043a\u043e\u0432\u043e\u0433\u043e API \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-ui-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D0%B4%D0%BB%D1%8F-%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B5%D0%B9-51482a493016\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%BA%D0%BE%D0%BD%D1%86%D0%B5%D0%BF%D1%82%D1%8B-%D0%B8-%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D0%B8%D1%8F-%D0%B2-redux-34834a395265\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u043d\u0446\u0435\u043f\u0442\u044b \u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u0432 Redux<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%80%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D0%B0%D1%86%D0%B8%D0%B8-%D0%BF%D0%BE-%D0%BE%D1%80%D0%B3%D0%B0%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8-state-2f122e1b8cd\" rel=\"noopener noreferrer nofollow\"><u>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 state<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-ngrx-%D0%B2-%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D0%B8-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-82b0f12a0396\" rel=\"noopener noreferrer nofollow\"><u>Ngrx \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-ngxs-8a5e330bc41e\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Ngxs<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-akita-81456b166675\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Akita<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%80%D0%B0%D0%B7%D0%BD%D1%8B%D1%85-%D1%80%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B9-redux-ngrx-vs-ngxs-vs-akita-c756c2f2f4a4\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 redux. Ngrx vs Ngxs vs Akita<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-state-management-%D1%81%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%BC%D0%B8-%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0%D0%BC%D0%B8-angular-c93691e0074c\" rel=\"noopener noreferrer nofollow\">State management \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 Angular<\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/fafnur\/redux-%D0%B2-angular-%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-791a07dddc15\" rel=\"noopener noreferrer nofollow\"><u>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/u><\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0426\u0438\u043a\u043b \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 <code>redux<\/code>.  \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043e\u0431\u0437\u043e\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043d\u044e\u0430\u043d\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0435 \u043f\u0440\u043e redux<\/h2>\n<h3>\u041a\u043e\u043d\u0446\u0435\u043f\u0442\u044b \u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f Redux<\/h3>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e <code>redux<\/code>. <\/p>\n<blockquote>\n<p>\u042f \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443, \u043d\u043e \u043d\u0430\u043f\u043e\u043c\u043d\u044e \u0442\u0435\u043c, \u043a\u0442\u043e \u0437\u0430\u0431\u044b\u043b \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435.<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u0441\u044f \u0441\u0443\u0442\u044c <code>redux<\/code> \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0430 \u0432\u044b\u0448\u0435 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435.<\/p>\n<ol>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437 <code>store<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0442\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442 (\u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442) \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u0430\u043a-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 <code>store<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u042d\u043a\u0448\u0435\u043d \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>store<\/code>. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a <code>store<\/code> \u0431\u044b\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d, \u0442\u043e \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ol>\n<p>\u0413\u0434\u0435 \u0436\u0435 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442?<\/p>\n<p>\u0427\u0430\u0441\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a. \u041d\u0430\u0436\u0430\u043b\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0430 1.<\/p>\n<blockquote>\n<p>\u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u0445\u0443\u0434\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f redux. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 redux \u0434\u043b\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u0432. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0439\u0442\u0435 \u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 JavaScript, \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 \u2013 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c \u0441\u0447\u0430\u0441\u0442\u044c\u0435.<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Redux<\/figcaption><\/figure>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430.<\/p>\n<ol>\n<li>\n<p> \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432 <code>UI<\/code> \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 &#171;\u043a\u043b\u0438\u043a&#187; \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p> \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0448\u0435\u043d. <\/p>\n<\/li>\n<li>\n<p>\u042d\u043a\u0448\u0435\u043d \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 <code>state<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0441\u0442\u0435\u0439\u0442, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f <code>UI<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u043a API.<\/p>\n<figure class=\"full-width\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u043f\u043e\u0437\u0438\u0442\u0430 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u043a API<\/figcaption><\/figure>\n<p>\u0412\u0441\u0435 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a API. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-342800","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/342800","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=342800"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/342800\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=342800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=342800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=342800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}