{"id":369083,"date":"2024-05-21T03:56:01","date_gmt":"2024-05-21T03:56:01","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=369083"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T03:56:01","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=369083","title":{"rendered":"<span>Redux vs Mobx \u043a\u043e\u0433\u043e \u0436\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u043b\u044f React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 2024 \u0433\u043e\u0434\u0443?<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/919\/2f1\/8fe\/9192f18fedb55259fb4bcec83e3ee31e.jpg\" width=\"1024\" height=\"1024\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/919\/2f1\/8fe\/9192f18fedb55259fb4bcec83e3ee31e.jpg\" data-blurred=\"true\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u00a0\u0432\u0430\u043c\u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u00a0\u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u00a0React \u0432 2024\u00a0\u0433\u043e\u0434\u0443. \u041a\u0430\u043a\u00a0\u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, React\u00a0\u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437\u00a0\u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438 \u043c\u043e\u0449\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e\u00a0\u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u00a0React, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0414\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u043c\u0438. \u0421\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u00a0\u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>\u0412\u00a0\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u0434\u0432\u0430 \u0438\u0437\u00a0\u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438 \u0437\u0440\u0435\u043b\u044b\u0445 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0434\u043b\u044f\u00a0React: Redux \u0438 Mobx, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f <em>mobx-state-tree<\/em> \u0438 <em>Redux Toolkit<\/em>. \u042f \u0441\u0440\u0430\u0432\u043d\u044e \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043a\u0430\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u00a0\u043a\u043e\u0434\u0435. \u0422\u0430\u043a\u0436\u0435 \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430\u00a0\u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437\u00a0\u043d\u0438\u0445 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u00a0React \u0432 2024\u00a0\u0433\u043e\u0434\u0443.<\/p>\n<h3>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h3>\n<ul>\n<li>\n<p><a href=\"#redux\" rel=\"noopener noreferrer nofollow\">Redux<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#reduxplus\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e\u00a0\u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432\u00a0Redux?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#reduxminus\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e\u00a0\u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432\u00a0Redux?<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#mobx\" rel=\"noopener noreferrer nofollow\">MobX<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#mobxplus\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e\u00a0\u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432\u00a0MobX?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#mobxminus\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e\u00a0\u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432\u00a0MobX?<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#reduxmobx\" rel=\"noopener noreferrer nofollow\">Redux Toolkit \u0438 MobX (mobx\u2011state\u2011tree<\/a>)<\/p>\n<ul>\n<li>\n<p><a href=\"#hard\" rel=\"noopener noreferrer nofollow\">\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/a> <\/p>\n<\/li>\n<li>\n<p><a href=\"#speed\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/a> <\/p>\n<\/li>\n<li>\n<p><a href=\"#test\" rel=\"noopener noreferrer nofollow\">\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#ecosystem\" rel=\"noopener noreferrer nofollow\">\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#code\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#reduxcode\" rel=\"noopener noreferrer nofollow\">Redux Toolkit<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#mobxcode\" rel=\"noopener noreferrer nofollow\">mobx\u2011state\u2011tree<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#conclusion\" rel=\"noopener noreferrer nofollow\">\u0412\u044b\u0432\u043e\u0434<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#whichredux\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 Redux<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#whichmobx\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 Mobx<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#ps\" rel=\"noopener noreferrer nofollow\">\u0410\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#articles\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0430\u0442\u044c\u0438 <\/a><\/p>\n<\/li>\n<\/ul>\n<h2>Redux<\/h2>\n<p><a class=\"anchor\" name=\"redux\" id=\"redux\"><\/a><\/p>\n<p><strong><em>Redux<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u00a0\u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u00a0\u043e\u0434\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 (unidirectional data flow). \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442,&#8230;.<\/p>\n<p>\u0410\u00a0\u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438:<\/p>\n<p><strong><em>Redux<\/em><\/strong> \u00a0\u2014 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430\u00a0React. \u0412\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0432\u00a0\u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <em>store<\/em>.<\/p>\n<p><strong><em>Store<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043a\u0430\u043a\u00a0\u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u043d\u0430\u0435\u0442 \u0432\u0441\u044e \u043f\u0440\u0430\u0432\u0434\u0443 \u043e\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0432\u00a0store, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c <em>action<\/em>.<\/p>\n<p><strong><em>Action<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043a\u0430\u043a\u00a0\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e\u00a0\u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u00a0\u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0432\u00a0\u0441\u043f\u0438\u0441\u043e\u043a, \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0432\u00a0\u0444\u043e\u0440\u043c\u0435, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0438\u0437\u00a0\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0438\u00a0\u0442.\u00a0\u0434. Action \u043d\u0435\u00a0\u043c\u0435\u043d\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0430\u043c, \u0430\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0438\u0445 \u0432 <em>reducer<\/em>.<\/p>\n<p><strong><em>Reducer<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043a\u0430\u043a\u00a0\u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u043a\u0430\u043a\u00a0\u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c <em>store<\/em> \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 <em>action<\/em>. Reducer \u043d\u0435\u00a0\u043f\u043e\u0440\u0442\u0438\u0442 \u0441\u0442\u0430\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430\u00a0\u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u043d\u0430\u00a0\u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435. \u0412\u0441\u0435 reducers \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432\u00a0\u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 reducer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 store.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u043c\u043e\u0433\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u00a0store, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 react\u2011redux. \u041e\u043d\u0430 \u0434\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Provider, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u00a0store \u0432\u0441\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e connect, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u00a0store \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0438\u0445 \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u00a0\u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043e\u043d\u0430 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 actions. \u041a\u043e\u0433\u0434\u0430 store \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0432\u0441\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u00a0\u043d\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/123\/60b\/b41\/12360bb4184ef66bc776f2092d84e76f.gif\" alt=\"\u041e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 Redux\u0413\u0438\u0444\u043a\u0430 \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438\" title=\"\u041e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 Redux\u0413\u0438\u0444\u043a\u0430 \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438\" width=\"1440\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/123\/60b\/b41\/12360bb4184ef66bc776f2092d84e76f.gif\"\/><\/p>\n<div><figcaption>\u041e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 Redux<br \/>\u0413\u0438\u0444\u043a\u0430 \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Redux \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 React:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Redux<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ actions.js \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0438\u043f\u044b actions export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO';  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c action creators export function addTodo(text) {   return {     type: ADD_TODO,     text   }; }  export function toggleTodo(index) {   return {     type: TOGGLE_TODO,     index   }; }  \/\/ reducers.js \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 store const initialState = {   todos: [] };  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c reducer \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 actions function todoApp(state = initialState, action) {   switch (action.type) {     case ADD_TODO:       \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 todos       return {         ...state,         todos: [           ...state.todos,           {             text: action.text,             completed: false           }         ]       };     case TOGGLE_TODO:       \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u043b\u0430\u0433\u043e\u043c completed \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 todos \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443       return {         ...state,         todos: state.todos.map((todo, index) => {           if (index === action.index) {             return {               ...todo,               completed: !todo.completed             };           }           return todo;         })       };     default:       \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 action \u043d\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043d       return state;   } }  \/\/ index.js \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c React, Redux \u0438 react-redux import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import { Provider, connect } from 'react-redux';  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 reducer \u0438 action creators import todoApp from '.\/reducers'; import { addTodo, toggleTodo } from '.\/actions';  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c store \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e reducer const store = createStore(todoApp);  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 const Todo = ({ text, completed, onClick }) => (   &lt;li     style={{       textDecoration: completed ? 'line-through' : 'none'     }}     onClick={onClick}   >     {text}   &lt;\/li> );  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 const TodoList = ({ todos, onTodoClick }) => (   &lt;ul>     {todos.map((todo, index) => (       &lt;Todo         key={index}         {...todo}         onClick={() => onTodoClick(index)}       \/>     ))}   &lt;\/ul> );  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 const AddTodo = ({ onAddClick }) => {   let input;    return (     &lt;div>       &lt;input ref={node => (input = node)} \/>       &lt;button         onClick={() => {           onAddClick(input.value);           input.value = '';         }}       >         Add Todo       &lt;\/button>     &lt;\/div>   ); };  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f const App = ({ todos, addTodo, toggleTodo }) => (   &lt;div>     &lt;AddTodo onAddClick={addTodo} \/>     &lt;TodoList todos={todos} onTodoClick={toggleTodo} \/>   &lt;\/div> );  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 store \u043d\u0443\u0436\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 App \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 const mapStateToProps = state => ({   todos: state.todos });  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 action creators \u043d\u0443\u0436\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 App \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 const mapDispatchToProps = dispatch => ({   addTodo: text => dispatch(addTodo(text)),   toggleTodo: index => dispatch(toggleTodo(index)) });  \/\/ \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App \u043a store \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 connect const ConnectedApp = connect(   mapStateToProps,   mapDispatchToProps )(App);  \/\/ \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Provider, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 store \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ConnectedApp \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e ReactDOM.render(   &lt;Provider store={store}>     &lt;ConnectedApp \/>   &lt;\/Provider>,   document.getElementById('root') );<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h4>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432 Redux?<\/h4>\n<p><a class=\"anchor\" name=\"reduxplus\" id=\"reduxplus\"><\/a><\/p>\n<ul>\n<li>\n<p>Redux \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 <strong>\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c<\/strong> \u0438 <strong>\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c<\/strong> \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 actions \u0438 reducers, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438, \u043d\u0435\u00a0\u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u043c\u0438 \u043e\u0442\u00a0\u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432. \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0443, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<p><em>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440<\/em>: Redux DevTools\u00a0\u2014 \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f\u00a0\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0440\u0438\u044e actions \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043c\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u043e\u00a0\u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 actions, \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<\/li>\n<li>\n<p>Redux \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <strong>\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/strong> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0439 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0427\u0442\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432 Redux?<\/h4>\n<p><a class=\"anchor\" name=\"reduxminus\" id=\"reduxminus\"><\/a><\/p>\n<ul>\n<li>\n<p>Redux \u0438\u043c\u0435\u0435\u0442 <strong>\u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f<\/strong> \u0438 <strong>\u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f<\/strong>, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u043d\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439, \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u0432, \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u00a0\u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u044b \u0438 \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p><em>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440<\/em>: \u0414\u043b\u044f\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u00a0Redux \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <code>actions, action creators, reducers, store, Provider, connect, mapStateToProps, mapDispatchToProps<\/code> \u0438\u00a0\u0442.\u00a0\u0434.<\/p>\n<\/li>\n<li>\n<p>Redux \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a <strong>\u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043a\u043e\u0434\u0430<\/strong> \u0438 <a href=\"#%D0%B1%D0%BE%D0%B9%D0%BB%D0%B5%D1%80%D0%BF%D0%BB%D0%B5%D0%B9%D1%82\" rel=\"noopener noreferrer nofollow\"><strong>\u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430<\/strong><\/a>, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442, \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0442\u0441\u044f \u0438 \u043d\u0435\u00a0\u043d\u0435\u0441\u0443\u0442 \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p><em>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440<\/em>: \u0434\u043b\u044f\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e action \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u0442\u0438\u043f, action creator, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u00a0reducer, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c action creator \u0432\u00a0mapDispatchToProps \u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>Redux \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a <strong>\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong> \u0438 <strong>\u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430\u043c<\/strong>, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 store \u043f\u0440\u0438\u00a0\u043a\u0430\u0436\u0434\u043e\u043c action, \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430\u00a0\u043d\u0435\u0433\u043e, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435\u00a0\u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c. \u0414\u043b\u044f\u00a0\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0<code>reselect, memo, useMemo, useCallback<\/code> \u0438\u00a0\u0442.\u00a0\u0434.<\/p>\n<\/li>\n<\/ul>\n<h2>Mobx<\/h2>\n<p><a class=\"anchor\" name=\"mobx\" id=\"mobx\"><\/a><\/p>\n<p><strong><em>Mobx<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u00a0\u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (reactive programming).<\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e\u00a0\u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0Mobx \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u00a0\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 observables, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442 \u0438 \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u044e\u0442 \u043e\u0431\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0441\u0432\u043e\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u0414\u043b\u044f\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u00a0observables \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438\u00a0\u0442.\u00a0\u0434.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u0441\u0432\u044f\u0437\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React \u0441\u00a0observables \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 mobx\u2011react, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@observer<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u00a0\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 reactions, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u00a0observables, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u00a0\u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 mobx\u2011react \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Provider, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c observables \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>inject<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c observables \u0438\u0437\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u00a0\u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/db3\/6de\/2e5\/db36de2e549f2644227cbc365eda8da6.png\" alt=\"by Nethmee Kumararatne\" title=\"by Nethmee Kumararatne\" width=\"1400\" height=\"498\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/db3\/6de\/2e5\/db36de2e549f2644227cbc365eda8da6.png\"\/><\/p>\n<div><figcaption>by <a href=\"https:\/\/medium.com\/@kumararatnenethmee?source=post_page-----88c83527ae8b--------------------------------\" rel=\"noopener noreferrer nofollow\">Nethmee Kumararatne<\/a><\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Mobx \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 React:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f MobX<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ store.js \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c Mobx import { observable, action } from 'mobx';  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 class TodoStore {   \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430   @observable todos = [];    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a   @action   addTodo = text => {     this.todos.push({       text,       completed: false     });   };    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0444\u043b\u0430\u0433\u0430 completed \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443   @action   toggleTodo = index => {     this.todos[index].completed = !this.todos[index].completed;   }; }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e const store = new TodoStore(); export default store;  \/\/ index.js \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c React \u0438 mobx-react import React from 'react'; import ReactDOM from 'react-dom'; import { Provider, observer, inject } from 'mobx-react';  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 store import store from '.\/store';  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 const Todo = ({ text, completed, onClick }) => (   &lt;li     style={{       textDecoration: completed ? 'line-through' : 'none'     }}     onClick={onClick}   >     {text}   &lt;\/li> );  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 const TodoList = observer(({ todos, onTodoClick }) => (   &lt;ul>     {todos.map((todo, index) => (       &lt;Todo         key={index}         {...todo}         onClick={() => onTodoClick(index)}       \/>     ))}   &lt;\/ul> ));  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 const AddTodo = ({ onAddClick }) => {   let input;    return (     &lt;div>       &lt;input ref={node => (input = node)} \/>       &lt;button         onClick={() => {           onAddClick(input.value);           input.value = '';         }}       >         Add Todo       &lt;\/button>     &lt;\/div>   ); };  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f const App = ({ store }) => (   &lt;div>     &lt;AddTodo onAddClick={store.addTodo} \/>     &lt;TodoList todos={store.todos} onTodoClick={store.toggleTodo} \/>   &lt;\/div> );  \/\/ \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e inject, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 store \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u0430 const ConnectedApp = inject('store')(App);  \/\/ \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Provider, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 store \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ConnectedApp \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e ReactDOM.render(   &lt;Provider store={store}>     &lt;ConnectedApp \/>   &lt;\/Provider>,   document.getElementById('root') );<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h4>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432 Mobx?<\/h4>\n<p><a class=\"anchor\" name=\"mobxplus\" id=\"mobxplus\"><\/a><\/p>\n<ul>\n<li>\n<p>Mobx \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 <strong>\u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0443<\/strong> \u0438 <strong>\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e<\/strong> \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043d\u0435\u00a0\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 actions \u0438 reducers, \u0430\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 observables.<br \/><strong><em>\u042d\u0442\u043e<\/em><\/strong> \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 \u0438 <a href=\"#%D0%B1%D0%BE%D0%B9%D0%BB%D0%B5%D1%80%D0%BF%D0%BB%D0%B5%D0%B9%D1%82\" rel=\"noopener noreferrer nofollow\">\u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430<\/a>, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>Mobx \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <strong>\u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/strong> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043d\u0435\u00a0\u043d\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u0433\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b, \u0430\u00a0\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u0443 \u0432\u00a0\u0432\u044b\u0431\u043e\u0440\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<br \/><strong><em>\u042d\u0442\u043e<\/em><\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Mobx \u0432\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 \u0438 \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u00a0\u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>Mobx \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <strong>\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e<\/strong> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043e\u043a, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u0438\u0445 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 observables, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c.<br \/><em>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442. \u0415\u0441\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0435\u0433\u043e \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440<\/em><br \/><strong><em>\u042d\u0442\u043e<\/em><\/strong> \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u00a0\u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u00a0\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0427\u0442\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432 Mobx?<\/h4>\n<p><a class=\"anchor\" name=\"mobxminus\" id=\"mobxminus\"><\/a><\/p>\n<ul>\n<li>\n<p>Mobx \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a <strong>\u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0441\u0442\u0438<\/strong> \u0438 <strong>\u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438<\/strong> \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0440\u0430\u0431\u043e\u0442\u044b observables, reactions \u0438 actions, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u00a0\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u044f\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0434\u0430\u043d\u043d\u044b\u0445.<br \/><strong><em>\u042d\u0442\u043e<\/em><\/strong> \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0443, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u00a0\u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0438 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>Mobx \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a <strong>\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/strong> \u0438 <strong>\u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438<\/strong> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 JavaScript, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0\u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b, \u043f\u0440\u043e\u043a\u0441\u0438, \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0438\u00a0\u0442.\u00a0\u0434., \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u00a0\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u0441\u0440\u0435\u0434\u0430\u043c\u0438.<br \/><strong><em>\u042d\u0442\u043e<\/em><\/strong> \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a\u00a0Babel, Webpack, TypeScript \u0438\u00a0\u0442.\u00a0\u0434., \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c \u0438 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>Redux Toolkit \u0438 mobx-state-tree<\/h2>\n<p><a class=\"anchor\" name=\"reduxmobx\" id=\"reduxmobx\"><\/a><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f3c\/536\/cdd\/f3c536cdde1a91b444ff37b998a3fb2e.jpg\" alt=\"\" title=\"\" width=\"1905\" height=\"1054\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f3c\/536\/cdd\/f3c536cdde1a91b444ff37b998a3fb2e.jpg\" data-blurred=\"true\"\/><\/figure>\n<p><a href=\"https:\/\/mobx-state-tree.js.org\/intro\/welcome\" rel=\"noopener noreferrer nofollow\"><strong><em>mobx\u2011state\u2011tree<\/em><\/strong><\/a>\u00a0\u2014 \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Mobx, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0434\u0435\u0440\u0435\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (state tree) \u0441\u00a0\u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0435\u0439, <a href=\"#%D0%B8%D0%BC%D0%BC%D1%83%D1%82%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9\" rel=\"noopener noreferrer nofollow\">\u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e <\/a>\u0438 <a href=\"#%D1%81%D0%BD%D0%B0%D0%BF%D1%88%D0%BE%D1%82\" rel=\"noopener noreferrer nofollow\">\u0441\u043d\u0430\u043f\u0448\u043e\u0442\u0430\u043c\u0438<\/a>. <\/p>\n<p><a href=\"https:\/\/redux-toolkit.js.org\/\" rel=\"noopener noreferrer nofollow\"><strong><em>Redux Toolkit<\/em><\/strong><\/a>\u00a0\u2014 \u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0Redux, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Redux \u0432\u00a0React\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. <\/p>\n<p>Mobx\u2011state\u2011tree \u0438 Redux Toolkit\u00a0\u2014 \u044d\u0442\u043e \u0434\u0432\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432\u00a0React\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438. \u0412\u043a\u0440\u0430\u0442\u0446\u0435, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043f\u043e\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c:<\/p>\n<p><strong><em><sub>\u0412\u0410\u0416\u041d\u041e<\/sub><\/em><\/strong><em><sub>: \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f\u0445 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 mobx-state-tree \u043f\u043e\u0434\u0440\u0443\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 MobX, \u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u044d\u0442\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0447\u0438\u0441\u0442\u043e\u0433\u043e MobX \u0441 Redux Toolkit<\/sub><\/em><\/p>\n<h4>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h4>\n<p><a class=\"anchor\" name=\"hard\" id=\"hard\"><\/a><\/p>\n<p><em>\u041a\u0430\u043a\u00a0\u043b\u0435\u0433\u043a\u043e \u0438\u00a0\u0431\u044b\u0441\u0442\u0440\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443? \u041a\u0430\u043a\u00a0\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c? \u041a\u0430\u043a\u00a0\u043f\u043e\u043d\u044f\u0442\u0435\u043d \u0438 \u0443\u0434\u043e\u0431\u0435\u043d \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430?<\/em><\/p>\n<ul>\n<li>\n<p><strong>Mobx\u2011state\u2011tree<\/strong> <em>\u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e<\/em> \u0432\u00a0\u044d\u0442\u043e\u043c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435:<\/p>\n<ul>\n<li>\n<p>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438\u043b\u0438\u00a0\u0444\u0443\u043d\u043a\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u0435\u0440\u0442\u043e\u043a, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a\u00a0<code>observer<\/code> \u0438\u043b\u0438\u00a0<code>inject<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u0435\u0440\u0435\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0438\u043f\u043e\u0432 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u00a0<a href=\"#%D0%B8%D0%BC%D0%BC%D1%83%D1%82%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9\" rel=\"noopener noreferrer nofollow\">\u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c\u0438 <\/a><a href=\"#%D1%81%D0%BD%D0%B0%D0%BF%D1%88%D0%BE%D1%82\" rel=\"noopener noreferrer nofollow\">\u0441\u043d\u0430\u043f\u0448\u043e\u0442\u0430\u043c\u0438 <\/a>\u0438 <a href=\"#%D0%BF%D0%B0%D1%82%D1%87\" rel=\"noopener noreferrer nofollow\">\u043f\u0430\u0442\u0447\u0430\u043c\u0438<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>Mobx\u2011state\u2011tree \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0438 <a href=\"#%D0%B1%D0%BE%D0%B9%D0%BB%D0%B5%D1%80%D0%BF%D0%BB%D0%B5%D0%B9%D1%82\" rel=\"noopener noreferrer nofollow\">\u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430<\/a>, \u0447\u0435\u043c Redux Toolkit, \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c <em>\u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0438 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439 \u043a\u043e\u0434<\/em>.<\/p>\n<\/li>\n<li>\n<p><strong>Redux Toolkit<\/strong>, \u0441\u00a0\u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u0438 \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b:<\/p>\n<ul>\n<li>\n<p>\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c \u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u043c Redux, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a\u00a0\u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0438\u0441\u0442\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, <a href=\"#%D0%B8%D0%BC%D0%BC%D1%83%D1%82%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9\" rel=\"noopener noreferrer nofollow\">\u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c <\/a>\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0445\u0443\u043a\u0438 Redux Toolkit \u0434\u043b\u044f\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u043e\u0432, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a\u00a0\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>Redux Toolkit \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0438 <a href=\"#%D0%B1%D0%BE%D0%B9%D0%BB%D0%B5%D1%80%D0%BF%D0%BB%D0%B5%D0%B9%D1%82\" rel=\"noopener noreferrer nofollow\">\u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430<\/a>, \u0447\u0435\u043c Mobx (mobx\u2011state\u2011tree), \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c <em>\u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u043a\u043e\u0434<\/em>.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/h4>\n<p><a class=\"anchor\" name=\"speed\" id=\"speed\"><\/a><\/p>\n<p><em>\u041a\u0430\u043a\u00a0\u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430? \u041a\u0430\u043a\u00a0\u043e\u043d\u0430 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430\u00a0\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f? \u041a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/em>?<\/p>\n<p>Mobx (mobx\u2011state\u2011tree) \u0438 Redux Toolkit \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a\u00a0\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438.<\/p>\n<ul>\n<li>\n<p><strong>Mobx\u2011state\u2011tree<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c\u00a0\u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u043e\u0432, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u00a0DOM.<br \/><em>\u041e\u0434\u043d\u0430\u043a\u043e<\/em>, Mobx (mobx\u2011state\u2011tree) \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u043d\u0430\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439 (observers) \u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0439 (reactions), \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u00a0\u0443\u0442\u0435\u0447\u043a\u0430\u043c\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438.<br \/>Mobx (mobx\u2011state\u2011tree) \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u00a0\u0431\u044b\u0442\u044c <em>\u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/em> \u0434\u043b\u044f\u00a0\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 <a href=\"#%D0%BA%D0%BE%D0%B4-%D1%81%D0%BF%D0%BB%D0%B8%D1%82%D1%82%D0%B8%D0%BD%D0%B3\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0434\u2011\u0441\u043f\u043b\u0438\u0442\u0442\u0438\u043d\u0433\u0430<\/a>.<\/p>\n<\/li>\n<li>\n<p><strong>Redux Toolkit<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430\u00a0\u0447\u0438\u0441\u0442\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u0438 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0434\u043b\u044f\u00a0\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, <a href=\"#%D0%BA%D0%BE%D0%B4-%D1%81%D0%BF%D0%BB%D0%B8%D1%82%D1%82%D0%B8%D0%BD%D0%B3\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0434\u2011\u0441\u043f\u043b\u0438\u0442\u0442\u0438\u043d\u0433<\/a>, <a href=\"#%D0%BF%D0%B5%D1%80%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c<\/a>, \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u00a0\u0442.\u00a0\u0434.<br \/><em>\u041e\u0434\u043d\u0430\u043a\u043e<\/em>, Redux Toolkit \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b \u043d\u0430\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u043e\u0432, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u00a0\u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0438 <a href=\"#%D0%B4%D0%B5%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u0434\u0435\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 <\/a>\u0434\u0430\u043d\u043d\u044b\u0445. Redux Toolkit \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u00a0\u0431\u044b\u0442\u044c <em>\u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/em> \u0434\u043b\u044f\u00a0\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432\u00a0DOM.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0430<\/h4>\n<p><a class=\"anchor\" name=\"test\" id=\"test\"><\/a><\/p>\n<p><em>\u041a\u0430\u043a\u00a0\u043b\u0435\u0433\u043a\u043e \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435? \u041a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f\u00a0\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438?<\/em><\/p>\n<ul>\n<li>\n<p><strong>Mobx\u2011state\u2011tree<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043d\u0435\u00a0\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043c\u043e\u043a\u0430\u0442\u044c \u0438\u043b\u0438\u00a0\u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u044b, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c <a href=\"#%D1%81%D0%BD%D0%B0%D0%BF%D1%88%D0%BE%D1%82\" rel=\"noopener noreferrer nofollow\">\u0441\u043d\u0430\u043f\u0448\u043e\u0442\u044b <\/a>\u0434\u0435\u0440\u0435\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<br \/><em>\u041e\u0434\u043d\u0430\u043a\u043e<\/em>, Mobx\u2011state\u2011tree \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u00a0\u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0439, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u00a0\u0438\u043c\u0435\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e\u00a0\u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441\u00a0\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043a\u0430\u043a\u00a0Redux Toolkit.<\/p>\n<\/li>\n<li>\n<p><strong>Redux Toolkit<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0435 \u0438 \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430\u00a0\u0447\u0438\u0441\u0442\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u0438 <a href=\"#%D0%B8%D0%BC%D0%BC%D1%83%D1%82%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9\" rel=\"noopener noreferrer nofollow\">\u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0445 <\/a>\u0434\u0430\u043d\u043d\u044b\u0445, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0445\u0443\u043a\u0438 \u0434\u043b\u044f\u00a0\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u043e\u0432.<br \/><em>\u041e\u0434\u043d\u0430\u043a\u043e<\/em>, Redux Toolkit \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u00a0\u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0438 <a href=\"#%D0%B1%D0%BE%D0%B9%D0%BB%D0%B5%D1%80%D0%BF%D0%BB%D0%B5%D0%B9%D1%82\" rel=\"noopener noreferrer nofollow\">\u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 <\/a>\u0434\u043b\u044f\u00a0\u0442\u0435\u0441\u0442\u043e\u0432, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u00a0\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u0438 \u0441\u0430\u0439\u0434\u2011\u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438. Redux Toolkit \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0432\u00a0\u043e\u0442\u043b\u0430\u0434\u043a\u0435, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a\u00a0Redux DevTools.<\/p>\n<\/li>\n<\/ul>\n<h4>\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h4>\n<p><a class=\"anchor\" name=\"ecosystem\" id=\"ecosystem\"><\/a><\/p>\n<p><em>\u041a\u0430\u043a\u00a0\u043c\u043d\u043e\u0433\u043e \u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043b\u044f\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438? \u041a\u0430\u043a\u00a0\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430?<\/em><\/p>\n<ul>\n<li>\n<p><strong>Mobx\u2011state\u2011tree<\/strong> \u0438 <strong>Redux Toolkit<\/strong> \u0438\u043c\u0435\u044e\u0442 \u0441\u0438\u043b\u044c\u043d\u0443\u044e \u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0440\u0430\u0441\u0442\u0435\u0442 \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442\u0441\u044f. \u041e\u0431\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u043c\u0435\u044e\u0442:<\/p>\n<ul>\n<li>\n<p>\u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0438 \u0434\u0440\u0443\u0436\u0435\u043b\u044e\u0431\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u043f\u043e\u043c\u043e\u0447\u044c \u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c \u0438 \u043b\u0443\u0447\u0448\u0438\u043c\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442 \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0442 \u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<\/ul>\n<p><em>\u041e\u0434\u043d\u0430\u043a\u043e<\/em>, \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e\u00a0Redux Toolkit \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0432\u00a0\u044d\u0442\u043e\u043c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0Redux, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437\u00a0\u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0434\u043b\u044f\u00a0React. Redux Toolkit \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438 \u0443\u0441\u0438\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b Redux, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0448\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u0438\u0435 \u0435\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. Redux Toolkit \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0438 \u0431\u043e\u043b\u0435\u0435 \u0437\u0440\u0435\u043b\u0443\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, \u0447\u0435\u043c Mobx\u2011state\u2011tree, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u043e\u043b\u044c\u0448\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u0435.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:<\/h3>\n<p><a class=\"anchor\" name=\"code\" id=\"code\"><\/a><\/p>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Redux Toolkit \u0438 mobx\u2011state\u2011tree \u0432\u00a0React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438: <\/p>\n<h4>Redux Toolkit<\/h4>\n<p><a class=\"anchor\" name=\"reduxcode\" id=\"reduxcode\"><\/a><\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437 Redux Toolkit import { configureStore, createSlice, createAsyncThunk } from '@reduxjs\/toolkit' import { useSelector, useDispatch } from 'react-redux'  \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0438\u0437 API const fetchAuthors = createAsyncThunk(   'authors\/fetchAuthors',   async () => {     const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/users')     return response.json()   } )  \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u043b\u0430\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0430\u0432\u0442\u043e\u0440\u043e\u0432 const authorsSlice = createSlice({   name: 'authors',   initialState: {     list: [],     status: 'idle',     error: null   },   reducers: {     \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u044b \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439     addAuthor(state, action) {       state.list.push(action.payload)     },     deleteAuthor(state, action) {       state.list = state.list.filter(author => author.id !== action.payload)     }   },   extraReducers: {     \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u044b \u0434\u043b\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439     [fetchAuthors.pending]: (state, action) => {       state.status = 'loading'     },     [fetchAuthors.fulfilled]: (state, action) => {       state.status = 'succeeded'       state.list = action.payload     },     [fetchAuthors.rejected]: (state, action) => {       state.status = 'failed'       state.error = action.error.message     }   } })  \/\/ \u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440 export const { addAuthor, deleteAuthor } = authorsSlice.actions export default authorsSlice.reducer  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u043e\u043c \u0430\u0432\u0442\u043e\u0440\u043e\u0432 const store = configureStore({   reducer: authorsSlice.reducer })  \/\/ \u0413\u043e\u0442\u043e\u0432\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0432 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u0430\u0448\u0430 \u0446\u0435\u043b\u044c. import React, { useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { fetchAuthors, addAuthor, deleteAuthor } from '.\/authorsSlice'  const AuthorsList = () => {   \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const authors = useSelector(state => state.authors)    \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e dispatch \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430   const dispatch = useDispatch()    \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430   useEffect(() => {     dispatch(fetchAuthors())   }, [dispatch])    \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0430   const handleAddAuthor = () => {     const newAuthor = {       id: Math.random(),       name: 'New author',       username: 'new_author',       email: 'new@author.com'     }     dispatch(addAuthor(newAuthor))   }    \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0430   const handleDeleteAuthor = (id) => {     dispatch(deleteAuthor(id))   }    \/\/ \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u0432\u0442\u043e\u0440\u043e\u0432   return (     &lt;div>       &lt;h1>Authors&lt;\/h1>       &lt;button onClick={handleAddAuthor}>Add author&lt;\/button>       {authors.status === 'loading' &amp;&amp; &lt;p>Loading...&lt;\/p>}       {authors.status === 'failed' &amp;&amp; &lt;p>Error: {authors.error}&lt;\/p>}       {authors.status === 'succeeded' &amp;&amp; (         &lt;ul>           {authors.list.map(author => (             &lt;li key={author.id}>               &lt;p>{author.name}&lt;\/p>               &lt;p>{author.username}&lt;\/p>               &lt;p>{author.email}&lt;\/p>               &lt;button onClick={() => handleDeleteAuthor(author.id)}>Delete author&lt;\/button>             &lt;\/li>           ))}         &lt;\/ul>       )}     &lt;\/div>   ) }  export default AuthorsList <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043a\u00a0\u043a\u043e\u0434\u0443:<\/em><\/p>\n<p>\u0412\u00a0\u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Redux Toolkit \u0434\u043b\u044f\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0432\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430\u00a0React. \u0412\u00a0\u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: <code>handleAddAuthor<\/code> \u0438 <code>handleDeleteAuthor<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438\u00a0\u043a\u043b\u0438\u043a\u0435 \u043d\u0430\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438. \u042d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0430\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f <code>addAuthor<\/code> \u0438 <code>deleteAuthor<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0432\u00a0\u0444\u0430\u0439\u043b\u0435 <code>authorsSlice.js<\/code>. \u042d\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 authors \u0432\u00a0\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0438\u043b\u0438\u00a0\u0443\u0434\u0430\u043b\u044f\u044f \u0430\u0432\u0442\u043e\u0440\u043e\u0432. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>AuthorsList<\/code> \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0438\u0437\u00a0\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0445\u0443\u043a <code>useSelector<\/code>. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0445\u0443\u043a <code>useDispatch<\/code> \u0434\u043b\u044f\u00a0\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>dispatch<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f\u00a0\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0438\u0437\u00a0API \u043f\u0440\u0438\u00a0\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 <code>fetchAuthors<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0432\u00a0\u0444\u0430\u0439\u043b\u0435 <code>authorsSlice.js<\/code>.<\/p>\n<ul>\n<li>\n<p>\u0412\u00a0\u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437\u00a0Redux Toolkit:<\/p>\n<ul>\n<li>\n<p><code>configureStore<\/code>: \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f\u00a0createStore, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441\u00a0\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u043e\u00a0\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0435 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u044b, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0438\u043b\u0438\u00a0\u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u043e\u0432, \u043f\u043e\u00a0\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 redux\u2011thunk, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 Redux.<\/p>\n<\/li>\n<li>\n<p><code>createSlice<\/code>: \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u0441\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><code>createAsyncThunk<\/code>: \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0438\u043f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0443\u044e \u043f\u0440\u043e\u043c\u0438\u0441, \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 thunk, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0442\u0438\u043f\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 pending\/fulfilled\/rejected \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u043c\u0438\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p><code>useSelector<\/code>: \u0445\u0443\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0437\u00a0\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u2011\u0444\u0443\u043d\u043a\u0446\u0438\u044e<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>mobx-state-tree<\/h4>\n<p><a class=\"anchor\" name=\"mobxcode\" id=\"mobxcode\"><\/a><\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437 mobx-state-tree import { types } from \"mobx-state-tree\" \/\/ alternatively: import { t } from \"mobx-state-tree\"  \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0430\u0432\u0442\u043e\u0440\u0430 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0438 \u0438\u043c\u0435\u043d\u0435\u043c const Author = types.model({   id: types.identifier, \/\/ \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u0440\u0430   firstName: types.string, \/\/ \u0438\u043c\u044f \u0430\u0432\u0442\u043e\u0440\u0430   lastName: types.string \/\/ \u0444\u0430\u043c\u0438\u043b\u0438\u044f \u0430\u0432\u0442\u043e\u0440\u0430 })  \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0441\u0442\u0430 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c, \u0430\u0432\u0442\u043e\u0440\u043e\u043c, \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c const Post = types.model({   id: types.identifier, \/\/ \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430   author: types.reference(Author), \/\/ \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0430\u0432\u0442\u043e\u0440\u0430 \u043f\u043e \u0435\u0433\u043e id   text: types.string, \/\/ \u0442\u0435\u043a\u0441\u0442 \u043f\u043e\u0441\u0442\u0430   timestamp: types.number \/\/ \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 })  \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0438 \u043f\u043e\u0441\u0442\u043e\u0432 const Store = types.model({   authors: types.array(Author), \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0430\u0432\u0442\u043e\u0440\u043e\u0432   posts: types.array(Post) \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043f\u043e\u0441\u0442\u043e\u0432 }).actions(self => ({ \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435   \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0441\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 posts   handleAddPost() {     const newPost = {       id: Math.random(), \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 id       author: self.authors[0].id, \/\/ \u0431\u0435\u0440\u0435\u043c id \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u0440\u0430 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 authors       text: \"This is a new post\", \/\/ \u0437\u0430\u0434\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u043f\u043e\u0441\u0442\u0430       timestamp: Date.now() \/\/ \u0431\u0435\u0440\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f     }     self.posts.push(newPost) \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0441\u0442 \u0432 \u043a\u043e\u043d\u0435\u0446 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 posts   },   \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u0441\u0442 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 posts \u043f\u043e id   handleDeletePost(id) {     self.posts = self.posts.filter(post => post.id !== id) \/\/ \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 posts, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u043f\u043e\u0441\u0442\u044b, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 id \u043d\u0435 \u0440\u0430\u0432\u0435\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u043c\u0443 id   } }))  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0430\u0432\u0442\u043e\u0440\u043e\u0432 const alice = Author.create({ id: \"alice\", firstName: \"Alice\", lastName: \"Smith\" }) const bob = Author.create({ id: \"bob\", firstName: \"Bob\", lastName: \"Jones\" })  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043f\u043e\u0441\u0442\u043e\u0432 const post1 = Post.create({ id: \"1\", author: alice.id, \/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e id \u0430\u0432\u0442\u043e\u0440\u0430   text: \"Hello world!\",   timestamp: Date.now() }) const post2 = Post.create({ id: \"2\", author: bob.id, \/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e id \u0430\u0432\u0442\u043e\u0440\u0430   text: \"This is a post\",   timestamp: Date.now() + 1000 })  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043c\u043e\u0434\u0435\u043b\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0438 \u043f\u043e\u0441\u0442\u043e\u0432 const store = Store.create({ authors: [alice, bob], posts: [post1, post2] })  \/\/ \u0413\u043e\u0442\u043e\u0432\u043e \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0432 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u0430\u0448\u0430 \u0446\u0435\u043b\u044c. import { observer } from \"mobx-react-lite\" \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e observer \u0438\u0437 mobx-react-lite const PostsList = observer((props) => { \/\/ \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 observer, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445   return (     &lt;div>       &lt;h1>Posts&lt;\/h1>       &lt;button onClick={store.handleAddPost}>Add post&lt;\/button> \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 handleAddPost \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430       &lt;ul>         {store.posts.map(post => ( \/\/ \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u043e\u0441\u0442\u043e\u0432 \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430           &lt;li key={post.id}>             &lt;p>{post.text}&lt;\/p> \/\/ \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0442\u0435\u043a\u0441\u0442 \u043f\u043e\u0441\u0442\u0430             &lt;p>By {post.author.firstName} {post.author.lastName}&lt;\/p> \/\/ \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0438\u043c\u044f \u0438 \u0444\u0430\u043c\u0438\u043b\u0438\u044e \u0430\u0432\u0442\u043e\u0440\u0430 \u043f\u043e\u0441\u0442\u0430 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435             &lt;p>{new Date(post.timestamp).toLocaleString()}&lt;\/p> \/\/ \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0441\u0442\u0430 \u0432 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435             &lt;button onClick={() => store.handleDeletePost(post.id)}>Delete post&lt;\/button> \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 handleDeletePost \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 id \u043f\u043e\u0441\u0442\u0430           &lt;\/li>         ))}       &lt;\/ul>     &lt;\/div>   ) }) <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043a \u043a\u043e\u0434\u0443:<\/em><\/p>\n<p>Mobx\u2011state\u2011tree \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u0434\u0435\u0440\u0435\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 (actions), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u00a0\u043c\u043e\u0434\u0435\u043b\u044f\u0445. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u043e\u0433\u0443\u0442\u00a0\u0431\u044b\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0438\u043b\u0438\u00a0\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438, \u0438 \u043e\u043d\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a\u00a0\u0441\u043d\u0430\u043f\u0448\u043e\u0442\u0430\u043c (snapshots) \u0438 \u043f\u0430\u0442\u0447\u0430\u043c (patches) \u0434\u0435\u0440\u0435\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>\u0412\u00a0\u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439: <code>handleAddPost<\/code> \u0438 <code>handleDeletePost<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0438 \u0443\u0434\u0430\u043b\u044f\u044e\u0442 \u043f\u043e\u0441\u0442\u044b \u0438\u0437\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u0430 posts \u0432\u00a0\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435. \u042d\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u0434\u0435\u0440\u0435\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434\u044b <code>push<\/code> \u0438 <code>filter<\/code> \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u041a\u043e\u0433\u0434\u0430 \u044d\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f, mobx\u2011state\u2011tree \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043d\u0430\u043f\u0448\u043e\u0442 \u0438 \u043f\u0430\u0442\u0447, \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u00a0\u0434\u0435\u0440\u0435\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442\u00a0\u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: mobx\u2011state\u2011tree \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Immer \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e\u00a0\u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u043a\u0430\u043a\u00a0\u0431\u0443\u0434\u0442\u043e \u0432\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u043e\u00a0\u043d\u0430\u00a0\u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b \u043d\u0435\u00a0\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0430\u00a0\u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043d\u043e\u0432\u044b\u0439. \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043a\u043e\u0434 \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043e\u043a, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u00a0\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434<\/h2>\n<p><a class=\"anchor\" name=\"conclusion\" id=\"conclusion\"><\/a><\/p>\n<p>Redux \u0438 Mobx\u00a0\u2014 \u044d\u0442\u043e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u043d\u0430\u00a0React, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438.<\/p>\n<p><strong><em>Redux<\/em><\/strong> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0443, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u043e\u00a0\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430 \u0438 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u00a0\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430\u043c.<\/p>\n<p><em><u>\u041a\u043e\u043c\u0443 \u043e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442?<\/u><\/em><\/p>\n<p><a class=\"anchor\" name=\"whichredux\" id=\"whichredux\"><\/a><\/p>\n<p>Redux (Redux Toolkit) \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u0438\u043c\u0435\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0439, \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u043a\u043e\u0434, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445.\u00a0  <br \/>\u0422\u0430\u043a\u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u043c, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043a\u0442\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p><strong><em>Mobx<\/em><\/strong> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 \u0438 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u043d\u043e\u00a0\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u00a0\u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0441\u0442\u0438 \u0438 \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043a\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. <\/p>\n<p><em><u>\u041a\u043e\u043c\u0443 \u043e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442?<\/u><\/em><\/p>\n<p><a class=\"anchor\" name=\"whichmobx\" id=\"whichmobx\"><\/a><\/p>\n<p>Mobx (mobx-state-tree) \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u0438\u043c\u0435\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439, \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0438 \u0433\u0438\u0431\u043a\u0443\u044e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<br \/>\u0422\u0430\u043a\u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u043d\u043d\u043e\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043a\u0442\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.   <\/p>\n<p>\u0412\u044b\u0431\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 Redux \u0438 Mobx \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u043c\u043d\u043e\u0433\u0438\u0445 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a\u00a0\u0440\u0430\u0437\u043c\u0435\u0440, \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u0446\u0435\u043b\u044c \u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f, \u043e\u043f\u044b\u0442 \u0438 \u043d\u0430\u0432\u044b\u043a\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041d\u0435\u0442 \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430\u00a0\u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437\u00a0\u043d\u0438\u0445 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u00a0React \u0432 2024\u00a0\u0433\u043e\u0434\u0443. <\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e\u00a0\u0432\u00a0\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u043c\u0435\u0441\u0442\u0435 <strong><em>(\u0441\u043b\u0435\u0434\u0438\u0442\u0435 \u0437\u0430 \u0431\u043b\u043e\u0433\u043e\u043c, \u0441\u043a\u043e\u0440\u043e \u043d\u0430\u043f\u0438\u0448\u0443 \u043f\u0440\u043e \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u044c\u044e)<\/em><\/strong>, \u0430\u00a0\u0432\u00a0\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445\u00a0\u2014 \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437\u00a0\u043d\u0438\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 React, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0useState, useReducer, useContext \u0438\u00a0\u0442.\u00a0\u0434. \u0413\u043b\u0430\u0432\u043d\u043e\u0435\u00a0\u2014 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u00a0\u043d\u0438\u0445, \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c \u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<h3>\u0410\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b<\/h3>\n<p><a class=\"anchor\" name=\"ps\" id=\"ps\"><\/a><a class=\"anchor\" name=\"%D1%81%D0%BD%D0%B0%D0%BF%D1%88%D0%BE%D1%82\" id=\"\u0441\u043d\u0430\u043f\u0448\u043e\u0442\"><\/a><a class=\"anchor\" name=\"%D0%BF%D0%B0%D1%82%D1%87\" id=\"\u043f\u0430\u0442\u0447\"><\/a><a class=\"anchor\" name=\"%D0%BF%D0%B5%D1%80%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C\" id=\"\u043f\u0435\u0440\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c\"><\/a><a class=\"anchor\" name=\"%D0%BA%D0%BE%D0%B4-%D1%81%D0%BF%D0%BB%D0%B8%D1%82%D1%82%D0%B8%D0%BD%D0%B3\" id=\"\u043a\u043e\u0434-\u0441\u043f\u043b\u0438\u0442\u0442\u0438\u043d\u0433\"><\/a><a class=\"anchor\" name=\"%D0%B4%D0%B5%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\" id=\"\u0434\u0435\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\"><\/a><a class=\"anchor\" name=\"%D0%B8%D0%BC%D0%BC%D1%83%D1%82%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9\" id=\"\u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439\"><\/a><a class=\"anchor\" name=\"%D0%B1%D0%BE%D0%B9%D0%BB%D0%B5%D1%80%D0%BF%D0%BB%D0%B5%D0%B9%D1%82\" id=\"\u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\"><\/a><\/p>\n<p><strong>\u0421\u043d\u0430\u043f\u0448\u043e\u0442\u044b<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043f\u0438\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<br \/><strong>\u041f\u0430\u0442\u0447\u0438<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0438 \u0432\u00a0\u0434\u0435\u0440\u0435\u0432\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<br \/><strong>\u041f\u0435\u0440\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438\u00a0\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043b\u0430 \u0438\u043b\u0438\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430.<br \/><strong>\u041a\u043e\u0434\u2011\u0441\u043f\u043b\u0438\u0442\u0442\u0438\u043d\u0433<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0431\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430\u00a0\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u0435\u0439 (\u0447\u0430\u043d\u043a\u043e\u0432), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u00a0\u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<br \/><strong>\u0414\u0435\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u00a0\u043c\u0435\u043d\u0435\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0443\u044e, \u0441\u00a0\u0446\u0435\u043b\u044c\u044e \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<br \/><strong>\u0418\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u00a0\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<br \/><strong>\u0411\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u0438\u043b\u0438\u00a0\u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f\u00a0\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0438\u043b\u0438\u00a0\u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. <\/p>\n<h3>\u0421\u0442\u0430\u0442\u044c\u0438<\/h3>\n<p><a class=\"anchor\" name=\"articles\" id=\"articles\"><\/a><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0441\u0435\u00a0\u0436\u0435 \u043d\u0435\u00a0\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u043c\u0435\u0436\u0434\u0443 Redux \u0438 MobX, \u044f \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0443 \u0432\u0430\u043c \u044d\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/aglowiditsolutions.com\/blog\/mobx-vs-redux\/\" rel=\"noopener noreferrer nofollow\">MobX vs Redux\u00a0\u2014 What to Choose in 2024?\u00a0\u2014 Aglowid IT Solutions<\/a>\u00a0\u2014 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0434\u0430\u0435\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 MobX \u0438 Redux, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u043c\u0438 \u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/@kavandev1\/should-you-still-go-with-redux-in-2024-exploring-alternatives-and-comparisons-1d39af077144\" rel=\"noopener noreferrer nofollow\">Should You Still Go with Redux in 2024? Exploring Alternatives and Comparisons\u00a0\u2014 Medium<\/a>\u00a0\u2014 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u00a0\u0442\u043e\u043b\u044c\u043a\u043e MobX \u0438 Redux, \u043d\u043e\u00a0\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0React Context API, Recoil \u0438 Zustand, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u0435\u0442 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e\u00a0\u0438\u0445 \u0432\u044b\u0431\u043e\u0440\u0443.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/bing.com\/search?q=Redux+vs+Mobx+2024\" rel=\"noopener noreferrer nofollow\">reactjs\u00a0\u2014 Difference between: MobX and Redux\u00a0\u2014 Stack Overflow<\/a>\u00a0\u2014 \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0442 \u043d\u0430\u00a0\u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0430\u00a0\u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0435\u0442 \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 MobX \u0438 Redux.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/shift.infinite.red\/why-infinite-red-uses-mobx-state-tree-instead-of-redux-d6c1407dead\" rel=\"noopener noreferrer nofollow\">Why Infinite Red uses MobX\u2011State\u2011Tree instead of Redux<\/a>\u00a0\u2014 \u0441\u0442\u0430\u0442\u044c\u044f, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u0432\u0442\u043e\u0440 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Mobx\u2011state\u2011tree \u0432\u043c\u0435\u0441\u0442\u043e Redux \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u00a0React, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u0435\u0442 \u043e\u0431\u0437\u043e\u0440 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 Mobx\u2011state\u2011tree.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/articles\/771660\/\" rel=\"noopener noreferrer nofollow\">Redux\u2011toolkit \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/a>\u00a0\u2014 \u0441\u0442\u0430\u0442\u044c\u044f, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u0432\u0442\u043e\u0440 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442, \u043a\u0430\u043a\u00a0\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u0438\u00a0\u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u00a0Redux Toolkit, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 createSlice \u0438 createAsyncThunk, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u0435\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u00a0\u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c Redux.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p><a class=\"anchor\" name=\"end\" id=\"end\"><\/a><\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f\u00a0\u0431\u044b\u043b\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0434\u043b\u044f\u00a0\u0432\u0430\u0441, \u0438 \u043f\u043e\u043c\u043e\u0433\u043b\u0430 \u0432\u0430\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432\u00a0\u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f\u0445 \u0438 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430\u0445 \u043c\u0435\u0436\u0434\u0443 Redux \u0438 Mobx. \u0415\u0441\u043b\u0438 \u0443\u00a0\u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438\u043b\u0438\u00a0\u043f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043c\u043d\u0435 \u0432\u00a0\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0438\u043b\u0438\u00a0\u0432\u00a0\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430\u00a0\u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435! <\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/795901\/\"> https:\/\/habr.com\/ru\/articles\/795901\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u00a0\u0432\u0430\u043c\u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u00a0\u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u00a0React \u0432 2024\u00a0\u0433\u043e\u0434\u0443. \u041a\u0430\u043a\u00a0\u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, React\u00a0\u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437\u00a0\u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438 \u043c\u043e\u0449\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e\u00a0\u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u00a0React, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u00a0\u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0414\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430\u043c\u0438. \u0421\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u00a0\u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>\u0412\u00a0\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u0434\u0432\u0430 \u0438\u0437\u00a0\u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438 \u0437\u0440\u0435\u043b\u044b\u0445 \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0434\u043b\u044f\u00a0React: Redux \u0438 Mobx, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f <em>mobx-state-tree<\/em> \u0438 <em>Redux Toolkit<\/em>. \u042f \u0441\u0440\u0430\u0432\u043d\u044e \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043a\u0430\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u00a0\u043a\u043e\u0434\u0435. \u0422\u0430\u043a\u0436\u0435 \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430\u00a0\u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437\u00a0\u043d\u0438\u0445 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f\u00a0\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u00a0React \u0432 2024\u00a0\u0433\u043e\u0434\u0443.<\/p>\n<h3>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h3>\n<ul>\n<li>\n<p><a href=\"#redux\" rel=\"noopener noreferrer nofollow\">Redux<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#reduxplus\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e\u00a0\u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432\u00a0Redux?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#reduxminus\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e\u00a0\u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432\u00a0Redux?<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#mobx\" rel=\"noopener noreferrer nofollow\">MobX<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#mobxplus\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e\u00a0\u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432\u00a0MobX?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#mobxminus\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e\u00a0\u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432\u00a0MobX?<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#reduxmobx\" rel=\"noopener noreferrer nofollow\">Redux Toolkit \u0438 MobX (mobx\u2011state\u2011tree<\/a>)<\/p>\n<ul>\n<li>\n<p><a href=\"#hard\" rel=\"noopener noreferrer nofollow\">\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/a> <\/p>\n<\/li>\n<li>\n<p><a href=\"#speed\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f<\/a> <\/p>\n<\/li>\n<li>\n<p><a href=\"#test\" rel=\"noopener noreferrer nofollow\">\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#ecosystem\" rel=\"noopener noreferrer nofollow\">\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#code\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f:<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#reduxcode\" rel=\"noopener noreferrer nofollow\">Redux Toolkit<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#mobxcode\" rel=\"noopener noreferrer nofollow\">mobx\u2011state\u2011tree<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#conclusion\" rel=\"noopener noreferrer nofollow\">\u0412\u044b\u0432\u043e\u0434<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#whichredux\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 Redux<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#whichmobx\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 Mobx<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#ps\" rel=\"noopener noreferrer nofollow\">\u0410\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u044b <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#articles\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0430\u0442\u044c\u0438 <\/a><\/p>\n<\/li>\n<\/ul>\n<h2>Redux<\/h2>\n<p><a class=\"anchor\" name=\"redux\" id=\"redux\"><\/a><\/p>\n<p><strong><em>Redux<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u00a0\u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u00a0\u043e\u0434\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 (unidirectional data flow). \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442,&#8230;.<\/p>\n<p>\u0410\u00a0\u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438:<\/p>\n<p><strong><em>Redux<\/em><\/strong> \u00a0\u2014 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430\u00a0React. \u0412\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0432\u00a0\u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <em>store<\/em>.<\/p>\n<p><strong><em>Store<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043a\u0430\u043a\u00a0\u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u043d\u0430\u0435\u0442 \u0432\u0441\u044e \u043f\u0440\u0430\u0432\u0434\u0443 \u043e\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0432\u00a0store, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c <em>action<\/em>.<\/p>\n<p><strong><em>Action<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043a\u0430\u043a\u00a0\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e\u00a0\u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u00a0\u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0432\u00a0\u0441\u043f\u0438\u0441\u043e\u043a, \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0432\u00a0\u0444\u043e\u0440\u043c\u0435, \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u0438\u0437\u00a0\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0438\u00a0\u0442.\u00a0\u0434. Action \u043d\u0435\u00a0\u043c\u0435\u043d\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0430\u043c, \u0430\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0438\u0445 \u0432 <em>reducer<\/em>.<\/p>\n<p><strong><em>Reducer<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u043a\u0430\u043a\u00a0\u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u043a\u0430\u043a\u00a0\u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c <em>store<\/em> \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 <em>action<\/em>. Reducer \u043d\u0435\u00a0\u043f\u043e\u0440\u0442\u0438\u0442 \u0441\u0442\u0430\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430\u00a0\u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u043d\u0430\u00a0\u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435. \u0412\u0441\u0435 reducers \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432\u00a0\u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 reducer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 store.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u043c\u043e\u0433\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u00a0store, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 react\u2011redux. \u041e\u043d\u0430 \u0434\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Provider, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u00a0store \u0432\u0441\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e connect, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u00a0store \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0438\u0445 \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u00a0\u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043e\u043d\u0430 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 actions. \u041a\u043e\u0433\u0434\u0430 store \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0432\u0441\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u00a0\u043d\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 Redux<br \/>\u0413\u0438\u0444\u043a\u0430 \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Redux \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 React:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Redux<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ actions.js \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0438\u043f\u044b actions export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO';  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c action creators export function addTodo(text) {   return {     type: ADD_TODO,     text   }; }  export function toggleTodo(index) {   return {     type: TOGGLE_TODO,     index   }; }  \/\/ reducers.js \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 store const initialState = {   todos: [] };  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c reducer \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 actions function todoApp(state = initialState, action) {   switch (action.type) {     case ADD_TODO:       \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 todos       return {         ...state,         todos: [           ...state.todos,           {             text: action.text,             completed: false           }         ]       };     case TOGGLE_TODO:       \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u043b\u0430\u0433\u043e\u043c completed \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 todos \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443       return {         ...state,         todos: state.todos.map((todo, index) => {           if (index === action.index) {             return {               ...todo,               completed: !todo.completed             };           }           return todo;         })       };     default:       \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 action \u043d\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043d       return state;   } }  \/\/ index.js \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c React, Redux \u0438 react-redux import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import { Provider, connect } from 'react-redux';  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 reducer \u0438 action creators import todoApp from '.\/reducers'; import { addTodo, toggleTodo } from '.\/actions';  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c store \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e reducer const store = createStore(todoApp);  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 const Todo = ({ text, completed, onClick }) => (   &lt;li     style={{       textDecoration: completed ? 'line-through' : 'none'     }}     onClick={onClick}   >     {text}   &lt;\/li> );  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 const TodoList = ({ todos, onTodoClick }) => (   &lt;ul>     {todos.map((todo, index) => (       &lt;Todo         key={index}         {...todo}         onClick={() => onTodoClick(index)}       \/>     ))}   &lt;\/ul> );  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 const AddTodo = ({ onAddClick }) => {   let input;    return (     &lt;div>       &lt;input ref={node => (input = node)} \/>       &lt;button         onClick={() => {           onAddClick(input.value);           input.value = '';         }}       >         Add Todo       &lt;\/button>     &lt;\/div>   ); };  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f const App = ({ todos, addTodo, toggleTodo }) => (   &lt;div>     &lt;AddTodo onAddClick={addTodo} \/>     &lt;TodoList todos={todos} onTodoClick={toggleTodo} \/>   &lt;\/div> );  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 store \u043d\u0443\u0436\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 App \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 const mapStateToProps = state => ({   todos: state.todos });  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 action creators \u043d\u0443\u0436\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 App \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 const mapDispatchToProps = dispatch => ({   addTodo: text => dispatch(addTodo(text)),   toggleTodo: index => dispatch(toggleTodo(index)) });  \/\/ \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App \u043a store \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 connect const ConnectedApp = connect(   mapStateToProps,   mapDispatchToProps )(App);  \/\/ \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Provider, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 store \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ConnectedApp \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e ReactDOM.render(   &lt;Provider store={store}>     &lt;ConnectedApp \/>   &lt;\/Provider>,   document.getElementById('root') );<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h4>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432 Redux?<\/h4>\n<p><a class=\"anchor\" name=\"reduxplus\" id=\"reduxplus\"><\/a><\/p>\n<ul>\n<li>\n<p>Redux \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 <strong>\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c<\/strong> \u0438 <strong>\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c<\/strong> \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 actions \u0438 reducers, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438, \u043d\u0435\u00a0\u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u043c\u0438 \u043e\u0442\u00a0\u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432. \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0443, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<p><em>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440<\/em>: Redux DevTools\u00a0\u2014 \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f\u00a0\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0440\u0438\u044e actions \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043c\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u043e\u00a0\u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 actions, \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<\/li>\n<li>\n<p>Redux \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <strong>\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/strong> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0439 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0427\u0442\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432 Redux?<\/h4>\n<p><a class=\"anchor\" name=\"reduxminus\" id=\"reduxminus\"><\/a><\/p>\n<ul>\n<li>\n<p>Redux \u0438\u043c\u0435\u0435\u0442 <strong>\u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f<\/strong> \u0438 <strong>\u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f<\/strong>, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u043d\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439, \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u0432, \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u00a0\u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u044b \u0438 \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p><em>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440<\/em>: \u0414\u043b\u044f\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u00a0Redux \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <code>actions, action creators, reducers, store, Provider, connect, mapStateToProps, mapDispatchToProps<\/code> \u0438\u00a0\u0442.\u00a0\u0434.<\/p>\n<\/li>\n<li>\n<p>Redux \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a <strong>\u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u043a\u043e\u0434\u0430<\/strong> \u0438 <a href=\"#%D0%B1%D0%BE%D0%B9%D0%BB%D0%B5%D1%80%D0%BF%D0%BB%D0%B5%D0%B9%D1%82\" rel=\"noopener noreferrer nofollow\"><strong>\u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430<\/strong><\/a>, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442, \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0442\u0441\u044f \u0438 \u043d\u0435\u00a0\u043d\u0435\u0441\u0443\u0442 \u0441\u043c\u044b\u0441\u043b\u043e\u0432\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p><em>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440<\/em>: \u0434\u043b\u044f\u00a0\u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e action \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u0442\u0438\u043f, action creator, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u00a0reducer, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c action creator \u0432\u00a0mapDispatchToProps \u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437\u00a0\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>Redux \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a <strong>\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong> \u0438 <strong>\u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430\u043c<\/strong>, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 store \u043f\u0440\u0438\u00a0\u043a\u0430\u0436\u0434\u043e\u043c action, \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430\u00a0\u043d\u0435\u0433\u043e, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435\u00a0\u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c. \u0414\u043b\u044f\u00a0\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0<code>reselect, memo, useMemo, useCallback<\/code> \u0438\u00a0\u0442.\u00a0\u0434.<\/p>\n<\/li>\n<\/ul>\n<h2>Mobx<\/h2>\n<p><a class=\"anchor\" name=\"mobx\" id=\"mobx\"><\/a><\/p>\n<p><strong><em>Mobx<\/em><\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u00a0\u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (reactive programming).<\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e\u00a0\u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u00a0Mobx \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u00a0\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 observables, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442 \u0438 \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u044e\u0442 \u043e\u0431\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0441\u0432\u043e\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u0414\u043b\u044f\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u00a0observables \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438\u00a0\u0442.\u00a0\u0434.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u0441\u0432\u044f\u0437\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React \u0441\u00a0observables \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 mobx\u2011react, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@observer<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u00a0\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 reactions, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u00a0observables, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u00a0\u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 mobx\u2011react \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Provider, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c observables \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>inject<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c observables \u0438\u0437\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u00a0\u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>by <a href=\"https:\/\/medium.com\/@kumararatnenethmee?source=post_page-----88c83527ae8b--------------------------------\" rel=\"noopener noreferrer nofollow\">Nethmee Kumararatne<\/a><\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Mobx \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 React:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f MobX<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ store.js \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c Mobx import { observable, action } from 'mobx';  \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 class TodoStore {   \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430   @observable todos =<\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-369083","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/369083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=369083"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/369083\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=369083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=369083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=369083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}