{"id":308956,"date":"2020-08-25T09:00:20","date_gmt":"2020-08-25T09:00:20","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=308956"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=308956","title":{"rendered":"\u041a\u0430\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 Angular \u043f\u043e \u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/custis\/blog\/516290\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zv\/e7\/zz\/zve7zzpuofo4b-t4ltyvi311iks.png\"><\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043f\u0435\u0440\u0435\u0434 \u0432\u0430\u043c\u0438 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0415\u0441\u0442\u044c \u0422\u0417 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430, \u0442\u0438\u043a\u0435\u0442\u044b \u0432 \u0431\u0430\u0433-\u0442\u0440\u0435\u043a\u0435\u0440\u0435. \u041d\u043e \u0432\u044b\u0431\u043e\u0440 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u043b\u0435\u0436\u0438\u0442 \u043d\u0430 \u0432\u0430\u0441.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0440\u043e\u0439 \u0442\u0440\u0443\u0434\u043d\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u0447\u043d\u043e\u0439, \u0430 \u043a\u0430\u043a\u0430\u044f \u043d\u0435\u0442. \u041e\u0441\u043e\u0431\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u041a\u0430\u043a \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c? \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e-\u0441\u0432\u043e\u0435\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u043b\u0438\u0431\u043e \u043f\u0438\u0448\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0441\u0430\u043c, \u043b\u0438\u0431\u043e \u0431\u0435\u0440\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041b\u044e\u0431\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u2014 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043f\u043b\u044e\u0441\u0430\u043c\u0438 \u0438 \u043c\u0438\u043d\u0443\u0441\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0441\u0432\u043e\u0435\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0430\u0434\u0438\u0439 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439: \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/strong> \u0420\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0440\u0435\u0442 \u043e\u0442\u0442\u0443\u0434\u0430 \u043a\u0443\u0441\u043e\u0447\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0433\u0434\u0435-\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c. \u042d\u0442\u043e\u0442 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 HTTP API.<\/p>\n<p>  <\/p>\n<p><strong>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/strong> \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0438 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0445 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<p><a href=\"#%D0%BC%D0%B8%D0%BA%D1%80%D0%BE%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-----%D1%85%D1%80%D0%B0%D0%BD%D0%B8%D0%BC-%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5-%D0%B2-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%D1%85\">\u041c\u0438\u043a\u0440\u043e\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0445\u0440\u0430\u043d\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/a><br \/>  <a href=\"#%D0%BC%D0%B0%D0%BB%D0%B5%D0%BD%D1%8C%D0%BA%D0%BE%D0%B5-%D0%B8%D0%BB%D0%B8-%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B5%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-----%D1%85%D1%80%D0%B0%D0%BD%D0%B8%D0%BC-%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5-%D0%B2-%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81%D0%B0%D1%85\">\u041c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u0438\u043b\u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0445\u0440\u0430\u043d\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%B2%D1%8B%D0%B1%D0%B8%D1%80%D0%B0%D0%B5%D0%BC-%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81%D1%8B\">\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%B2%D1%8B%D1%80%D0%B0%D0%B1%D0%B0%D1%82%D1%8B%D0%B2%D0%B0%D0%B5%D0%BC-%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D1%83-%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81%D0%B0\">\u0412\u044b\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0430<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%BF%D1%80%D0%B8%D0%BC%D0%B8%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9-%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-%D1%85%D1%80%D0%B0%D0%BD%D0%B8%D0%BC-%D0%B2-%D0%BF%D0%BE%D0%BB%D1%8F%D1%85-%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%B0-%D0%B1%D0%B5%D0%B7-%D0%BE%D1%82%D1%81%D0%BB%D0%B5%D0%B6%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F\">\u041f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434: \u0445\u0440\u0430\u043d\u0438\u043c \u0432 \u043f\u043e\u043b\u044f\u0445 \u043c\u0435\u0442\u043e\u0434\u0430 \u0431\u0435\u0437 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%BF%D1%80%D0%BE%D0%B4%D0%B2%D0%B8%D0%BD%D1%83%D1%82%D1%8B%D0%B9-%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D1%8F%D0%B5%D0%BC-%D1%80%D0%B5%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D0%B8\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u043c\u0435\u0442\u043e\u0434: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D1%80%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D1%83%D0%B5%D0%BC-%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81%D1%8B-%D0%B2-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B8\">\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%BC%D0%B0%D0%BB%D0%B5%D0%BD%D1%8C%D0%BA%D0%BE%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-----%D1%83-%D0%BA%D0%B0%D0%B6%D0%B4%D0%BE%D0%B3%D0%BE-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0-%D1%81%D0%B2%D0%BE%D0%B9-%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81\">\u041c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B5%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-----%D0%BE%D0%B1%D1%8A%D0%B5%D0%B4%D0%B8%D0%BD%D1%8F%D0%B5%D0%BC-%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81%D1%8B\">\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/a><br \/>  <a href=\"#%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-----%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC-%D1%83%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D1%81%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5-%D1%85%D1%80%D0%B0%D0%BD%D0%B8%D0%BB%D0%B8%D1%89%D0%B5-%D0%B8%D0%BB%D0%B8-%D0%B1%D0%B5%D1%80%D0%B5%D0%BC-%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D1%83%D1%8E-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D1%83\">\u0411\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0434\u0435\u043b\u0430\u0435\u043c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0438\u043b\u0438 \u0431\u0435\u0440\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC-%D1%83%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D1%81%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5-%D1%85%D1%80%D0%B0%D0%BD%D0%B8%D0%BB%D0%B8%D1%89%D0%B5\">\u0414\u0435\u043b\u0430\u0435\u043c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%BF%D0%B5%D1%80%D0%B5%D1%85%D0%BE%D0%B4%D0%B8%D0%BC-%D0%BD%D0%B0-ngrx\">\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 NgRx<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%BA%D0%B0%D0%BA-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-ngrx\">\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 NgRx<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D0%BC-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D0%B8-ngrx\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u0438 NgRx<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%B4%D0%B5%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%B7%D0%B8%D1%80%D1%83%D0%B5%D0%BC-%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5-%D0%B2-ngrx\">\u0414\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 NgRx<\/a><br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#%D0%BF%D0%BB%D1%8E%D1%81%D1%8B-%D0%B8-%D0%BC%D0%B8%D0%BD%D1%83%D1%81%D1%8B-ngrx\">\u041f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b NgRx<\/a><br \/>  <a href=\"#%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D1%8B\">\u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/p>\n<\/div><\/div>\n<p>  <\/p>\n<h1>\u041c\u0438\u043a\u0440\u043e\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0445\u0440\u0430\u043d\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/h1>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u043e\u0439 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 app-table) \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 app-filters). \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430. \u0412\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u044d\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435), \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 (\u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435). <\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u0442\u043e \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u044f\u0432\u043d\u043e\u043c \u0432\u0438\u0434\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Component, OnInit } from '@angular\/core'; import { HttpClient } from '@angular\/common';  @Component({   selector: 'app-root',   template: `       &lt;app-filters (selectedChange)=&quot;onFilterChange($event)&quot; [filtersData]=&quot;filtersData$ | async&quot;&gt;&lt;\/app-filters&gt;       &lt;app-table [data]=&quot;data$ | async&quot;&gt;&lt;\/app-table&gt;   `, }) export class VerySimpleAppComponent implements OnInit {   data$: Observable&lt;Item[]&gt;;   filtersData$: Observable&lt;any&gt;;    constructor(public http: HttpClient) {     this.data$ = this.http.get&lt;Item[]&gt;('\/api\/data');     this.filtersData$ = this.http.get&lt;any&gt;('\/api\/filtersData');   }    onFilterChange(filterValue: any) {     this.data = this.filterData(filterValue);   }    private filterData(filterValue): Item[] {     \/\/ \u0422\u0443\u0442 \u043b\u043e\u0433\u0438\u043a\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438   } }<\/code><\/pre>\n<p>  <\/p>\n<h1>\u041c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u0438\u043b\u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0445\u0440\u0430\u043d\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445<\/h1>\n<p>  <\/p>\n<h3 id=\"pochemu-vybiraem-servisy\">\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435: \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u0440\u0443 \u043d\u043e\u0432\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0442\u0430\u043a\u0436\u0435, \u0447\u0442\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u043d\u0443\u0436\u043d\u044b \u043e\u0431\u0449\u0438\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b. \u0422\u043e\u0433\u0434\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Component({   selector: 'app-root',   template: `     &lt;app-filters (selectedChange)=&quot;onFilterChange($event)&quot; [filtersData]=&quot;filtersData&quot;&gt;&lt;\/app-filters&gt;     &lt;router-outlet&gt;&lt;\/router-outlet&gt; &lt;!-- \u0441\u044e\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 --&gt;   `, }) export class AppComponent { } <\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u043e \u0432 \u0442\u0430\u043a\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 <em>\u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/em> \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435.<br \/>  \u041d\u043e \u0431\u044b\u0442\u044c \u043c\u043e\u0436\u0435\u0442, \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437-\u0437\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u043d\u0430 \u043e\u0431\u0449\u0438\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u043f\u043e\u043c\u0438\u043c\u043e \u043e\u0431\u0449\u0435\u0433\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u043d\u0443\u0436\u043d\u044b \u0435\u0449\u0435 \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b. \u0422\u043e\u0433\u0434\u0430 layout \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0438\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Component({   selector: 'app-root',   template: `     &lt;router-outlet&gt;&lt;\/router-outlet&gt; &lt;!-- \u0441\u044e\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438 --&gt;   `, }) export class AppComponent { }  \/\/ \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0442\u0430\u043a @Component({   selector: 'app-first-page',   template: `     &lt;!-- \u041e\u0431\u0449\u0438\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b --&gt;     &lt;app-filters-common (selectedChange)=&quot;onFilterChange($event)&quot; [filtersData]=&quot;filtersData&quot;&gt;&lt;\/app-filters-common&gt;       &lt;!-- \u0424\u0438\u043b\u044c\u0442\u0440\u044b, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b --&gt;     &lt;app-filters-for-first-table&gt;&lt;app-filters-for-first-table&gt;      &lt;app-table-first [data]=&quot;data&quot;&gt;&lt;\/app-table-first&gt;   `, }) export class FirstPageComponent {}  @Component({   selector: 'app-second-page',   template: `     &lt;!-- \u041e\u0431\u0449\u0438\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b --&gt;     &lt;app-filters-common (selectedChange)=&quot;onFilterChange($event)&quot; [filtersData]=&quot;filtersData&quot;&gt;&lt;\/app-filters-common&gt;      &lt;!-- \u0424\u0438\u043b\u044c\u0442\u0440\u044b, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b --&gt;     &lt;app-filters-for-second-table&gt;&lt;app-filters-for-second-table&gt;      &lt;app-table-second [data]=&quot;data&quot;&gt;&lt;\/app-table-second&gt;   `, }) export class SecondPageComponent {} <\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u0441 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0440\u0430\u043d\u0435\u0435: \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0438\u0434\u043d\u044b \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443, \u0438 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u041d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0440\u043e\u0443\u0442\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446 (\u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0438\u0436\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443) \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0442\u043e \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u044b \u0437\u0430\u043d\u043e\u0432\u043e. \u041d\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0430 \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435. \u041f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0436\u0435 \u0438\u0445 \u0438\u0437 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 app-root \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442, \u0432\u0435\u0434\u044c \u0438\u0437-\u0437\u0430 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u043f\u0440\u044f\u043c\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u0441 \u043a\u043e\u0440\u043d\u0435\u043c \u043f\u043e\u0442\u0435\u0440\u044f\u043d\u0430.<br \/>  \u0427\u0442\u043e \u0436\u0435, \u043e\u043f\u044f\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0436\u0435 \u0434\u043b\u044f <em>\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432<\/em> \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445. \u042d\u0442\u043e \u0440\u0435\u0448\u0438\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c:<\/p>\n<p>  <\/p>\n<p><strong>\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0432\u0437\u0430\u0438\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/strong> \u041d\u0435\u0442 \u043d\u0443\u0436\u0434\u044b \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u0442\u044b \u043c\u043e\u0433\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u043d\u043f\u0443\u0442\u044b \u0438 \u0430\u0443\u0442\u043f\u0443\u0442\u044b \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430. \u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <a href=\"https:\/\/angular.io\/guide\/dynamic-component-loader\">\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438<\/a> (\u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u043e\u0443\u0442\u0435\u0440). \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0442\u0438\u043f\u0430 <a href=\"https:\/\/material.angular.io\/cdk\/portal\/overview\">\u043f\u043e\u0440\u0442\u0430\u043b\u043e\u0432<\/a>. \u0410 \u0434\u043e\u0441\u0442\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0432 Angular \u043f\u0440\u043e\u0441\u0442\u043e: \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c DI.<\/p>\n<p>  <\/p>\n<p><strong>\u0414\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e, \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/strong> \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u0432 Angular \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b. \u041c\u043e\u0436\u043d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0443 \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (<a href=\"https:\/\/habr.com\/ru\/post\/281449\/\">\u044f \u043f\u0438\u0441\u0430\u043b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/a>; \u043e\u043d\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0430, \u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0432\u0435\u0449\u0435\u0439 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b), \u043d\u043e \u0431\u0435\u0437 \u043e\u0441\u043e\u0431\u043e\u0439 \u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u2014 \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u0422\u043e\u0433\u0434\u0430 \u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <em>\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442<\/em> \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432), \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u0414\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <em>\u0437\u0430\u0432\u0438\u0441\u044f\u0442<\/em> \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432), \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430. \u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0442\u0430\u043a\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u044b\u043b \u0431\u044b \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c.<\/p>\n<p>  <\/p>\n<p><strong>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435 \u043b\u043e\u0433\u0438\u043a\u0438.<\/strong> \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u0447\u0442\u0438 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 Angular \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u043d\u044b\u0439 \u0441\u043b\u043e\u0439.<\/p>\n<p>  <\/p>\n<h2>\u0412\u044b\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0430<\/h2>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0441 \u0442\u0435\u043c, \u0433\u0434\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c. \u041a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0441\u0435\u0440\u0432\u0438\u0441\u044b?<\/p>\n<p>  <\/p>\n<h3 id=\"primitivnyy-metod-hranim-v-polyah-metoda-bez-otslezhivaniya\">\u041f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434: \u0445\u0440\u0430\u043d\u0438\u043c \u0432 \u043f\u043e\u043b\u044f\u0445 \u043c\u0435\u0442\u043e\u0434\u0430 \u0431\u0435\u0437 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043f\u043e\u043b\u044f\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a: \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, Angular \u043c\u043e\u0436\u0435\u0442 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u043c, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 <a href=\"https:\/\/angular.io\/api\/core\/ChangeDetectionStrategy#Default\">ChangeDetectionStrategy.Default<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435).<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 <a href=\"https:\/\/stackblitz.com\/edit\/angular-umk1lf\">\u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a>: \u043c\u044b \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043c\u0435\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u0435 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 <code>OnPush<\/code> \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0418 \u0443 \u043d\u0430\u0441 \u0434\u0430\u0436\u0435 \u043d\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043a\u0430\u043a-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e, \u0432\u0435\u0434\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445, \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e: \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u044e\u0442. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0438 \u0441\u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442.<\/p>\n<p>  <\/p>\n<h3 id=\"prodvinutyy-metod-dobavlyaem-reaktivnosti\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u043c\u0435\u0442\u043e\u0434: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0434\u043e \u043a\u0430\u043a-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u2014 RxJS.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432 <code>Observable<\/code>-\u043f\u043e\u043b\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import { Injectable } from '@angular\/core';  @Injectable({ providedIn: 'root' }) export class StorageService {   \/\/ \u0411\u044b\u043b\u043e   \/\/ data = 'initial value';    \/\/ \u0421\u0442\u0430\u043b\u043e   private dataSubject: BehaviorSubject&lt;string&gt; = new BehaviorSubject('initial value');   data$: Observable&lt;string&gt; = this.dataSubject.asObservable();    setData(newValue: string) {     this.dataSubject.next(newValue);   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/rxjs-dev.firebaseapp.com\/api\/index\/class\/BehaviorSubject\">BehaviorSubject<\/a>. \u042d\u0442\u043e <a href=\"https:\/\/rxjs-dev.firebaseapp.com\/api\/index\/class\/Subject\">Subject<\/a> (\u0442. \u0435. \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 <code>Observable<\/code>, \u0438 <code>Observer<\/code>), \u043f\u043b\u044e\u0441 \u043e\u043d \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0438 \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0438\u043c. \u0421\u0430\u043c\u0438 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0437 \u043f\u043e\u043b\u044f <code>data$<\/code>. \u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u0432 \u043f\u043e\u0442\u043e\u043a\u0435 \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 RxJS \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0440\u0438\u043c\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Component({   selector: 'my-app',   template: `{{ data }}`, }) export class AppComponent implements OnDestroy {   data: any;    subscription: Subscription = null;    constructor(public storage: StorageService) {     this.subscription = this.storage.data$.subscribe(data =&gt; this.data = data);   }    ngOnDestroy(): void {     \/\/ \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f!     if (this.subscription !== null) {       this.subscription.unsubscribe();       this.subscription = null;     }   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0442\u044b \u0433\u0434\u0435-\u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0438\u043c, \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0431\u044b \u043e\u0442 \u043d\u0435\u0433\u043e \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f. \u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u044f\u0441\u043d\u044f\u044e\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 \u0438 \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0430\u0434\u043e \u0434\u0435\u043b\u0430\u0442\u044c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/medium.com\/ngx\/why-do-you-need-unsubscribe-ee0c62b5d21f\">\u0432\u043e\u0442<\/a>).<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0432 Angular \u0435\u0441\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e, \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 <code>Promise<\/code> \u0438 <code>Observable<\/code>, \u2014 \u043f\u0430\u0439\u043f <a href=\"https:\/\/angular.io\/api\/common\/AsyncPipe\">async<\/a>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Component({   selector: 'my-app',   template: `{{ data$ | async }}`, \/\/ \u0432\u0441\u0435 \u043e\u0442\u043f\u0438\u0448\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e }) export class AppComponent  {   data$: Observable&lt;any&gt;;    constructor(public storage: StorageService) {     this.data$ = this.storage.data$;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043a\u043e\u0434\u0430 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u0441\u0442\u0430\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0434\u0432\u0430 \u043f\u043e\u043b\u044f \u0438 \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434. \u041a\u0430\u043a\u0438\u0435 \u043f\u043b\u044e\u0441\u044b? \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0441 <code>OnPush<\/code>-\u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0435, \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0439 \u043f\u0430\u0439\u043f async \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/li>\n<li>\u0412 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043f\u043e\u043b\u044f.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 <a href=\"https:\/\/stackblitz.com\/edit\/angular-sedsr2?file=src%2Fapp%2Fapp.component.ts\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 <code>OnPush<\/code> \u043c\u044b \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438 \u043a\u043e\u0434: \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043f\u0430\u0439\u043f <code>async<\/code>, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0432\u0441\u044e \u0432\u044b\u0433\u043e\u0434\u0443 <code>OnPush<\/code>-\u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u043d\u0430\u0434\u043e.<\/p>\n<p>  <\/p>\n<h2>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/h2>\n<p>  <\/p>\n<h3 id=\"malenkoe-prilozhenie-----u-kazhdogo-komponenta-svoy-servis\">\u041c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441<\/h3>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0441 \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0430\u043c\u0438 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0411\u0443\u0434\u0435\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0442\u0430\u0440\u0430\u0442\u044c\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u2014 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435: \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430 \u043e\u0434\u043d\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430 \u043e\u0434\u043d\u0443 \u0433\u0440\u0443\u043f\u043f\u0443 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0438 \u0442. \u0434.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f Observable-\u043f\u043e\u043b\u0435\u0439, \u044f \u0441\u0434\u0435\u043b\u0430\u044e \u0442\u0430\u043a\u043e\u0439 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export class BehaviorSubjectItem&lt;T&gt; {   readonly subject: BehaviorSubject&lt;T&gt;;   readonly value$: Observable&lt;T&gt;;    \/\/ \u041f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0431\u043e\u043d\u0443\u0441: \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c `BehaviorSubject`, \u0442\u043e \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u0431\u0435\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438.   get value(): T {     return this.subject.value;   }    set value(value: T) {     this.subject.next(value);   }    constructor(initialValue: T) {     this.subject = new BehaviorSubject(initialValue);     this.value$ = this.subject.asObservable();   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class FiltersStore {   private apiUrl = '\/path\/to\/api';    readonly filterData: BehaviorSubjectItem&lt;{ value: string; text: string }[]&gt; = new BehaviorSubjectItem([]);   readonly selectedFilters: BehaviorSubjectItem&lt;string[]&gt; = new BehaviorSubjectItem([]);    constructor(private http: HttpClient) {     this.fetch(); \/\/ \u0442\u0443\u0442 \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0431\u044d\u043a\u0430   }    fetch() {     this.http.get(this.apiUrl).subscribe(data =&gt; this.filterData.value = data);   }    setSelectedFilters(value: { value: string; text: string }[]) {     this.selectedFilters.value = value;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class TableStore {   private apiUrl = '\/path\/to\/api';    tableData: BehaviorSubjectItem&lt;any[]&gt;;   loading: BehaviorSubjectItem&lt;boolean&gt; = new BehaviorSubjectItem(false);    constructor(private filterStore: FilterStore, private http: HttpClient) {     this.fetch();   }    fetch() {     this.tableData$ = this.filterStore.selectedFilters.value$.pipe(       tap(() =&gt; this.loading.value = true),       switchMap(selectedFilters =&gt; this.http.get(this.apiUrl, { params: selectedFilters })),       tap(() =&gt; this.loading.value = false),       share(),     );   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/rxjs-dev.firebaseapp.com\/api\/index\/function\/combineLatest\">combineLatest<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">this.tableData$ = combineLatest(firstSource$, secondSource$).pipe(   \/\/ start loading   switchMap([firstData, secondData] =&gt; \/* ... *\/)   \/\/ end loading );<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Component({   selector: 'first-table-page',   template: `     &lt;app-filters (selectedChange)=&quot;onFilterChange($event)&quot; [filterData]=&quot;filterData$ | async&quot;&gt;&lt;\/app-filters&gt;     &lt;app-table-first [data]=&quot;tableData$ | async&quot; [loading]=&quot;loading$ | async&quot;&gt;&lt;\/app-table-first&gt;   `, }) export class FirstTablePageComponent {   filterData$: Observable&lt;FilterData[]&gt;;   tableData$: Observable&lt;TableItem[]&gt;;   loading$: Observable&lt;boolean&gt;;    constructor(private filtersStore: FiltersStore, private tableStore: FirstTableStore) {     this.filterData$ = filtersStore.filterData.value$;     this.tableData$ = tableStore.tableData.value$;     this.loading$ = tableStore.loading.value$;   }    onFilterChange(selectedFilters) {     this.filtersStore.setSelectedFilters(selectedFilters)     \/\/ \u0418\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0435\u0442\u0442\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435     this.filtersStore.selected.value = selectedFilters;   } } <\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0430 \u043e\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f;<\/li>\n<li>\u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446) \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441;<\/li>\n<li>\u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e \u0441\u0432\u043e\u0435\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/li>\n<li>\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"srednee-prilozhenie-----obedinyaem-servisy\">\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/h3>\n<p>  <\/p>\n<p>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043a\u0430\u0436\u0434\u044b\u0439 store-\u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435\u043f\u043b\u043e\u0445 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b: \u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 Single Responsibility, \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0443 \u043d\u0435\u0433\u043e \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u0430 \u0438\u0437\u0432\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043c\u0438\u043d\u0443\u0441\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li><strong>\u0414\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430.<\/strong> \u0422\u0430\u043a\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u043d\u043e \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043e\u0431\u0449\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0435\u0435 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441.<\/li>\n<li><strong>\u0421\u043b\u043e\u0436\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438.<\/strong> \u0412\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u0435\u0449\u0435 5\u201310 \u0434\u0440\u0443\u0433\u0438\u0445 store-\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432.<\/li>\n<li><strong>\u0422\u0440\u0443\u0434\u043e\u0435\u043c\u043a\u0438\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433.<\/strong> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043f\u043e\u043b\u0435 \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 Foo \u0432 \u0441\u0435\u0440\u0432\u0438\u0441 Bar, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u0433\u0434\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d Foo, \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u044b, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044f Foo \u043d\u0430 Bar, \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u043c\u044f \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u0442. \u0434.<\/li>\n<li><strong>\u041d\u0435\u0442 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438, \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430.<\/strong> \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u043e\u0433\u0433\u0435\u0440. \u0418\u043b\u0438, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0443\u0437\u043b\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 localStorage), \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438\u0437\u0432\u043d\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u0438\u043c\u0435\u0442\u044c \u0434\u0432\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430: \u043f\u043e \u0446\u0432\u0435\u0442\u0430\u043c \u0438 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0438\u0445 \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043c \u0438\u0445 \u0432 \u043e\u0434\u0438\u043d.<\/p>\n<p>  <\/p>\n<p><strong>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445,<\/strong> \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 HTTP API \u0438, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0412\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a \u0431\u044d\u043a\u0435\u043d\u0434\u0443 \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u043e\u0442 \u043d\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u044b. \u0414\u0435\u043b\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441 \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u2014 \u0434\u0435\u043b\u043e \u0432\u043a\u0443\u0441\u0430.<\/p>\n<p>  <\/p>\n<p><strong>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445,<\/strong> \u0432 store-\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0435 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u043b\u044f\u0445, \u0430 \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export interface FilterItem&lt;T&gt; {    value: T;    text: string; }  export interface FilterState&lt;T&gt; {   data: FilterItem&lt;T&gt;[];   selected: string[]; }  type ColorsFilterState = FilterState&lt;string&gt;; type SizesFilterState = FilterState&lt;int&gt;;  export interface FiltersState {   colors: ColorsFilterState;   sizes: SizesFilterState; }  const FILTERS_INITIAL_STATE: FiltersState = {   colors: {     data: [],     selected: [],   },   sizes: {     data: [],     selected: [],   }, };  @Injectable() export class FiltersStore {   filtersState: BehaviorSubjectItem&lt;FiltersState&gt; = new BehaviorSubjectItem(FILTERS_INITIAL_STATE); }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412-\u0442\u0440\u0435\u0442\u044c\u0438\u0445,<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class FiltersStore {   filtersState: BehaviorSubjectItem&lt;FiltersState&gt; =  = new BehaviorSubjectItem({\/* ... *\/});    setColorsData(data: FilterItem&lt;string&gt;[]) {     const oldState = this.filtersState.value;     this.filtersState.value = {       ...oldState,       colors: {         ...oldState.colors,         data,       },     };   }    setColotsSelected(selected: string[]) {     const oldState = this.filtersState.value;     this.filtersState.value = {       ...oldState,       colors: {         ...oldState.colors,         selected,       },     };   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412-\u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0445,<\/strong> \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class FiltersStore {   filtersState: BehaviorSubjectItem&lt;FiltersState&gt; =  = new BehaviorSubjectItem({\/* ... *\/});   setColorsData(data: FilterItem&lt;string&gt;[]) {\/* ... *\/}   setColotsSelected(selected: string[]) {\/* ... *\/}    colorsFilter$: Observable&lt;ColorsFilterState&gt; = this.filtersState.value$.pipe(     map(filtersState =&gt; filtersState.colors), \/\/ \u043b\u0438\u0431\u043e pluck('colors')   );    colorsFilterData$: Observable&lt;FilterItem&lt;string&gt;[]&gt; = this.colorsFilter$.pipe(     map(colorsFilter =&gt; colorsFilter.data),   );    colorsFilterSelected$: Observable&lt;string[]&gt; = this.colorsFilter$.pipe(     map(colorsFilter =&gt; colorsFilter.selected),   ); }<\/code><\/pre>\n<p>  <\/p>\n<h1>\u0411\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u0434\u0435\u043b\u0430\u0435\u043c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0438\u043b\u0438 \u0431\u0435\u0440\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<\/h1>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0439\u0442\u0438 \u0435\u0449\u0435 \u0434\u0430\u043b\u044c\u0448\u0435: \u043e\u0442\u0432\u044f\u0437\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u043d\u044b\u043c \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<h3 id=\"delaem-universalnoe-hranilische\">\u0414\u0435\u043b\u0430\u0435\u043c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/h3>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443. \u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0437 observable-\u043f\u043e\u043b\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u043d\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u043d\u0435\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e: \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0438 \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u0442\u043e \u0443 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 \u044d\u0442\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0441\u0435\u0442\u0442\u0435\u0440 \u043f\u043e\u043b\u044f). \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0447\u0435\u043d\u044c \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d Flux, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 Facebook.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u043e\u0432\u044c\u0435\u043c \u0434\u0430\u043d\u043d\u0443\u044e \u0438\u0434\u0435\u044e \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u043e\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c;<\/li>\n<li>\u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/li>\n<li>\u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u043a\u0430\u043a-\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u041c\u043e\u0436\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c DI:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export interface AppState {\/* ... *\/}  export const INITIAL_STATE: InjectionToken&lt;AppState&gt; = new InjectionToken('InitialState');  \/\/ \u0413\u0434\u0435-\u0442\u043e \u0432 AppModule const appInitialState: AppState = {\/* ... *\/}; @NgModule({   providers: [     Store,     { provide: INITIAL_STATE, useValue: appInitialState },   ] }) export class AppModule {}<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u043c\u0435\u0442\u043e\u0434 <code>init<\/code> \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/angular.io\/api\/core\/APP_INITIALIZER\">APP_INITIALIZER<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class Store&lt;AppState&gt; {   state: BehaviorSubjectItem&lt;AppState&gt;;    init(initialState: AppState) {     this.state = new BehaviorSubjectItem(initialState);   } }  const appInitialState: AppState = {\/* ... *\/};  export function initStore(store: Store&lt;AppState&gt;) {   return () =&gt; store.init(); }   @NgModule({   providers: [     Store,     {        provide: APP_INITIALIZER,       useFactory: initStore,       deps: [Store],        multi: true,     }   ] }) export class AppModule {}<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u0432 \u0441\u0435\u0440\u0432\u0438\u0441 \u0443\u0436\u0435 \u043d\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u043d\u0443\u0436\u0435\u043d \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0438\u0441\u0430\u0442\u044c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<br \/>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u043f\u043e \u0446\u0432\u0435\u0442\u0443 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a: export interface ColorsFilterState {   data: FilterItem&lt;string&gt;[];   selected: string[]; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u0432\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u044d\u0442\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c: \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432. \u041d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041e\u0431\u044a\u0435\u043a\u0442\u044b, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">interface ChangeColorsDataAction {   type: 'changeData';   payload: FilterItem&lt;string&gt;[]; }  interface ChangeColorsSelectedAction {   type: 'changeSelected';   payload: string[]; }  type ColorsActions = ChangeColorsDataAction | ChangeColorsSelectedAction;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u043f\u0438\u0448\u0435\u043c, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const changeColorsDataState: (oldState: ColorsFilterState, data: FilterItem&lt;string&gt;[]) =&gt; FilterState = (oldState, data) =&gt; ({ ...oldState, data });  export const changeColorsSelectedState: (oldState: ColorsFilterState, selected: string[]) =&gt; FilterState = (oldState, selected) =&gt; ({ ...oldState, selected });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u044d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u0411\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0442\u0430\u0440\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0442\u0438\u043f \u043d\u0443\u0436\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const changeColorsState: (oldState: ColorsFilterState, action: ColorsActions) =&gt; ColorsFilterState = (state, action) =&gt; {   if (action.type === 'changeData') {     return changeColorsDataState(oldState, action.payload);   }   if (action.type === 'changeSelected') {     return changeColorsSelectedState(oldState, action.payload);   }   return oldState; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u0435? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0431\u044b \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u0441\u0435\u0440\u0432\u0438\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c <code>ColorsFilterState<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class Store&lt;ColorsFilterState&gt; {   state: BehaviorSubjectItem&lt;ColorsFilterState&gt;;   init(     state: ColorsFilterState,      changeStateFunction: (oldState: ColorsFilterState, action: ColorsActions) =&gt; ColorsFilterState, \/\/ &lt;- \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0432\u0441\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c   ) {\/* ... *\/}    changeState(action: ColorsActions) {     this.state.value = this.changeStateFunction(this.state.value, action);   } } \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 this.store.changeState({ type: 'changeSelected', payload: ['red', 'orange'] });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u043c\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435;<\/li>\n<li>\u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/li>\n<li>\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c;<\/li>\n<li>\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c<br \/>  \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043e\u0442 \u0447\u0430\u0441\u0442\u043d\u043e\u0433\u043e \u043a \u043e\u0431\u0449\u0435\u043c\u0443. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0443\u043c\u0435\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u0443\u0437\u043b\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0443\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>changeStateFunction<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043c\u043e\u0433\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0432\u0441\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u041d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0435\u043c. \u041f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043a\u0443\u0441\u043e\u0447\u043a\u0430\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043e\u0434\u043d\u0443 \u0431\u043e\u043b\u044c\u0448\u0443\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0443\u0441\u0442\u044c \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a: export interface FiltersState {   colors: ColorsFilterState;   sizes: SizesFilterState; } \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u043f\u043e \u0446\u0432\u0435\u0442\u0443 export const changeColorsState = (state, action) =&gt; {\/* ... *\/}; \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 export const changeSizeState = (state, action) =&gt; {\/* ... *\/};  export const changeFunctionsMap = {   colors: changeColorsState,   sizes: changeSizeState, };  export function combineChangeStateFunction(fnsMap) {   return function (state, action) {     const nextState = {};     Object.entries(fnsMap).forEach(([key, changeFunction]) =&gt; {       nextState[key] = changeFunction(state[key], action);     });     return nextState;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 EventBus:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438;<\/li>\n<li><code>changeStateFunction<\/code> \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0438\u0437\u0443\u0435\u0442 \u044d\u0442\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442<br \/>  \u0442\u0438\u043f\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u043d\u0430\u0434 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c;<\/li>\n<li>\u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u0448\u0438\u043d\u0443, \u0430 \u0441\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0435<br \/>  \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0430\u043c\u0438 \u0438\u0437-\u0437\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0438 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u043a\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440 state manager&#8217;\u0430. \u0415\u0441\u043b\u0438 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u043d\u043e \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043b\u0443\u0447\u0448\u0435 \u0432\u0437\u044f\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441 \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c. \u041f\u043e\u0434\u043e\u0439\u0434\u0443\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/ngrx.io\/\">NgRx<\/a>;<\/li>\n<li><a href=\"https:\/\/www.ngxs.io\/\">NGXS<\/a>;<\/li>\n<li><a href=\"https:\/\/mobx.js.org\/README.html\">MobX<\/a> + <a href=\"https:\/\/github.com\/mobxjs\/mobx-angular\">MobX Angular<\/a> (\u044d\u0442\u043e \u0442\u043e\u0436\u0435<br \/>  \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u043d\u043e \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439).<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<h2>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 NgRx<\/h2>\n<p>  <\/p>\n<h3 id=\"kak-rabotaet-ngrx\">\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 NgRx<\/h3>\n<p>  <\/p>\n<p>NgRx \u0431\u0435\u0440\u0435\u0442 \u0438\u0434\u0435\u044e Redux \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0435\u0435 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 Angular. \u0412 \u0446\u0435\u043b\u043e\u043c Redux \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u0430 \u043d\u0438 \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443, \u043d\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0432 react-\u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0445\u043e\u0434 Redux \u0438 NgRx \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0432\u0438\u0434\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u042d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u2014 store. \u0418\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u043c. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u00ab\u0441\u0438\u0433\u043d\u0430\u043b\u00bb \u2014 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0438\u043f\u043e\u043c (\u043e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430) \u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u00ab\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u00bb \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043f\u0443\u0442\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u0447\u0438\u0441\u0442\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u2014 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 API \u0438\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435), \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c Middleware (\u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 NgRx \u2014 Effect).<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 Redux \u0438 NgRx:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/tb\/jc\/ld\/tbjcldkuobgbbfk-exq_ddtkloy.gif\"><\/p>\n<p>  <\/p>\n<ol>\n<li>\u0412\u043e view \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 (\u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u044b, \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 XHR-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0442. \u0434.).<\/li>\n<li>\u042d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435.<\/li>\n<li>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043f\u0440\u043e\u0445\u043e\u0434\u044f \u0447\u0435\u0440\u0435\u0437 Middleware (Effect), \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a API.<\/li>\n<li>\u0420\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u0431\u0435\u0440\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0441\u0442\u0430\u0440\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0437 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/li>\n<li>View \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c.<\/li>\n<li>\u0418\u0437 API \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u0432\u0435\u0442 (\u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0448\u0430\u0433):<br \/> \n<ul>\n<li>\u043d\u0430 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435;<\/li>\n<li>\u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0442\u0441\u044f \u043f\u0443\u043d\u043a\u0442\u044b 4 \u0438 5.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0435\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/habr.com\/ru\/post\/439104\/\">\u0432\u043e\u0442 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e<\/a>. \u0412 \u043d\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 Redux \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u0438\u043b\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"podklyuchaem-moduli-ngrx\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u0438 NgRx<\/h3>\n<p>  <\/p>\n<p><strong>@ngrx\/store<\/strong><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \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. \u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u0441\u0435\u0440\u0432\u0438\u0441 <code>Store<\/code>. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e. \u0421\u0430\u043c \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 <code>Observable<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u043e \u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e \u2014 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0438\u0437 RxJS \u0438 <code>async<\/code>-\u043f\u0430\u0439\u043f. \u0412 \u0441\u0430\u043c\u043e\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c. \u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0447\u0430\u0441\u0442\u044c\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 select. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 <code>map<\/code> \u043b\u0438\u0431\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 <a href=\"https:\/\/www.learnrxjs.io\/operators\/transformation\/pluck.html\">pluck<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430\u043c \u0441\u043f\u0435\u0440\u0432\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0442\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0417\u0430\u0442\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>dispatch<\/code> \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 <code>store<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0443\u0434\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export interface FilterItem&lt;T&gt; {    key: string;    value: T; } \/\/ \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f export enum FiltersActionTypes {   Change = '[Filter] Change',   Reset = '[Filter] Reset', }  export class ChangeFilterAction implements Action {   readonly type = FiltersActionTypes.Change;   constructor(public payload: { filterItem: FilterItem&lt;string&gt; }) {} }  export class ResetFilterAction implements Action {   readonly type = FiltersActionTypes.Reset;   constructor() {} }  export type FiltersActions = ChangeFilterAction | ResetFilterAction;  \/\/ \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 export interface FiltersState {   filterData: FilterItem&lt;string&gt;[];   selected: FilterItem&lt;string&gt;; }  export const FILTERS_INIT_STATE: FiltersState = {   filterData: [     { key: '-', value: '---' },     { key: 'red', value: '\u041a\u0440\u0430\u0441\u043d\u044b\u0439' },     { key: 'green', value: '\u0417\u0435\u043b\u0435\u043d\u044b\u0439' },     { key: 'blue', value: '\u0421\u0438\u043d\u0438\u0439' },   ],   selected: { key: '-', value: '---' }, };  \/\/ \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 export function filtersReducer(state: FiltersState = FILTERS_INIT_STATE, action: FiltersActions) {   switch (action.type) {     case FiltersActionTypes.Change:       return {         ...state,         selected: action.payload.filterItem,       };     case FiltersActionTypes.Reset:       return {         ...state,         selected: { key: '-', value: '---' },       };     default:       return state;   } }  \/\/ \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 select \/\/ \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 export const selectedFilterSelector = createSelector(state =&gt; state.filters.seleced);  \/\/ \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 export interface AppState {   filters: FiltersState; }  export const reducers: ActionReducerMap&lt;AppState&gt; = {   filters: filtersReducer, }  @NgModule({   imports: [     StoreModule.forRoot(reducers),   ],   \/\/ ... }) export class AppModule {}  \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c @Component({   selector: 'app-root',   template: `     &lt;app-filters [data]=&quot;filtersData$ | async&quot;                   [selected]=&quot;selectedFilter$ | async&quot;                   (change)=&quot;onChange($event)&quot;                  (reset)=&quot;onReset()&quot;&gt;   `, }) export class AppComponent {   filtersData$: Observable&lt;FilterItem&lt;string&gt;[]&gt;;   selectedFilter$: Observable&lt;FilterItem&lt;string&gt;&gt;;    constructor(private store: Store&lt;AppState&gt;) {     this.filtersData$ = this.store.pipe(select('filters', 'data'));     \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440     this.selectedFilter$ = this.store.pipe(select(selectedFilterSelector));   }    onChange(filterItem: FilterItem) {     this.store.dispatch(new ChangeFilterAction({ filterItem }));   }    onReset() {     this.store.dispatch(new ResetFilterAction());   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u0432\u044b\u0448\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u0430. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 <a href=\"https:\/\/ngrx.io\/guide\/store#tutorial\">\u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 action<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/ngrx.io\/guide\/schematics\">cli-\u043a\u043e\u043c\u043c\u0430\u043d\u0434\u044b<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>@ngrx\/effects<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043b\u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0447\u0442\u043e-\u0442\u043e, \u0438 \u0442\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u0440\u0438\u0437\u0443\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e \u0442\u0438\u043f\u0443, \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0435, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u041e\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u0443\u0441\u043e\u043a \u0441\u0442\u043e\u0440\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c <code>@ngrx\/store<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u0447\u0438\u0441\u0442\u043e\u0435\u00bb \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435: \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 API, \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043b\u043e\u0433, \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e. \u0412 Redux \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c Middleware, NgRx \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0430\u043d\u0430\u043b\u043e\u0433 \u2014 \u044d\u0444\u0444\u0435\u043a\u0442\u044b. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u2014 \u043f\u043e\u043b\u0435 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <code>@Effect<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u044f, \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 <code>Effect<\/code>, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u044d\u0444\u0444\u0435\u043a\u0442. \u042d\u0442\u0438 \u043f\u043e\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0442\u0438\u043f\u0430 <code>Observable&lt;Action&gt;<\/code>. \u041e\u0431\u044b\u0447\u043d\u043e \u043e\u043d\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0442\u0430\u043a. \u0418\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 Actions \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0434\u0430\u043b\u0435\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0437\u0430\u0434\u0430\u0447\u0430: \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0437\u0430\u043f\u0440\u043e\u0441 \u043a API \u0438 \u0442. \u0434. \u041f\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u043f\u043e\u0442\u043e\u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class AppEffects {   \/\/ \u041f\u0440\u043e\u0441\u0442\u043e \u043b\u043e\u0433\u0438\u0440\u0443\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043b\u043e\u0433\u0438\u043d\u0430   @Effect({ dispatch: false })   loginSuccess$ = this.actions$.pipe(     ofType(LoginActionTypes.Success),     tap(() =&gt; {       this.logger.log('Login success')     }),   );    \/\/ \u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a API   \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0440\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f   \/\/ \u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f FiltersActionTypes.LoadStarted \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043a API   \/\/ \u041f\u043e \u0435\u0433\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u043b\u0438\u0431\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 FiltersDataLoadSuccess \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445   \/\/ \u041b\u0438\u0431\u043e FiltersDataLoadFailure, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430   @Effect()   loadFilterData$ = this.actions$.pipe(     ofType(FiltersActionTypes.LoadStarted),     switchMap(() =&gt; this.filtersBackendService.fetch()),     map(filtersData =&gt; new FiltersDataLoadSuccess({ filtersData })),     catchError(error =&gt; new FiltersDataLoadFailure({ error })),   );    \/\/ Actions \u2014 \u0441\u0435\u0440\u0432\u0438\u0441 Observable \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 @ngrx\/store   \/\/ \u0412 \u043d\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u0440\u0438\u0437\u0443\u0435\u043c\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f   constructor(private actions$: Actions, private filtersBackendService: FiltersBackendService) {} }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@NgModule({   imports: [     EffectsModule.forRoot([ AppEffects ]),   ], }) export class AppModule {}<\/code><\/pre>\n<p>  <\/p>\n<p><strong>@ngrx\/store-devtools<br \/>  <\/strong><br \/>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c <a href=\"https:\/\/github.com\/reduxjs\/redux-devtools\">Redux DevTools<\/a> \u0434\u043b\u044f NgRx. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043b\u043e\u0433\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0441 \u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u043c\u0438;<\/li>\n<li>\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0432\u0441\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0433\u0440\u0430\u0444\u0430;<\/li>\n<li>\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u043c\u043e\u0442\u043a\u0438 \u0432\u043f\u0435\u0440\u0435\u0434-\u043d\u0430\u0437\u0430\u0434 \u043f\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0438\u0436\u0435 \u2014 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 <code>@ngrx\/store-devtools<\/code>. \u0421\u043b\u0435\u0432\u0430 \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0434\u0435\u0440\u0435\u0432\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pi\/2i\/wy\/pi2iwy7wno__pxlg8iyyljatuim.png\"><\/p>\n<p>  <\/p>\n<p><strong>@ngrx\/router-store<\/strong><\/p>\n<p>  <\/p>\n<p>NgRx \u0438\u043c\u0435\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0440\u043e\u0443\u0442\u0435\u0440\u043e\u043c Angular. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430;<\/li>\n<li>\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0432 \u0441\u0442\u043e\u0440;<\/li>\n<li>\u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0430 \u0432\u044b\u0437\u043e\u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 NgRx.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c. \u0412 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u043b\u043e\u0433\u0438\u0440\u0443\u0435\u0442\u00bb \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0440\u043e\u0443\u0442\u0435\u0440\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 DevTools \u0432 \u043b\u043e\u0433\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0415\u0441\u043b\u0438 \u0432 URL \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0445, \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0445 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432 \u0441\u0442\u043e\u0440, \u043e\u0442\u043a\u0443\u0434\u0430 \u0438\u0445 \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c.<\/p>\n<p>  <\/p>\n<h3 id=\"dekompoziruem-sostoyanie-v-ngrx\">\u0414\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 NgRx<\/h3>\n<p>  <\/p>\n<p>\u0421\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430 NgRx \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0425\u043e\u0442\u044f \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u043d\u0430\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u0413\u043e\u0440\u0430\u0437\u0434\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043a\u0443\u0441\u043e\u0447\u043a\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0430 \u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export interface FiltersState {\/* ... *\/} export const FILTERS_INIT_STATE: FiltersState = {\/* ... *\/}; export function filtersReducer(state, action) {\/* ... *\/}  export interface AppState {   filters: FiltersState; }  export const reducers: ActionReducerMap&lt;AppState&gt; = {   filters: filtersReducer, }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0443\u0437\u0435\u043b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435<br \/>  \u0448\u0430\u0433\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/li>\n<li>\u041e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/li>\n<li>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440.<\/li>\n<li>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c AppState \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export interface FirstTableState {\/* ... *\/} export const TABLE_INIT_STATE: FirstTableState = {\/* ... *\/}; export function firstTableReducer(state, action) {\/* ... *\/} export const firstTableDataSelector = state =&gt; state.firstTable.data; export const firstTableLoadingSelector = state =&gt; state.firstTable.loading;  export interface AppState {   filters: FiltersState;   firstTable: FirstTableState; }  export const reducers: ActionReducerMap&lt;AppState&gt; = {   filters: filtersReducer,   firstTable: firstTableReducer, }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0443 \u0432\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f lazy loading \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0442\u0430\u043a\u043e\u043c\u0443 \u043c\u043e\u0434\u0443\u043b\u044e? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e <a href=\"https:\/\/ngrx.io\/guide\/store\/reducers#register-feature-state\">\u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c<\/a> \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u043e\u0440\u0430 \u043d\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u043a\u043e\u0440\u0435\u043d\u044c, \u0430 \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u043c\u043e\u0434\u0443\u043b\u044e. \u0412\u043e\u043e\u0431\u0449\u0435, \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u041c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043a\u0443\u0441\u043e\u043a \u0441\u0442\u043e\u0440\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u043b\u0435\u043d\u0438\u0432\u043e, \u0442\u043e\u0433\u0434\u0430 \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u044d\u0442\u043e\u043c\u0443 \u043a\u0443\u0441\u043a\u0443 \u0441\u0442\u043e\u0440\u0430, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u0442\u043e\u0436\u0435 \u043b\u0435\u043d\u0438\u0432\u043e.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c NgRx. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 \u043d\u0443\u0436\u043d\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0430\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0430. \u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c feature-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043d\u0435\u0442 \u043d\u0443\u0436\u0434\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u043e\u0440 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0412\u0441\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0430 \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u043a\u043e\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@NgModule({   imports: [     StoreModule.forFeature('auth', authReducer),     StoreModule.forFeature('user', userReducer),     StoreModule.forFeature('config', configReducer),     EffectsModule.forFeature([ AuthEffects, UserEffects, ConfigEffects ]),   ], }) export class LibModule {}<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0435 API \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. \u0412\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0441\u043a\u0440\u044b\u0442\u0430 \u0432 \u043d\u0435\u0434\u0440\u0430\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0438 \u044f\u0441\u043d\u044b\u0439 API \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 <code>LibModule<\/code> \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u043e\u0440\u0435 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0442\u0440\u0438 \u043f\u043e\u043b\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0447\u0435\u0440\u0435\u0437 API, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439.<\/p>\n<p>  <\/p>\n<h3 id=\"plyusy-i-minusy-ngrx\">\u041f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b NgRx<\/h3>\n<p>  <\/p>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0433\u043b\u0430\u0432\u0435 \u043f\u0440\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 \u044f \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u043b \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u0442\u0430\u043a\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a NgRx \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0414\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0432 NgRx \u043f\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442.<\/strong> \u041c\u044b \u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e \u043a\u0443\u0441\u043e\u0447\u043a\u0430\u043c, \u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u0412 \u0446\u0435\u043b\u043e\u043c NgRx \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434: \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043a\u0430\u043a \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438<\/strong> <strong>\u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442.<\/strong> \u0421\u0435\u0440\u0432\u0438\u0441 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d. \u0415\u0441\u043b\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u0435, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0435\u0440\u0435\u043c \u0438\u0445 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0436\u0435 \u0441\u0442\u043e\u0440\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 withLatestFrom \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 RxJS). \u0422\u0430\u043a\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u0422\u0440\u0443\u0434\u043e\u0435\u043c\u043a\u0438\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433<\/strong> <strong>\u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442\u0441\u044f.<\/strong> \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0442\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u041f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0438 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u043f\u043e\u043b\u0435 qux \u0438\u0437 \u043a\u0443\u0441\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f foo \u0432 bar \/\/ { foo: { qux: 1 }, bar: { baz: 2 } } =&gt; { foo: {}, bar: { qux: 1, baz: 2 } } \/\/ \u0411\u044b\u043b\u043e export const fooReducer = (state, action) =&gt; {\/* ... *\/} export const quxSelector = state =&gt; state.foo.qux;  \/\/ \u0421\u0442\u0430\u043b\u043e export const barReducer = (state, action) =&gt; {\/* ... *\/} export const quxSelector = state =&gt; state.bar.qux;  export const reducers = {   foo: fooReducer,   bar: barReducer, };  \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f @Component({}) export class AppComponent {   constructor(private store: Store&lt;AppState&gt;) {     this.qux$ = this.store.pipe(select(quxSelector));   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0415\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430.<\/strong> \u0412 NgRx \u043c\u043e\u0436\u043d\u043e \u043e\u0434\u043d\u0438\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class AppEffects {   @Effect({ dispatch: false })   log$ = this.actions$.pipe(tap(action =&gt; this.logger.log(action)));   constructor(private actions$: Actions, private logger: Logger) {} }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043b\u0438 \u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u0440\u0438 \u043b\u043e\u0433\u0438\u043d\u0435, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. \u0412\u0435\u0434\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441 Actions \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0442\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043b\u0435\u043d\u0438\u0432\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">@Injectable() export class AppEffects {   @Effect({ dispatch: false })   log$ = this.actions$.pipe(tap(action =&gt; this.logger.log(action)));   constructor(private actions$: Actions, private logger: Logger) {} }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u0435\u0449\u0435 \u0432 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0435 \u0438\u0434\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, NgRx \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u043e\u0439 \u043f\u0443\u043b\u0435\u0439 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n<p>  <\/p>\n<p><strong>\u041a\u043e\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e.<\/strong> \u0421 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0435\u0439 \u0441<\/strong> <strong>\u0434\u0440\u0443\u0433\u0438\u043c\u0438<\/strong> <strong>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438.<\/strong> \u041f\u043e\u0440\u043e\u0439 \u0431\u044b\u0432\u0430\u0435\u0442 \u0442\u0440\u0443\u0434\u043d\u043e \u043f\u043e\u0434\u0440\u0443\u0436\u0438\u0442\u044c NgRx \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0437-\u0437\u0430 \u0438\u0445 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f ag-Grid. \u041f\u0440\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0435 \u0433\u0440\u0438\u0434\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u043e\u043b\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u0440\u0438\u0434\u0430 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u00ab\u0432\u043d\u0443\u0442\u0440\u0438\u00bb ag-Grid \u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043c \u0436\u0435. \u0415\u0441\u043b\u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0433\u0440\u0438\u0434\u0430 \u0432 \u0441\u0442\u043e\u0440\u0435, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e ag-Grid \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044e \u0441\u0430\u043c\u043e\u043c\u0443. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0433\u0440\u0438\u0434\u0430 (\u043f\u043e\u0440\u044f\u0434\u043e\u043a, \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430, \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c) \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0438 \u0438\u0437\u0432\u043d\u0435, \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0433\u0440\u0438\u0434 \u0438\u0437 ag-Grid \u0432 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 NgRx, \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u043e\u0431\u0440\u0443\u044e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 ag-Grid \u0441\u0430\u043c\u043e\u043c\u0443. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u043c\u0435\u044e\u0442 \u043f\u043b\u043e\u0445\u043e\u0439 API, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 NgRx \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0412\u044b\u0445\u043e\u0434 \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u0432 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 NgRx.<\/p>\n<p>  <\/p>\n<p><strong>\u0412 \u0447\u0438\u0441\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438.<\/strong> \u0415\u0441\u043b\u0438 \u0444\u043e\u0440\u043c \u043c\u043d\u043e\u0433\u043e \u0438 \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u0435\u0439 \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0442\u043e \u043a\u043e\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e. \u041b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 Angular, \u0430 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0444\u043e\u0440\u043c\u044b. \u0418\u043b\u0438 \u043d\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435.<\/p>\n<p>  <\/p>\n<h1>\u0412\u044b\u0432\u043e\u0434\u044b<\/h1>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0432\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043d\u0430 Angular.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u043c\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438 \u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b, \u043a\u043e\u0433\u0434\u0430 Angular 2 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0432 \u0431\u0435\u0442\u0435 \u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0432\u043d\u044f\u0442\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e. \u041d\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0436\u0438\u0437\u043d\u044c \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448 \u0434\u043b\u044f \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>NgRx \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u043e\u0435\u0439 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435. \u0418\u0437-\u0437\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 (\u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u0441\u0430\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0435) \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442.<\/p>\n<p>  <\/p>\n<p>\u0412\u043a\u0440\u0430\u0442\u0446\u0435 \u0432\u043e\u0442 \u043c\u043e\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u044b\u0431\u043e\u0440\u0443 \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u0435, \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043f\u0430\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043d\u0438\u0445.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0434\u0435\u0441\u044f\u0442\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0442\u0438, \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043d\u043e \u043d\u0430\u0447\u043d\u0438\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u043c\u0443 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0443:<br \/> \n<ul>\n<li>\u0425\u0440\u0430\u043d\u0438\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445, \u0430 \u0432\u0435\u0441\u044c \u043a\u043e\u0434, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 HTTP API, \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u0435 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b (\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u044e \u0438\u0445 backend-\u0441\u0435\u0440\u0432\u0438\u0441\u044b). \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0432\u0441\u0435 backend-\u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f, \u0430 \u043f\u043e\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e store-\u0441\u0435\u0440\u0432\u0438\u0441\u044b.<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: \u00ab\u0443\u043c\u043d\u044b\u0435\u00bb \u0438 \u00ab\u0433\u043b\u0443\u043f\u044b\u0435\u00bb. \u0412 \u00ab\u0443\u043c\u043d\u044b\u0445\u00bb \u043f\u043e\u043b\u0443\u0447\u0430\u0439\u0442\u0435 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0445 \u0432 \u00ab\u0433\u043b\u0443\u043f\u044b\u0435\u00bb \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0412 \u00ab\u0433\u043b\u0443\u043f\u044b\u0445\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0438, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0412\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u00ab\u0433\u043b\u0443\u043f\u043e\u043c\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>@Input<\/code> \u0438 <code>@Output<\/code>. \u041f\u0440\u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0435 \u043a\u043e\u0434 \u00ab\u0433\u043b\u0443\u043f\u044b\u0445\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f, \u043f\u043e\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u0443\u043c\u043d\u044b\u0435\u00bb \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/li>\n<li>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0439\u0442\u0435\u0441\u044c \u043a \u043f\u043e\u043b\u044f\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0439\u0442\u0435 \u0441\u0442\u0440\u0438\u043c\u044b \u0432 \u043f\u043e\u043b\u044f\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0422\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044f\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d, \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/li>\n<\/ul>\n<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 NgRx.<\/li>\n<li>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0437\u044f\u043b\u0438 NgRx, \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u043b\u043e\u0445\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 NgRx. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0432 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 NgRx, \u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0441\u0442\u044b\u043b\u0438 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043e\u0431\u0449\u0435\u043c \u0441\u0442\u043e\u0440\u0435, \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0444\u043e\u0440\u043c \u0432\u0432\u043e\u0434\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0447\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0430, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0442\u044f\u043d\u0443\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 NgRx. \u041b\u0438\u0431\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u043e\u0440\u043c \u0432 \u0441\u0442\u043e\u0440\u0435.<\/li>\n<\/ol>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/custis\/blog\/516290\/\"> https:\/\/habr.com\/ru\/company\/custis\/blog\/516290\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/custis\/blog\/516290\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zv\/e7\/zz\/zve7zzpuofo4b-t4ltyvi311iks.png\"><\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043f\u0435\u0440\u0435\u0434 \u0432\u0430\u043c\u0438 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0415\u0441\u0442\u044c \u0422\u0417 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430, \u0442\u0438\u043a\u0435\u0442\u044b \u0432 \u0431\u0430\u0433-\u0442\u0440\u0435\u043a\u0435\u0440\u0435. \u041d\u043e \u0432\u044b\u0431\u043e\u0440 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u043b\u0435\u0436\u0438\u0442 \u043d\u0430 \u0432\u0430\u0441.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0440\u043e\u0439 \u0442\u0440\u0443\u0434\u043d\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u0447\u043d\u043e\u0439, \u0430 \u043a\u0430\u043a\u0430\u044f \u043d\u0435\u0442. \u041e\u0441\u043e\u0431\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u041a\u0430\u043a \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c? \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e-\u0441\u0432\u043e\u0435\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u043b\u0438\u0431\u043e \u043f\u0438\u0448\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0441\u0430\u043c, \u043b\u0438\u0431\u043e \u0431\u0435\u0440\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041b\u044e\u0431\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u2014 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043f\u043b\u044e\u0441\u0430\u043c\u0438 \u0438 \u043c\u0438\u043d\u0443\u0441\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0441\u0432\u043e\u0435\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0430\u0434\u0438\u0439 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-308956","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/308956","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=308956"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/308956\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=308956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=308956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=308956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}