{"id":109758,"date":"2025-05-20T09:11:16","date_gmt":"2025-05-20T04:41:16","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/"},"modified":"2025-05-20T09:11:16","modified_gmt":"2025-05-20T04:41:16","slug":"%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/","title":{"rendered":"\u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 NGRX \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u06cc"},"content":{"rendered":"<div data-article-id=\"2504363\" id=\"article-body\">\n<p>\u0628\u0647 \u0642\u0633\u0645\u062a \u0646\u0647\u0627\u06cc\u06cc \u0633\u0631\u06cc Deep Dive NGRX \u0645\u0627 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f! \u062f\u0631 \u0642\u0633\u0645\u062a \u0647\u0627\u06cc 1 \u0648 2 \u060c \u0645\u0627 \u0627\u0635\u0648\u0644 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0648 NGRX \u0648 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u0645\u06cc\u0627\u0646\u06cc \u0631\u0627 \u067e\u0648\u0634\u0627\u0646\u062f\u0647 \u0627\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u060c \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0645\u0642\u0627\u0628\u0644\u0647 \u0628\u0627 \u0686\u06cc\u0632\u0647\u0627\u06cc \u0622\u0628\u062f\u0627\u0631 \u0647\u0633\u062a\u06cc\u0645. \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0627\u06cc \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0634\u0645\u0627 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0631\u0634\u062f \u0645\u06cc \u06a9\u0646\u062f \u060c \u0633\u0644\u0627\u0645\u062a \u0634\u0645\u0627 \u0631\u0627 \u0646\u062c\u0627\u062a \u0645\u06cc \u062f\u0647\u062f.  <em>(\u23f1 \u0632\u0645\u0627\u0646 \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u0633\u062a: 9.5 \u062f\u0642\u06cc\u0642\u0647)<\/em><\/p>\n<p>\u0627\u06af\u0631 \u062f\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0632\u0631\u06af \u0628\u0627 \u0686\u0627\u0644\u0634 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a \u0631\u0648\u0628\u0631\u0648 \u0647\u0633\u062a\u06cc\u062f \u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u062f\u0631\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0627\u06cc \u062f\u0631\u0647\u0645 \u0648 \u0628\u0631\u0647\u0645 \u060c \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0627\u0636\u0627\u0641\u06cc \u0648 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u062f\u0644\u06cc\u0644 \u062e\u0648\u0628\u06cc \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f \u060c \u0627\u062d\u0633\u0627\u0633 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644\u0627\u062a \u0631\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc NGRX \u0622\u0632\u0645\u0627\u06cc\u0634 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0646\u0628\u0631\u062f \u06a9\u0647 \u062f\u0631 \u062f\u0647 \u0647\u0627 \u067e\u0631\u0648\u0698\u0647 \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645 \u060c \u062d\u0644 \u06a9\u0646\u06cc\u0645.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%A8%D8%A7_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86\" >\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D9%82%D8%AF%D8%B1%D8%AA_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%DB%8C%D8%A7%D8%AF_%D8%B4%D8%AF%D9%87\" >\u0642\u062f\u0631\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u06cc\u0627\u062f \u0634\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D8%AD%D9%88%D9%84%D8%A7%D8%AA_%D8%AF%D8%A7%D8%AF%D9%87_%D9%BE%DB%8C%DA%86%DB%8C%D8%AF%D9%87\" >\u062a\u0631\u06a9\u06cc\u0628 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u062a\u062d\u0648\u0644\u0627\u062a \u062f\u0627\u062f\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D9%88_%D8%A7%D9%85%D9%86%DB%8C%D8%AA_%D8%A8%D8%A7_NGRX\" >\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u0627\u0645\u0646\u06cc\u062a \u0628\u0627 NGRX<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\" >\u0637\u0631\u0627\u062d\u06cc \u0648\u0636\u0639\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\" >\u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%A7%D8%AB%D8%B1%D8%A7%D8%AA_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%AA%D9%88%DA%A9%D9%86\" >\u0627\u062b\u0631\u0627\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062a\u0648\u06a9\u0646<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D9%86%DA%AF%D9%87%D8%A8%D8%A7%D9%86%D8%A7%D9%86_%D9%85%D8%B3%DB%8C%D8%B1_%D8%A8%D8%A7_%D8%A7%DB%8C%D8%A7%D9%84%D8%AA_NGRX\" >\u0646\u06af\u0647\u0628\u0627\u0646\u0627\u0646 \u0645\u0633\u06cc\u0631 \u0628\u0627 \u0627\u06cc\u0627\u0644\u062a NGRX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D9%86%D9%87%D8%A7%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AC%D9%85%D8%B9_%D8%A2%D9%88%D8%B1%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\" >\u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u0647\u0627\u062f \u0628\u0631\u0627\u06cc \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%A2%D8%AF%D8%A7%D9%BE%D8%AA%D9%88%D8%B1%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%AC%D9%88%D8%AF%DB%8C%D8%AA\" >\u062a\u0646\u0638\u06cc\u0645 \u0622\u062f\u0627\u067e\u062a\u0648\u0631\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f\u06cc\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%DA%A9%D8%A7%D9%87%D8%B4_%D8%AF%D9%87%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%AC%D9%88%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\" >\u06a9\u0627\u0647\u0634 \u062f\u0647\u0646\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a \u0645\u0634\u062a\u0631\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%AC%D9%88%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A2%D9%85%D8%AF\" >\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%A7%D8%B4%DA%A9%D8%A7%D9%84_%D8%B2%D8%AF%D8%A7%DB%8C%DB%8C_%D9%88_%D8%B9%DB%8C%D8%A8_%DB%8C%D8%A7%D8%A8%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_NGRX\" >\u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0648 \u0639\u06cc\u0628 \u06cc\u0627\u0628\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc NGRX<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_redux_devtools\" >\u0627\u062f\u063a\u0627\u0645 redux devtools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D9%85%D8%AA%D8%A7_%DA%A9%D8%A7%D9%87%D8%B4_%D8%AF%D9%87%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D9%88_%D8%A7%D8%B4%DA%A9%D8%A7%D9%84_%D8%B2%D8%AF%D8%A7%DB%8C%DB%8C\" >\u0645\u062a\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u0646\u062f\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0648 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%DA%AF%D8%B3%D8%AA%D8%B1%D8%B4_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AF%D9%88%D9%84%D8%AA%DB%8C_%D8%A8%D8%A7_%D8%B1%D8%B4%D8%AF_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7\" >\u06af\u0633\u062a\u0631\u0634 \u0645\u0639\u0645\u0627\u0631\u06cc \u062f\u0648\u0644\u062a\u06cc \u0628\u0627 \u0631\u0634\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%A7%D9%84%DA%AF%D9%88%DB%8C_%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8_%D8%AD%D8%A7%D9%84%D8%AA\" >\u0627\u0644\u06af\u0648\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u062d\u0627\u0644\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D9%81%D8%AF%D8%B1%D8%A7%D8%B3%DB%8C%D9%88%D9%86_%D9%85%D8%A7%DA%98%D9%88%D9%84_%D9%BE%D9%88%DB%8C%D8%A7_%D8%A8%D8%A7_NGRX\" >\u0641\u062f\u0631\u0627\u0633\u06cc\u0648\u0646 \u0645\u0627\u0698\u0648\u0644 \u067e\u0648\u06cc\u0627 \u0628\u0627 NGRX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D8%B9%D8%A7%D8%AF%DB%8C_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%AD%D8%A7%D9%84%D8%AA_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B1%D9%88%D8%A7%D8%A8%D8%B7_%D8%AF%D8%A7%D8%AF%D9%87_%D9%BE%DB%8C%DA%86%DB%8C%D8%AF%D9%87\" >\u0639\u0627\u062f\u06cc \u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u0631\u0648\u0627\u0628\u0637 \u062f\u0627\u062f\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d9%84%da%af%d9%88%d9%87%d8%a7%db%8c-%d9%be%db%8c%d8%b4%d8%b1%d9%81%d8%aa%d9%87-ngrx-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-%d8%b2%d8%a7%d9%88%db%8c\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C_%D8%AC%D9%85%D8%B9_%DA%A9%D8%B1%D8%AF%D9%86_%D9%87%D9%85%D9%87_%D8%A7%DB%8C%D9%86%D9%87%D8%A7\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc: \u062c\u0645\u0639 \u06a9\u0631\u062f\u0646 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%A8%D8%A7_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%D9%86%D8%AF%DA%AF%D8%A7%D9%86\"><\/span>\n<p>  \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D9%82%D8%AF%D8%B1%D8%AA_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%DB%8C%D8%A7%D8%AF_%D8%B4%D8%AF%D9%87\"><\/span>\n<p>  \u0642\u062f\u0631\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u06cc\u0627\u062f \u0634\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0634\u0645\u0627 \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u062f\u0648\u0646 \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0644\u0637\u0641 \u06cc\u0627\u062f\u0622\u0648\u0631\u06cc NGRX \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u062d\u062a\u06cc \u0628\u0627 \u0631\u0634\u062f \u062f\u0648\u0644\u062a \u0633\u0631\u06cc\u0639 \u0645\u06cc \u0645\u0627\u0646\u062f. \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0627\u0648\u0644\u06cc\u0646 \u062e\u0637 \u062f\u0641\u0627\u0639 \u062e\u0648\u062f \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u0645\u0634\u06a9\u0644\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ Feature state interface<\/span>\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">DashboardState<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">metrics<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Metric<\/span><span class=\"p\">[];<\/span>\n  <span class=\"nl\">loading<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">error<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Basic selectors<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectDashboardState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createFeatureSelector<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">DashboardState<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dashboard<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectAllMetrics<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createSelector<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">selectDashboardState<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">metrics<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Derived selectors with memoization benefits<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectActiveMetrics<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createSelector<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">selectAllMetrics<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">metrics<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">metrics<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">metric<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">metric<\/span><span class=\"p\">.<\/span><span class=\"nx\">active<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Complex calculations that won't recompute unnecessarily<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectMetricsSummary<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createSelector<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">selectActiveMetrics<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">activeMetrics<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ This saves you from running expensive logic every time Angular blinks,<\/span>\n    <span class=\"c1\">\/\/ Especially important when rendering dashboards or charts<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">total<\/span><span class=\"p\">:<\/span> <span class=\"nx\">activeMetrics<\/span><span class=\"p\">.<\/span><span class=\"nf\">reduce<\/span><span class=\"p\">((<\/span><span class=\"nx\">sum<\/span><span class=\"p\">,<\/span> <span class=\"nx\">metric<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">sum<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">metric<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">),<\/span>\n      <span class=\"na\">average<\/span><span class=\"p\">:<\/span> <span class=\"nx\">activeMetrics<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"p\">?<\/span> \n        <span class=\"nx\">activeMetrics<\/span><span class=\"p\">.<\/span><span class=\"nf\">reduce<\/span><span class=\"p\">((<\/span><span class=\"nx\">sum<\/span><span class=\"p\">,<\/span> <span class=\"nx\">metric<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">sum<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">metric<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"o\">\/<\/span> <span class=\"nx\">activeMetrics<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">count<\/span><span class=\"p\">:<\/span> <span class=\"nx\">activeMetrics<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0627\u0645\u0631 \u0645\u0627\u0646\u0639 \u0627\u0632 \u0645\u062c\u062f\u062f\u0627\u064b \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f \u0648 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 Angular \u0631\u0627 \u0644\u0627\u063a\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0647 \u0633\u0631\u0639\u062a \u062f\u0631 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u062f\u0627\u062f\u0647 \u0633\u0646\u06af\u06cc\u0646 \u0647\u0633\u062a\u0646\u062f \u060c \u062a\u0641\u0627\u0648\u062a \u0631\u0627 \u0645\u062a\u0648\u062c\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D8%AD%D9%88%D9%84%D8%A7%D8%AA_%D8%AF%D8%A7%D8%AF%D9%87_%D9%BE%DB%8C%DA%86%DB%8C%D8%AF%D9%87\"><\/span>\n<p>  \u062a\u0631\u06a9\u06cc\u0628 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u062a\u062d\u0648\u0644\u0627\u062a \u062f\u0627\u062f\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u06cc\u0627\u0628\u062f \u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0648 \u0645\u062a\u0645\u0631\u06a9\u0632 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0647\u0645 \u0622\u0647\u0646\u06af\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ Combining data from multiple slices of state<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectUserPermissions<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createSelector<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">authSelectors<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectCurrentUser<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">roleSelectors<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectAllRoles<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">roles<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">userRole<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">roles<\/span><span class=\"p\">.<\/span><span class=\"nf\">find<\/span><span class=\"p\">(<\/span><span class=\"nx\">role<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">role<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">user<\/span><span class=\"p\">?.<\/span><span class=\"nx\">roleId<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">userRole<\/span><span class=\"p\">?.<\/span><span class=\"nx\">permissions<\/span> <span class=\"o\">||<\/span> <span class=\"p\">[];<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Building on existing selectors for dashboard-specific permissions<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectUserDashboardPermissions<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createSelector<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">selectUserPermissions<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">permissions<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">permissions<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">p<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">p<\/span><span class=\"p\">.<\/span><span class=\"nx\">resource<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">dashboard<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u0648\u0642\u062a\u06cc \u062a\u06cc\u0645 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0648\u06cc \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0645. \u0647\u0631 \u062a\u06cc\u0645 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u062f\u0648\u0646 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u0645\u0646\u0637\u0642 \u06cc\u0627 \u0642\u062f\u0645 \u0632\u062f\u0646 \u0631\u0648\u06cc \u0627\u0646\u06af\u0634\u062a\u0627\u0646 \u062f\u0633\u062a \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u060c \u0628\u0631 \u0631\u0648\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u0648\u062c\u0648\u062f \u0628\u0633\u0627\u0632\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D9%88_%D8%A7%D9%85%D9%86%DB%8C%D8%AA_%D8%A8%D8%A7_NGRX\"><\/span>\n<p>  \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u0627\u0645\u0646\u06cc\u062a \u0628\u0627 NGRX<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648\u0627\u0642\u0639\u06cc \u0628\u0627\u0634\u06cc\u0645 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u06a9\u06cc \u0627\u0632 \u0622\u0646 \u0645\u0648\u0627\u0631\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0646\u0638\u0631 \u0645\u0641\u0647\u0648\u0645 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a \u0627\u0645\u0627 \u0633\u0631\u06cc\u0639 \u06a9\u062b\u06cc\u0641 \u0645\u06cc \u0634\u0648\u062f. NGRX \u06cc\u06a9 \u0631\u0648\u0634 \u062a\u0645\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0647\u0645\u0647 \u0642\u0637\u0639\u0627\u062a \u0645\u062a\u062d\u0631\u06a9 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\"><\/span>\n<p>  \u0637\u0631\u0627\u062d\u06cc \u0648\u0636\u0639\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u062d\u0627\u0644\u062a AUTH \u0639\u0645\u0644\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u067e\u0627\u06cc\u0647 \u0647\u0627 \u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">AuthState<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">User<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">token<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">loading<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">error<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">lastAuthAttempt<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Date<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">initialAuthState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AuthState<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">user<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">token<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">loading<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">lastAuthAttempt<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\"><\/span>\n<p>  \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0646 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0645 \u0628\u0627 \u0627\u0642\u062f\u0627\u0645\u0627\u062a AUTH \u062e\u0648\u062f \u062e\u0627\u0635 \u0628\u0627\u0634\u0645 \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0622\u0633\u0627\u0646\u062a\u0631 \u062f\u0631 \u062c\u0627\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">login<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createAction<\/span><span class=\"p\">(<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">[Auth] Login<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">props<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span> <span class=\"na\">username<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span> <span class=\"nl\">password<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">loginSuccess<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createAction<\/span><span class=\"p\">(<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">[Auth] Login Success<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">props<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span> <span class=\"na\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">User<\/span><span class=\"p\">;<\/span> <span class=\"nl\">token<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">loginFailure<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createAction<\/span><span class=\"p\">(<\/span>\n  <span class=\"dl\">'<\/span><span class=\"s1\">[Auth] Login Failure<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">props<\/span><span class=\"o\">&lt;<\/span><span class=\"p\">{<\/span> <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">()<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">checkAuthStatus<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createAction<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">[Auth] Check Status<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">logout<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createAction<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">[Auth] Logout<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AB%D8%B1%D8%A7%D8%AA_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%AA%D9%88%DA%A9%D9%86\"><\/span>\n<p>  \u0627\u062b\u0631\u0627\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062a\u0648\u06a9\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646\u062c\u0627 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062c\u0627\u062f\u0648\u06cc \u0648\u0627\u0642\u0639\u06cc \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc \u0627\u0641\u062a\u062f. \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0686\u0631\u062e\u0647 \u0639\u0645\u0631 \u062a\u0648\u06a9\u0646 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"p\">@<\/span><span class=\"nd\">Injectable<\/span><span class=\"p\">()<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">AuthEffects<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">login$<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> \n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">actions$<\/span><span class=\"p\">.<\/span><span class=\"nf\">pipe<\/span><span class=\"p\">(<\/span>\n      <span class=\"nf\">ofType<\/span><span class=\"p\">(<\/span><span class=\"nx\">AuthActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">login<\/span><span class=\"p\">),<\/span>\n      <span class=\"nf\">exhaustMap<\/span><span class=\"p\">(<\/span><span class=\"nx\">action<\/span> <span class=\"o\">=&gt;<\/span> \n        <span class=\"c1\">\/\/ Note: exhaustMap is used here to avoid parallel login attempts<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">authService<\/span><span class=\"p\">.<\/span><span class=\"nf\">login<\/span><span class=\"p\">(<\/span><span class=\"nx\">action<\/span><span class=\"p\">.<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span> <span class=\"nx\">action<\/span><span class=\"p\">.<\/span><span class=\"nx\">password<\/span><span class=\"p\">).<\/span><span class=\"nf\">pipe<\/span><span class=\"p\">(<\/span>\n          <span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ Store token in secure storage<\/span>\n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenService<\/span><span class=\"p\">.<\/span><span class=\"nf\">storeToken<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">token<\/span><span class=\"p\">);<\/span>\n            <span class=\"k\">return<\/span> <span class=\"nx\">AuthActions<\/span><span class=\"p\">.<\/span><span class=\"nf\">loginSuccess<\/span><span class=\"p\">({<\/span>\n              <span class=\"na\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span>\n              <span class=\"na\">token<\/span><span class=\"p\">:<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">token<\/span>\n            <span class=\"p\">});<\/span>\n          <span class=\"p\">}),<\/span>\n          <span class=\"nf\">catchError<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">of<\/span><span class=\"p\">(<\/span><span class=\"nx\">AuthActions<\/span><span class=\"p\">.<\/span><span class=\"nf\">loginFailure<\/span><span class=\"p\">({<\/span> \n            <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Authentication failed<\/span><span class=\"dl\">'<\/span> \n          <span class=\"p\">})))<\/span>\n        <span class=\"p\">)<\/span>\n      <span class=\"p\">)<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"nx\">logout$<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> \n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">actions$<\/span><span class=\"p\">.<\/span><span class=\"nf\">pipe<\/span><span class=\"p\">(<\/span>\n      <span class=\"nf\">ofType<\/span><span class=\"p\">(<\/span><span class=\"nx\">AuthActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">logout<\/span><span class=\"p\">),<\/span>\n      <span class=\"nf\">tap<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ Clear token on logout<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenService<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeToken<\/span><span class=\"p\">();<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">navigate<\/span><span class=\"p\">([<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/login<\/span><span class=\"dl\">'<\/span><span class=\"p\">]);<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">),<\/span>\n    <span class=\"p\">{<\/span> <span class=\"na\">dispatch<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">}<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Effect to check auth status on app initialization<\/span>\n  <span class=\"nx\">checkAuth$<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> \n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">actions$<\/span><span class=\"p\">.<\/span><span class=\"nf\">pipe<\/span><span class=\"p\">(<\/span>\n      <span class=\"nf\">ofType<\/span><span class=\"p\">(<\/span><span class=\"nx\">AuthActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">checkAuthStatus<\/span><span class=\"p\">),<\/span>\n      <span class=\"nf\">switchMap<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">token<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tokenService<\/span><span class=\"p\">.<\/span><span class=\"nf\">getToken<\/span><span class=\"p\">();<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">token<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">return<\/span> <span class=\"k\">of<\/span><span class=\"p\">(<\/span><span class=\"nx\">AuthActions<\/span><span class=\"p\">.<\/span><span class=\"nf\">logout<\/span><span class=\"p\">());<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">authService<\/span><span class=\"p\">.<\/span><span class=\"nf\">validateToken<\/span><span class=\"p\">(<\/span><span class=\"nx\">token<\/span><span class=\"p\">).<\/span><span class=\"nf\">pipe<\/span><span class=\"p\">(<\/span>\n          <span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">AuthActions<\/span><span class=\"p\">.<\/span><span class=\"nf\">loginSuccess<\/span><span class=\"p\">({<\/span> <span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">token<\/span> <span class=\"p\">})),<\/span>\n          <span class=\"nf\">catchError<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">of<\/span><span class=\"p\">(<\/span><span class=\"nx\">AuthActions<\/span><span class=\"p\">.<\/span><span class=\"nf\">logout<\/span><span class=\"p\">()))<\/span>\n        <span class=\"p\">);<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">actions$<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Actions<\/span><span class=\"p\">,<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">authService<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AuthService<\/span><span class=\"p\">,<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">tokenService<\/span><span class=\"p\">:<\/span> <span class=\"nx\">TokenService<\/span><span class=\"p\">,<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Router<\/span>\n  <span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u062f\u06cc\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0646\u0634\u0627\u0646\u0647 \u0647\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u062a\u0646\u0627\u0642\u0636 \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0627\u062f\u0627\u0631\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u062a\u0645\u0631\u06a9\u0632 \u0628\u0647 \u0634\u0645\u0627 \u06cc\u06a9 \u0645\u0646\u0628\u0639 \u062d\u0642\u06cc\u0642\u062a \u0628\u0631\u0627\u06cc \u062f\u0648\u0644\u062a Auth \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%DA%AF%D9%87%D8%A8%D8%A7%D9%86%D8%A7%D9%86_%D9%85%D8%B3%DB%8C%D8%B1_%D8%A8%D8%A7_%D8%A7%DB%8C%D8%A7%D9%84%D8%AA_NGRX\"><\/span>\n<p>  \u0646\u06af\u0647\u0628\u0627\u0646\u0627\u0646 \u0645\u0633\u06cc\u0631 \u0628\u0627 \u0627\u06cc\u0627\u0644\u062a NGRX<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0646\u06af\u0647\u0628\u0627\u0646\u0627\u0646 \u062c\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u06a9\u0634\u0648\u0631 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0634\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0645\u0631\u0632 \u0627\u0645\u0646\u06cc\u062a\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0627\u062a\u0635\u0627\u0644 \u0622\u0646\u0647\u0627 \u0628\u0647 NGRX \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"p\">@<\/span><span class=\"nd\">Injectable<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">providedIn<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">root<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">AuthGuard<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">CanActivate<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">store<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Store<\/span><span class=\"p\">,<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Router<\/span>\n  <span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">canActivate<\/span><span class=\"p\">():<\/span> <span class=\"nx\">Observable<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">boolean<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">store<\/span><span class=\"p\">.<\/span><span class=\"nf\">select<\/span><span class=\"p\">(<\/span><span class=\"nx\">selectIsAuthenticated<\/span><span class=\"p\">).<\/span><span class=\"nf\">pipe<\/span><span class=\"p\">(<\/span>\n      <span class=\"nf\">tap<\/span><span class=\"p\">(<\/span><span class=\"nx\">isAuthenticated<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isAuthenticated<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">navigate<\/span><span class=\"p\">([<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/login<\/span><span class=\"dl\">'<\/span><span class=\"p\">]);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}),<\/span>\n      <span class=\"nf\">take<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Injectable<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">providedIn<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">root<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">RoleGuard<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">CanActivate<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">store<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Store<\/span><span class=\"p\">,<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Router<\/span>\n  <span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"nf\">canActivate<\/span><span class=\"p\">(<\/span><span class=\"nx\">route<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ActivatedRouteSnapshot<\/span><span class=\"p\">):<\/span> <span class=\"nx\">Observable<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">boolean<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">requiredRole<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">route<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">role<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">store<\/span><span class=\"p\">.<\/span><span class=\"nf\">select<\/span><span class=\"p\">(<\/span><span class=\"nx\">selectUserRole<\/span><span class=\"p\">).<\/span><span class=\"nf\">pipe<\/span><span class=\"p\">(<\/span>\n      <span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">userRole<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">userRole<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">requiredRole<\/span><span class=\"p\">),<\/span>\n      <span class=\"nf\">tap<\/span><span class=\"p\">(<\/span><span class=\"nx\">hasAccess<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">hasAccess<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">navigate<\/span><span class=\"p\">([<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/unauthorized<\/span><span class=\"dl\">'<\/span><span class=\"p\">]);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}),<\/span>\n      <span class=\"nf\">take<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0646\u06af\u0647\u0628\u0627\u0646\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 Observables Mock Store \u0642\u0627\u0628\u0644 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0647\u0633\u062a\u0646\u062f \u060c \u06a9\u0647 \u0628\u0647 \u06af\u0631\u0641\u062a\u0646 \u0631\u06af\u0631\u0633\u06cc\u0648\u0646 Auth \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u0646 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u0645 \u0628\u0647 \u0634\u0645\u0627 \u0628\u06af\u0648\u06cc\u0645 \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0622\u0632\u0645\u0627\u06cc\u0634\u0627\u062a \u0645\u062d\u06a9\u0645 \u062f\u0631 \u0627\u0637\u0631\u0627\u0641 \u0627\u06cc\u0646 \u0646\u06af\u0647\u0628\u0627\u0646\u0627\u0646 \u060c \u0686\u0646\u062f \u0633\u0648\u0631\u0627\u062e \u0627\u0645\u0646\u06cc\u062a\u06cc \u0627\u0632 \u0622\u0646 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0627\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D9%86%D9%87%D8%A7%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AC%D9%85%D8%B9_%D8%A2%D9%88%D8%B1%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u0647\u0627\u062f \u0628\u0631\u0627\u06cc \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0647\u0633\u062a\u06cc\u062f \u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0628\u0627 \u0645\u062c\u0645\u0648\u0639\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u060c \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u060c \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u060c \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0633\u0631 \u0648 \u06a9\u0627\u0631 \u062f\u0627\u0631\u06cc\u062f \u060c \u0622\u0646 \u0631\u0627 \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 <code>@ngrx\/entity<\/code> \u0628\u0633\u062a\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u062f\u0648\u0633\u062a \u0634\u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%A2%D8%AF%D8%A7%D9%BE%D8%AA%D9%88%D8%B1%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%AC%D9%88%D8%AF%DB%8C%D8%AA\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 \u0622\u062f\u0627\u067e\u062a\u0648\u0631\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f\u06cc\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">User<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">email<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">roleId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">active<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">UserState<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">EntityState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">User<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">selectedUserId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">loading<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">error<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">adapter<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createEntityAdapter<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">User<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selectId<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">sortComparer<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">a<\/span><span class=\"p\">,<\/span> <span class=\"nx\">b<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">a<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">.<\/span><span class=\"nf\">localeCompare<\/span><span class=\"p\">(<\/span><span class=\"nx\">b<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Optional sort by name<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">initialState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">UserState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">adapter<\/span><span class=\"p\">.<\/span><span class=\"nf\">getInitialState<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selectedUserId<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">loading<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0628\u0647 O (1) \u062c\u0633\u062a\u062c\u0648\u06cc \u0645\u06cc \u062f\u0647\u062f \u0648 \u0644\u06cc\u0633\u062a UI \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0627\u0631\u0632\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0648\u0642\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0647\u0632\u0627\u0631\u0627\u0646 \u0631\u06a9\u0648\u0631\u062f \u0631\u0627 \u0628\u062f\u0648\u0646 \u062a\u0627\u062e\u06cc\u0631 \u0645\u06cc \u06af\u0630\u0631\u0627\u0646\u0646\u062f \u060c \u0627\u0632 \u0634\u0645\u0627 \u062a\u0634\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%A7%D9%87%D8%B4_%D8%AF%D9%87%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%AC%D9%88%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9\"><\/span>\n<p>  \u06a9\u0627\u0647\u0634 \u062f\u0647\u0646\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a \u0645\u0634\u062a\u0631\u06a9<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0622\u062f\u0627\u067e\u062a\u0648\u0631 \u0631\u0648\u0634\u0647\u0627\u06cc \u06cc\u0627\u0648\u0631 \u0631\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0627\u0644\u0627\u0628\u0631 \u0633\u0646\u06af\u06cc\u0646 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">userReducer<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createReducer<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">initialState<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"c1\">\/\/ Load operations<\/span>\n  <span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"nx\">UserActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">loadUsers<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">loading<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">error<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span>\n  <span class=\"p\">})),<\/span>\n  <span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"nx\">UserActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">loadUsersSuccess<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">users<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> \n    <span class=\"nx\">adapter<\/span><span class=\"p\">.<\/span><span class=\"nf\">setAll<\/span><span class=\"p\">(<\/span><span class=\"nx\">users<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"na\">loading<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">})<\/span>\n  <span class=\"p\">),<\/span>\n\n  <span class=\"c1\">\/\/ Add\/update\/remove operations<\/span>\n  <span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"nx\">UserActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">addUser<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">user<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> \n    <span class=\"nx\">adapter<\/span><span class=\"p\">.<\/span><span class=\"nf\">addOne<\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"p\">,<\/span> <span class=\"nx\">state<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">),<\/span>\n  <span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"nx\">UserActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">updateUser<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">update<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> \n    <span class=\"nx\">adapter<\/span><span class=\"p\">.<\/span><span class=\"nf\">updateOne<\/span><span class=\"p\">(<\/span><span class=\"nx\">update<\/span><span class=\"p\">,<\/span> <span class=\"nx\">state<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">),<\/span>\n  <span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"nx\">UserActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">deleteUser<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> \n    <span class=\"nx\">adapter<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeOne<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">state<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">),<\/span>\n\n  <span class=\"c1\">\/\/ Selection state<\/span>\n  <span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"nx\">UserActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectUser<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n    <span class=\"p\">...<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">selectedUserId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">id<\/span>\n  <span class=\"p\">}))<\/span>\n<span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%AC%D9%88%D8%AF_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A2%D9%85%D8%AF\"><\/span>\n<p>  \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0622\u062f\u0627\u067e\u062a\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0647\u0645\u0647 \u062c\u0645\u0639 \u0645\u06cc \u0634\u0648\u062f \u060c \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0627\u0632 \u062c\u0639\u0628\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">selectIds<\/span><span class=\"p\">,<\/span> <span class=\"nx\">selectEntities<\/span><span class=\"p\">,<\/span> <span class=\"nx\">selectAll<\/span><span class=\"p\">,<\/span> <span class=\"nx\">selectTotal<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> \n  <span class=\"nx\">adapter<\/span><span class=\"p\">.<\/span><span class=\"nf\">getSelectors<\/span><span class=\"p\">(<\/span><span class=\"nx\">createFeatureSelector<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">UserState<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">users<\/span><span class=\"dl\">'<\/span><span class=\"p\">));<\/span>\n\n<span class=\"c1\">\/\/ Extended selectors<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectSelectedUserId<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createSelector<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">createFeatureSelector<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">UserState<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">users<\/span><span class=\"dl\">'<\/span><span class=\"p\">),<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">selectedUserId<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectSelectedUser<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createSelector<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">selectEntities<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">selectSelectedUserId<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">entities<\/span><span class=\"p\">,<\/span> <span class=\"nx\">selectedId<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">selectedId<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">entities<\/span><span class=\"p\">[<\/span><span class=\"nx\">selectedId<\/span><span class=\"p\">]<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">null<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">selectActiveUsers<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createSelector<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">selectAll<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">(<\/span><span class=\"nx\">users<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">users<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">active<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u0631\u0648\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u0633\u0639\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u0642\u0628\u0644 \u0627\u0632 \u06a9\u0634\u0641 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u06cc \u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u0647\u0627\u062f \u062e\u0648\u062f\u0645\u0627\u0646 \u0631\u0627 \u0628\u0686\u0631\u062e\u0627\u0646\u06cc\u0645. \u0628\u0647 \u0645\u0646 \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u0646 \u060c \u0627\u0631\u0632\u0634 \u0646\u0648\u0622\u0648\u0631\u06cc \u0627\u06cc\u0646 \u0686\u0631\u062e \u0631\u0627 \u0646\u062f\u0627\u0631\u062f!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B4%DA%A9%D8%A7%D9%84_%D8%B2%D8%AF%D8%A7%DB%8C%DB%8C_%D9%88_%D8%B9%DB%8C%D8%A8_%DB%8C%D8%A7%D8%A8%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_NGRX\"><\/span>\n<p>  \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0648 \u0639\u06cc\u0628 \u06cc\u0627\u0628\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc NGRX<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc \u0634\u0648\u062f (\u0648 \u0622\u0646\u0647\u0627 \u062e\u0648\u0627\u0647\u0646\u062f \u06a9\u0631\u062f) \u060c \u0634\u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u06cc\u062f \u062f\u0631 \u0648\u0636\u0639\u06cc\u062a \u062e\u0648\u062f \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_redux_devtools\"><\/span>\n<p>  \u0627\u062f\u063a\u0627\u0645 redux devtools<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0633\u0648\u0646\u062f redux devtools \u06cc\u06a9 \u0686\u06cc\u0632 \u0645\u0637\u0644\u0642 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">StoreModule<\/span><span class=\"p\">.<\/span><span class=\"nf\">forRoot<\/span><span class=\"p\">(<\/span><span class=\"nx\">reducers<\/span><span class=\"p\">),<\/span>\n    <span class=\"nx\">StoreDevtoolsModule<\/span><span class=\"p\">.<\/span><span class=\"nf\">instrument<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">maxAge<\/span><span class=\"p\">:<\/span> <span class=\"mi\">25<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Retains last 25 states<\/span>\n      <span class=\"na\">logOnly<\/span><span class=\"p\">:<\/span> <span class=\"nx\">environment<\/span><span class=\"p\">.<\/span><span class=\"nx\">production<\/span><span class=\"p\">,<\/span> \n      <span class=\"na\">autoPause<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Pauses recording actions when the browser tab is not active<\/span>\n      <span class=\"na\">trace<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">environment<\/span><span class=\"p\">.<\/span><span class=\"nx\">production<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Include stack trace for dispatched actions<\/span>\n      <span class=\"na\">traceLimit<\/span><span class=\"p\">:<\/span> <span class=\"mi\">75<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Maximum stack trace frames to be stored<\/span>\n      <span class=\"na\">connectOutsideZone<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"c1\">\/\/ Connect outside Angular's zone for better performance<\/span>\n    <span class=\"p\">})<\/span>\n  <span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">AppModule<\/span> <span class=\"p\">{}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0633\u0627\u0639\u062a\u0647\u0627\u06cc \u0628\u06cc \u0634\u0645\u0627\u0631\u06cc \u0627\u0632 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0646\u062c\u0627\u062a \u062f\u0647\u062f. \u0642\u0627\u062f\u0631 \u0628\u0647 \u0633\u0641\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0648\u0644\u062a\u06cc \u0645\u0627\u0646\u0646\u062f \u062f\u0627\u0634\u062a\u0646 \u06cc\u06a9 \u0627\u0628\u0631\u0642\u062f\u0631\u062a \u0647\u0646\u06af\u0627\u0645 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0627\u0634\u06a9\u0627\u0644\u0627\u062a \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AA%D8%A7_%DA%A9%D8%A7%D9%87%D8%B4_%D8%AF%D9%87%D9%86%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D9%88_%D8%A7%D8%B4%DA%A9%D8%A7%D9%84_%D8%B2%D8%AF%D8%A7%DB%8C%DB%8C\"><\/span>\n<p>  \u0645\u062a\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u0646\u062f\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0648 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0642\u0639\u06cc \u06a9\u0647 \u0628\u0647 \u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u060c \u0645\u062a\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u0646\u062f\u0647 \u0647\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0633\u0644\u0627\u062d \u0645\u062e\u0641\u06cc \u0634\u0645\u0627 \u0628\u0627\u0634\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">debug<\/span><span class=\"p\">(<\/span><span class=\"nx\">reducer<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ActionReducer<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">any<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">):<\/span> <span class=\"nx\">ActionReducer<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">any<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"nx\">action<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">nextState<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">reducer<\/span><span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"nx\">action<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">group<\/span><span class=\"p\">(<\/span><span class=\"nx\">action<\/span><span class=\"p\">.<\/span><span class=\"kd\">type<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`%c prev state`<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">color: #9E9E9E; font-weight: bold<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">state<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`%c action`<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">color: #03A9F4; font-weight: bold<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">action<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">`%c next state`<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">color: #4CAF50; font-weight: bold<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">nextState<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">groupEnd<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nx\">nextState<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">metaReducers<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MetaReducer<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">State<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">[]<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"nx\">environment<\/span><span class=\"p\">.<\/span><span class=\"nx\">production<\/span> <span class=\"p\">?<\/span> <span class=\"p\">[<\/span><span class=\"nx\">debug<\/span><span class=\"p\">]<\/span> <span class=\"p\">:<\/span> <span class=\"p\">[];<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">StoreModule<\/span><span class=\"p\">.<\/span><span class=\"nf\">forRoot<\/span><span class=\"p\">(<\/span><span class=\"nx\">reducers<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">metaReducers<\/span> <span class=\"p\">})<\/span>\n  <span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">AppModule<\/span> <span class=\"p\">{}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u0628\u0627 \u062f\u06cc\u062f\u0646 \u062f\u0642\u06cc\u0642\u0627\u064b \u0622\u0646\u0686\u0647 \u0628\u06cc\u0646 \u062f\u0648\u0644\u062a\u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a \u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0627\u0634\u06a9\u0627\u0644\u0627\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u062d\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0645. \u0641\u0642\u0637 \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0627 \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%AF%D8%B3%D8%AA%D8%B1%D8%B4_%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D8%AF%D9%88%D9%84%D8%AA%DB%8C_%D8%A8%D8%A7_%D8%B1%D8%B4%D8%AF_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u06af\u0633\u062a\u0631\u0634 \u0645\u0639\u0645\u0627\u0631\u06cc \u062f\u0648\u0644\u062a\u06cc \u0628\u0627 \u0631\u0634\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%84%DA%AF%D9%88%DB%8C_%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8_%D8%AD%D8%A7%D9%84%D8%AA\"><\/span>\n<p>  \u0627\u0644\u06af\u0648\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u062d\u0627\u0644\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u0631\u0634\u062f \u062a\u06cc\u0645 \u0634\u0645\u0627 \u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0648\u0636\u0639\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u062a\u06a9\u0647 \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u06a9\u0646\u062a\u0631\u0644 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ Root state interface<\/span>\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">AppState<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RouterReducerState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">any<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">auth<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AuthState<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Extended with lazy-loaded feature states<\/span>\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">State<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">AppState<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">users<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">UserState<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">dashboard<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">DashboardState<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">reports<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">ReportState<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%81%D8%AF%D8%B1%D8%A7%D8%B3%DB%8C%D9%88%D9%86_%D9%85%D8%A7%DA%98%D9%88%D9%84_%D9%BE%D9%88%DB%8C%D8%A7_%D8%A8%D8%A7_NGRX\"><\/span>\n<p>  \u0641\u062f\u0631\u0627\u0633\u06cc\u0648\u0646 \u0645\u0627\u0698\u0648\u0644 \u067e\u0648\u06cc\u0627 \u0628\u0627 NGRX<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u060c \u0627\u0632 \u0631\u0648\u0634 \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc NGRX \u062f\u0631 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u062a\u0646\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">CommonModule<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">StoreModule<\/span><span class=\"p\">.<\/span><span class=\"nf\">forFeature<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">users<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userReducer<\/span><span class=\"p\">),<\/span>\n    <span class=\"nx\">EffectsModule<\/span><span class=\"p\">.<\/span><span class=\"nf\">forFeature<\/span><span class=\"p\">([<\/span><span class=\"nx\">UserEffects<\/span><span class=\"p\">]),<\/span>\n    <span class=\"c1\">\/\/ ...other module imports<\/span>\n  <span class=\"p\">],<\/span>\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">UserListComponent<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">UserDetailComponent<\/span><span class=\"p\">,<\/span>\n    <span class=\"c1\">\/\/ ...other components<\/span>\n  <span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">UserModule<\/span> <span class=\"p\">{}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0631\u0627 \u062f\u0631 \u062a\u06cc\u0645 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0645. \u0647\u0631 \u062a\u06cc\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0647\u0646\u0648\u0632 \u0628\u0627 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u062c\u0647\u0627\u0646\u06cc \u062e\u0648\u0628 \u0628\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f \u060c \u062f\u0627\u0631\u0627\u06cc \u0628\u062e\u0634 \u062f\u0648\u0644\u062a\u06cc \u062e\u0648\u062f \u0628\u0627\u0634\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B9%D8%A7%D8%AF%DB%8C_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%AD%D8%A7%D9%84%D8%AA_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B1%D9%88%D8%A7%D8%A8%D8%B7_%D8%AF%D8%A7%D8%AF%D9%87_%D9%BE%DB%8C%DA%86%DB%8C%D8%AF%D9%87\"><\/span>\n<p>  \u0639\u0627\u062f\u06cc \u0633\u0627\u0632\u06cc \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u0631\u0648\u0627\u0628\u0637 \u062f\u0627\u062f\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06af\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0631\u0648\u0627\u0628\u0637 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u06cc \u062f\u0627\u0631\u0646\u062f \u060c \u0639\u0627\u062f\u06cc \u0633\u0627\u0632\u06cc \u0628\u0627\u0639\u062b \u0633\u0631\u062f\u0631\u062f \u0634\u0645\u0627 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ Instead of nested data:<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">badlyNestedState<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">departments<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"p\">{<\/span>\n      <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">dept1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Engineering<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">employees<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Alice<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">projects<\/span><span class=\"p\">:<\/span> <span class=\"p\">[...]<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Bob<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">projects<\/span><span class=\"p\">:<\/span> <span class=\"p\">[...]<\/span> <span class=\"p\">}<\/span>\n      <span class=\"p\">]<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">]<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"c1\">\/\/ Use normalized state with references:<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">normalizedState<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">departments<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">ids<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">dept1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">dept2<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">entities<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">dept1<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">dept1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Engineering<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">employeeIds<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">emp1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp2<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span> <span class=\"p\">},<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">dept2<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">dept2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Marketing<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">employeeIds<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">emp3<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp4<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span> <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">employees<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">ids<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">emp1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp3<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp4<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">entities<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">emp1<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Alice<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">projectIds<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">proj1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">proj2<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span> <span class=\"p\">},<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">emp2<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">emp2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Bob<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">projectIds<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">proj1<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span> <span class=\"p\">},<\/span>\n      <span class=\"c1\">\/\/ ...other employees<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">projects<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">ids<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">proj1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">proj2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">proj3<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\n    <span class=\"na\">entities<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">proj1<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">proj1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Dashboard Redesign<\/span><span class=\"dl\">'<\/span> <span class=\"p\">},<\/span>\n      <span class=\"c1\">\/\/ ...other projects<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0646 \u062f\u06cc\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u062a\u06cc\u0645 \u0647\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0648\u0636\u0639\u06cc\u062a \u062a\u0648 \u062f\u0631 \u062a\u0648 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062f\u0631\u062f \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f. \u0639\u0627\u062f\u06cc \u0633\u0627\u0632\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0645\u0627\u0646\u0646\u062f \u06a9\u0627\u0631 \u0627\u0636\u0627\u0641\u06cc \u0627\u062d\u0633\u0627\u0633 \u0634\u0648\u062f \u060c \u0627\u0645\u0627 \u0628\u0627 \u062a\u06a9\u0627\u0645\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u060c \u0633\u0648\u062f \u0633\u0647\u0627\u0645 \u06af\u0633\u062a\u0631\u062f\u0647 \u0627\u06cc \u0631\u0627 \u067e\u0631\u062f\u0627\u062e\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C_%D8%AC%D9%85%D8%B9_%DA%A9%D8%B1%D8%AF%D9%86_%D9%87%D9%85%D9%87_%D8%A7%DB%8C%D9%86%D9%87%D8%A7\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc: \u062c\u0645\u0639 \u06a9\u0631\u062f\u0646 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0637\u0648\u0644 \u0627\u06cc\u0646 \u0633\u0631\u06cc \u0633\u0647 \u0642\u0633\u0645\u062a\u06cc \u060c \u0645\u0627 \u0627\u0632 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 NGRX \u0628\u0647 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0631\u0641\u062a\u0647 \u0627\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u0646 \u0627\u0632 \u0627\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0627 \u0635\u062f\u0647\u0627 \u0645\u0624\u0644\u0641\u0647 \u0648 \u062f\u0647 \u0647\u0627 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0627\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0628\u0648\u062f\u0647 \u0627\u0646\u062f.<\/p>\n<p>\u0642\u062f\u0631\u062a \u0648\u0627\u0642\u0639\u06cc \u0632\u0645\u0627\u0646\u06cc \u062d\u0627\u0635\u0644 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0631\u0627 \u0628\u0627 \u0647\u0645 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u062f: \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u06cc\u0627\u062f \u0634\u062f\u0647 \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u0639\u0627\u062f\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u062c\u0632\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u0647 \u062a\u063a\u0630\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u0647\u0645\u0647 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u0645\u0646\u06cc\u062a \u0631\u0627 \u0628\u0627 \u062d\u0627\u0644\u062a AUTH \u0648 \u0646\u06af\u0647\u0628\u0627\u0646\u0627\u0646 NGRX \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u0686\u06cc\u0632 \u0632\u06cc\u0628\u0627 \u0627\u0633\u062a \u0648\u0642\u062a\u06cc \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0628\u0627 \u0647\u0645 \u062c\u0645\u0639 \u0645\u06cc \u0634\u0648\u062f!<\/p>\n<p>\u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u060c \u0627\u06cc\u0646 \u063a\u0630\u0627\u06cc \u0627\u0635\u0644\u06cc \u0631\u0627 \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f:<\/p>\n<ol>\n<li>\n<strong>\u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/strong> \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0645\u062c\u062f\u062f\u0627\u064b \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc<\/li>\n<li>\n<strong>\u0645\u0646\u0637\u0642 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627 \u0645\u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u062f<\/strong> \u062f\u0631 \u0627\u062b\u0631\u0627\u062a NGRX \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u0645\u0646\u06cc\u062a \u0645\u062f\u0627\u0648\u0645<\/li>\n<li>\n<strong>\u0627\u0647\u0631\u0645 @ngrx\/\u0646\u0647\u0627\u062f<\/strong> \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0645 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062c\u0645\u0648\u0639\u0647 \u0634\u0645\u0627<\/li>\n<li>\n<strong>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<\/strong> \u0628\u0631\u0627\u06cc \u06af\u0631\u0641\u062a\u0646 \u0632\u0648\u062f\u0647\u0646\u06af\u0627\u0645 \u0645\u0633\u0627\u0626\u0644<\/li>\n<li>\n<strong>\u062d\u0627\u0644\u062a \u062e\u0648\u062f \u0631\u0627 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/strong> \u0628\u0627 \u0631\u0634\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0628\u0647 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc<\/li>\n<\/ol>\n<p>\u062f\u0631 \u0633\u0641\u0631 NGRX \u0686\u0647 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u061f \u0686\u0647 \u0636\u062f \u0627\u0644\u06af\u0648\u06cc \u062f\u06cc\u062f\u0647 \u0627\u06cc\u062f\u061f<br \/>\u0645\u0646 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0645 \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0634\u0645\u0627 \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0628\u0634\u0646\u0648\u0645. \u0648 \u0627\u06af\u0631 \u0627\u06cc\u0646 \u0633\u0631\u06cc\u0627\u0644 \u0631\u0627 \u0628\u0627 \u0627\u0631\u0632\u0634 \u062f\u06cc\u062f\u06cc\u062f \u060c \u0622\u0646 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u062f\u06cc\u06af\u0631 \u0628\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f!<\/p>\n<p>\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0647 \u0642\u0633\u0645\u062a \u0646\u0647\u0627\u06cc\u06cc \u0633\u0631\u06cc Deep Dive NGRX \u0645\u0627 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f! \u062f\u0631 \u0642\u0633\u0645\u062a \u0647\u0627\u06cc 1 \u0648 2 \u060c \u0645\u0627 \u0627\u0635\u0648\u0644 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0648 NGRX \u0648 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u0645\u06cc\u0627\u0646\u06cc \u0631\u0627 \u067e\u0648\u0634\u0627\u0646\u062f\u0647 \u0627\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u060c \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0645\u0642\u0627\u0628\u0644\u0647 \u0628\u0627 \u0686\u06cc\u0632\u0647\u0627\u06cc \u0622\u0628\u062f\u0627\u0631 \u0647\u0633\u062a\u06cc\u0645. \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0627\u06cc \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u0634\u0645\u0627 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0631\u0634\u062f \u0645\u06cc \u06a9\u0646\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":109759,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpp00vf8n3692np1ptlpc.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-109758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/109758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=109758"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/109758\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/109759"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=109758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=109758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=109758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}