{"id":338609,"date":"2022-09-22T09:00:12","date_gmt":"2022-09-22T09:00:12","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=338609"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=338609","title":{"rendered":"<span>\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438<\/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<p>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0447\u0438\u0442\u0430\u043b\u0438! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0421\u0435\u0440\u0433\u0435\u0439 \u0421\u0435\u043c\u0435\u043d\u043e\u0432, \u044f frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0414\u043e\u043c\u043a\u043b\u0438\u043a. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043c\u043d\u043e\u0433\u0438\u043c \u0438\u0437 \u0432\u0430\u0441 \u0442\u0435\u043c\u0430 \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439. \u0423\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0432\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u043e\u0439\u0434\u0451\u0442\u0435 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0435 \u044d\u0442\u0430\u043f\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043f\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u0432\u043e\u044e \u043a\u043e\u043f\u0438\u043b\u043a\u0443 \u043f\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c79\/bce\/392\/c79bce3924e6567ab24c319c4300b178.png\" width=\"1662\" height=\"502\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c79\/bce\/392\/c79bce3924e6567ab24c319c4300b178.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ol>\n<li>\n<p>JavaScript \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432 \u043c\u0438\u0440\u0435 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ru.reactjs.org\/\">React<\/a> \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 JavaScript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \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.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/redux.js.org\/\">Redux<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/redux-saga.js.org\/\">Redux-saga<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0432 Redux.<\/p>\n<\/li>\n<\/ol>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0443\u0441\u0442\u043e\u0435 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442, \u0441\u043b\u0435\u0434\u0443\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0432 readme, \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043f\u043e <a href=\"https:\/\/github.com\/SemenovSY\/base-config\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n<h3>\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438<\/h3>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438, \u0442\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u043e\u0438\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0447\u0438\u0441\u0435\u043b. \u0410 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u043c\u043e\u0436\u043d\u043e, \u0441\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0440\u0430\u0437\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b, \u0432\u044b\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434. \u0422\u0430\u043a \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0436\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u044d\u0442\u043e\u0442 \u0440\u044f\u0434 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>\u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <code>modules<\/code>. \u0412 \u043d\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u0435\u0440\u0432\u044b\u043c\u0438 \u0438\u0437 \u0442\u0430\u043a\u043e\u0432\u044b\u0445 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Array \/><\/code> \u0438 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Bar \/><\/code>, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u041d\u0430\u0447\u043d\u0451\u043c \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e.<\/p>\n<p>\u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0442 \u043d\u0435\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u044d\u0442\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b \u0441\u0442\u043e\u043b\u0431\u0435\u0446, \u0432\u044b\u0441\u043e\u0442\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u0438 \u0448\u0438\u0440\u0438\u043d\u043e\u0439. \u0428\u0438\u0440\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u0430\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0441\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u043b\u0438\u043d\u0438\u044e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f \u0437\u0430 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u044b. \u041a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 \u0448\u0438\u0440\u0438\u043d\u044b \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<details class=\"spoiler\">\n<summary>bar\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import styles from '.\/styles';  const Bar = ({ width, height }) => {   const barStyles = {     height: `${ height }px`,     width: `${ width }px`   };    return &lt;div className={ styles.bar } style={ barStyles } \/>; }  export default Bar;<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443. \u0411\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u0417\u043d\u0430\u0447\u0438\u0442, \u0438\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u043b\u043e\u043a\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c width \u0438 height \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>bar\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.bar   background-color #ffb86c   border .1rem solid #44475a<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0446\u0432\u0435\u0442 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0432\u0448\u0438\u0439\u0441\u044f. \u0418 \u0442\u043e\u043d\u043a\u0430\u044f \u0440\u0430\u043c\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u041b\u0443\u0447\u0448\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u0439 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 1px \u0438 \u0446\u0432\u0435\u0442, \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0439 \u0446\u0432\u0435\u0442\u0443 \u0437\u0430\u0434\u043d\u0435\u0433\u043e \u0444\u043e\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 \u0444\u0430\u0439\u043b\u0430\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f rem, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;html \/>. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 1\/10, \u0442.\u0435. 1rem = 10px.<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u043e\u0442\u043e\u0432. \u0421\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0443.  \u041e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>&lt;Array \/><\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: \u0432\u044b\u0432\u043e\u0434 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u0436\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Bar \/><\/code>. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043d\u0438\u0445:<\/p>\n<details class=\"spoiler\">\n<summary>array\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { createArray } from 'utils';  import Bar from '.\/bar';  import styles from '.\/styles';  const WIDTH_MULTIPLIER = window.screen.width; const ARRAY = createArray(30); const BAR_WIDTH = WIDTH_MULTIPLIER \/ ARRAY.length;  const Array = () => (   &lt;div className={ styles.array }>     {       ARRAY.map((height, index) => (           &lt;Bar             key={ index }             width={ BAR_WIDTH }             height={ height }           \/>         )       )     }   &lt;\/div> );  export default Array;<\/code><\/pre>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u044b. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0451 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c. \u041f\u043e\u0441\u043b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 WIDTH_MULTIPLIER \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u041e\u043d\u0430 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u043e\u043d\u0438 \u0440\u043e\u0432\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u0432 \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u0437\u043e\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u0432. \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0435 ARRAY \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u0435\u0440\u043d\u0443\u0432\u0448\u0435\u0435\u0441\u044f \u0438\u0437 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e \u043d\u0435\u043c\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434 map, \u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0442\u043e\u043b\u0431\u0435\u0446, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0438\u0440\u0438\u043d\u044b &#8212; \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u0435 \u0432\u044b\u0448\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b BAR_WIDTH.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>array\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.array   height 65rem   width 100%   display flex   justify-content center   align-items flex-end<\/code><\/pre>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432. \u0422\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 <code>utils<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 <code>src<\/code>. \u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0451 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>createArray.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);  export const createArray = arrayLength => {   const array = [];    for (let i = 0; i &lt; arrayLength; i++) {     array.push(randomIntFromInterval(30, 600));   }    return array; }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f createArray \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u044b, \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c\u0438 \u0447\u0438\u0441\u043b\u0430\u043c\u0438. \u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0438\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>index.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { createArray } from \".\/createArray\";  export {   createArray }<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b \u0438\u043c\u043f\u043e\u0440\u0442\u0430\/\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u0441\u0451 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0432\u044b\u0432\u043e\u0434\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043b\u0438\u0448\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;App \/><\/code>. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>app.jsx<\/code> \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0438\u0442\u0435 \u0435\u0433\u043e \u043a \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n<details class=\"spoiler\">\n<summary>app.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import Array from '.\/modules\/array'  const App = () => {   return &lt;Array \/>; };  export default App;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u044b\u0445 \u0448\u0430\u0433\u043e\u0432. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c \u0441\u0430\u043c\u0438. \u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:3000\/\">localhost:3000<\/a> \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 \u044d\u0442\u043e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a90\/f22\/ba0\/a90f22ba00da7fdf0afde99c5d030d57.png\" alt=\"\" title=\"\" width=\"3770\" height=\"2338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a90\/f22\/ba0\/a90f22ba00da7fdf0afde99c5d030d57.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432. \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442!<\/p>\n<h3>\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0430\u0434\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0431\u0443\u0434\u0443\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438.<\/p>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043d\u0435\u043c\u043d\u043e\u0433\u0443 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0438. \u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <strong>redux<\/strong> \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 <strong>redux-saga<\/strong>.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443, \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0430\u0434\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>reducers<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 \u043d\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>arraySettings.js<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>arraySettings.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const initial = {   array: [],   arrayLength: 30 };  export default (state = initial, { type, value }) => {   switch (type) {     case 'ARRAY\/SET_ARRAY':       return { ...state, array: value };     case 'ARRAY\/SET_LENGTH':       return { ...state, arrayLength: value };     default:       return state;   } };<\/code><\/pre>\n<p>\u0412 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0418 \u044d\u043a\u0448\u0435\u043d\u044b, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0434\u043b\u0438\u043d\u044b.<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u0430\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u044b \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0439\u043b <code>index.js<\/code> \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>index.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { combineReducers } from 'redux';  import arraySettings from '.\/arraySettings'  export default combineReducers({   arraySettings });<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0430\u0433\u0438 (saga) \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>sagas<\/code><strong> <\/strong>\u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>controls.js<\/code>. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0451, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f:<\/p>\n<details class=\"spoiler\">\n<summary>controls.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import {   put,   select,   takeLatest } from 'redux-saga\/effects';  import { createArray } from \"utils\";  function* resetArray() {   const arrayLength = yield select(({ arraySettings }) => arraySettings.arrayLength);    yield put({ type: 'ARRAY\/SET_ARRAY', value: createArray(arrayLength) }); }  export default [   takeLatest('CONTROLS\/RESET_ARRAY', resetArray) ];<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u0441\u0442\u043e\u0440\u0443 \u0438 \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0418 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u043a\u043e\u043c\u0430\u044f \u043d\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044f createArray. \u041f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0441\u0430\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u043f\u0440\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 CONTROLS\/RESET_ARRAY.<\/p>\n<\/div>\n<\/details>\n<p>\u0418 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0430\u0433\u0443 \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0441\u0430\u0433\u0438 \u0432 <code>index.js<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>index.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { all } from 'redux-saga\/effects';  import controls from '.\/controls'  export default function* rootSaga() {   yield all([     ...controls   ]); };<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b \u0438\u043c\u043f\u043e\u0440\u0442\u0430\/\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0441\u0430\u0433. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 shared<strong> <\/strong>\u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src. \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u044e\u0434\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043d\u043e\u043f\u043e\u043a:<\/p>\n<details class=\"spoiler\">\n<summary>button\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import classnames from 'classnames\/bind';  import styles from '.\/styles';  const cn = classnames.bind(styles);  const Button = ({ text, className, onClick }) => {   return (     &lt;button onClick={ onClick } className={cn('button', className) }>{ text }&lt;\/button>   ) };  export default Button;<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043a\u043d\u043e\u043f\u043a\u0438. \u0412 \u0446\u0435\u043b\u043e\u043c, \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u043a\u043d\u043e\u043f\u043a\u0430\u043c.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>button\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">@import '~constants'  .button   height 4rem   padding 0 1.6rem   font-weight 600   background-color #fff   border .1rem solid $cyan   border-radius .5rem   cursor pointer    &amp;:hover     background-color $light-grey    &amp;:active     color #fff     background-color $cyan<\/code><\/pre>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u0443 \u043c\u0435\u043d\u044f \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430<\/p>\n<\/div>\n<\/details>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0439\u043b <code>index.js<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>index.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import Button from '.\/button';  export {   Button };<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b \u0438\u043c\u043f\u043e\u0440\u0442\u0430\/\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0430\u0434\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Controls \/><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0438 <code>&lt;ResetButton \/><\/code> \u2014 \u043a\u043d\u043e\u043f\u043a\u0443, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0443\u044e \u0437\u0430 \u0441\u0431\u0440\u043e\u0441 \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u041d\u0430\u0447\u043d\u0451\u043c \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e.<\/p>\n<p>\u041d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0441 \u043f\u0430\u043f\u043a\u043e\u0439 <code>array<\/code> \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 <code>controls<\/code>. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043d\u0435\u0451 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u0438\u0445 \u043f\u0443\u0441\u0442\u044b\u043c\u0438. \u0412\u043d\u0443\u0442\u0440\u0438 <code>controls<\/code> \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 <code>resetButton<\/code>. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434:<\/p>\n<details class=\"spoiler\">\n<summary>resetButton\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { useDispatch } from \"react-redux\";  import { Button } from 'shared';  const resetArray = () => ({ type: 'CONTROLS\/RESET_ARRAY' });  const ResetButton = () => {   const dispatch = useDispatch();    const onClick = () => dispatch(resetArray());    return (     &lt;Button       text=\"\u041f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432\"       disabled={ false }       onClick={ onClick }     \/>   ); };  export default ResetButton;<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u044d\u043a\u0448\u0435\u043d\u0430 CONTROLS\/RESET_ARRAY. \u0414\u0430\u043b\u0435\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043b\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442\u044c \u044d\u043a\u0448\u043d. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u043d\u0435\u0435 \u0441\u0430\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u043d\u0430\u0448\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u044b\u0448\u0435, \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>controls<\/code>, \u0438 \u0432 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>controls\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import ResetButton from \".\/resetButton\";  import styles from '.\/styles';  const Controls = () => {   return (     &lt;div className={ styles.controls }>       &lt;div className={ styles.controls__buttons }>         &lt;ResetButton \/>       &lt;\/div>     &lt;\/div>   ); };  export default Controls;<\/code><\/pre>\n<p>\u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0442\u0430\u043a\u043e\u043c \u0432\u0438\u0434\u0435. \u0411\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430\u0434\u0435\u043b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>controls\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.controls   width fit-content   display flex   flex-direction column   justify-content center    &amp;__buttons     margin-bottom 1.2rem     display flex<\/code><\/pre>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0432\u0441\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u043d\u043e\u043f\u043e\u043a<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e. \u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u0434 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>&lt;App \/><\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Controls \/><\/code>. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>&lt;Array \/><\/code>, \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\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0441\u0442\u043e\u0440\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>array\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { useEffect } from \"react\"; import { useDispatch, useSelector } from \"react-redux\";  import Bar from '.\/bar';  import styles from '.\/styles';  const WIDTH_MULTIPLIER = window.screen.width;  const resetArray = () => ({ type: 'CONTROLS\/RESET_ARRAY' });  const Array = () => {   const array = useSelector(({ arraySettings }) => arraySettings.array);    const dispatch = useDispatch();   const createArray = () => dispatch(resetArray());    useEffect(() => {     createArray()   }, []);    const barWidth = WIDTH_MULTIPLIER \/ array.length || 0;    return (     &lt;div className={ styles.array }>       {         array.map((height, index) => (             &lt;Bar               key={ index }               width={ barWidth }               height={ height }             \/>           )         )       }     &lt;\/div>   ); }  export default Array;<\/code><\/pre>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b ARRAY \u0438 BAR_WIDTH, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u043f\u043e\u0440\u0442 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0437 \u0441\u0442\u043e\u0440\u0430, \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u044d\u043a\u0448\u0435\u043d\u0430 CONTROLS\/RESET_ARRAY \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b \u043f\u0440\u0438 \u043c\u0430\u0443\u043d\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>app.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import Array from '.\/modules\/array'; import Controls from '.\/modules\/controls';  const App = () => {   return (     &lt;>       &lt;Controls \/>       &lt;Array \/>     &lt;\/>   ); };  export default App;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0448\u0430\u0433\u043e\u0432 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e\u0434 \u043d\u0430\u0448\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043d\u043e\u0432\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432\u00bb. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0441\u0431\u0440\u043e\u0441 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/620\/845\/869\/6208458693fd79ac2642dee9cbda031c.png\" width=\"3770\" height=\"2338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/620\/845\/869\/6208458693fd79ac2642dee9cbda031c.png\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430<\/h3>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0442\u0430\u043f \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u0441\u0451 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u0438\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u043a\u0430\u043a \u0441\u0430\u043c\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u0443\u0437\u044b\u0440\u044c\u043a\u043e\u0432\u0443\u044e \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0442\u0435, \u0447\u0442\u043e \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435: \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0441\u043b\u0438\u044f\u043d\u0438\u0435\u043c.<\/p>\n<p>\u0421\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432: \u043f\u0443\u0437\u044b\u0440\u044c\u043a\u043e\u0432\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u041d\u0430 \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u0412 \u043f\u0430\u043f\u043a\u0435 <code>reducers<\/code> \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>comparison.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>comparison.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const initial = {   inProgress: false,   sortingSpeed: 1,   activeElements: [],   sortedElements: [],   auxiliaryElements: [] };  export default (state = initial, { type, value }) => {   switch (type) {     case 'COMPARISON\/RESET':       return { ...initial, sortingSpeed: state.sortingSpeed };     case 'COMPARISON\/TOGGLE_SORT':       return { ...state, inProgress: value };     case 'COMPARISON\/SET_SORTING_SPEED':       return { ...state, sortingSpeed: value };     case 'COMPARISON\/SET_ACTIVE_ELEMENTS':       return { ...state, activeElements: value };     case 'COMPARISON\/SET_AUXILIARY_ELEMENTS':       return { ...state, auxiliaryElements: value };     case 'COMPARISON\/SET_SORTED_ELEMENTS':       return { ...state, sortedElements: value };     default:       return state;   } };<\/code><\/pre>\n<p>\u0412 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0445\u0440\u0430\u043d\u0438\u043c \u0444\u043b\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043d\u0430\u043c, \u0430\u043a\u0442\u0438\u0432\u043d\u0430 \u043b\u0438 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u043c, \u043d\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043f\u043e\u0437\u0436\u0435. \u0418 \u0442\u0440\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0440\u0435\u0434\u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445. \u041f\u0435\u0440\u0432\u044b\u0439 &#8212; \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u0412\u0442\u043e\u0440\u043e\u0439 &#8212; \u0434\u043b\u044f \u0443\u0436\u0435 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0422\u0440\u0435\u0442\u0438\u0439 &#8212; \u0434\u043b\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438.<\/p>\n<\/div>\n<\/details>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430 \u0432 <code>index.js<\/code><em>.<\/em><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0441\u0430\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>sagas<\/code> \u043f\u0430\u043f\u043a\u0443 <code>sorting<\/code>. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u044e\u0434\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u0441 \u0441\u0430\u0433\u0430\u043c\u0438. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: <code>sorting.js<\/code> \u0438 <code>bubbleSort.js<\/code>. \u041f\u0435\u0440\u0432\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043d\u0430\u043c, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043f\u0443\u0442\u0451\u043c \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0438 \u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0430\u0443\u0437\u044b \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430. \u0418 \u0434\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0435\u0451 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0432 \u043a\u043e\u0434 \u0432\u0441\u0451 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>sorting.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { delay, put, select } from \"redux-saga\/effects\";  \/\/ \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435 export function* setNewParams(params) {   const array = yield select(({ arraySettings }) => arraySettings.array);       for (let index in params) {     array[index] = params[index];   }    yield put({ type: 'ARRAY\/SET_ARRAY', value: array }); }  \/\/ \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043f\u0430\u0443\u0437\u044b \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 export function* setPause(multiplier = 100) {   const sortingSpeed = yield select(({ comparison }) => comparison.sortingSpeed);    \/\/ \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438   yield delay(multiplier \/ sortingSpeed); }  export function* startSorting() {    \/\/ \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435   yield put({ type: 'COMPARISON\/RESET' });   yield put({ type: 'COMPARISON\/TOGGLE_SORT', value: true }); }  export function* afterSuccessSorting() {   const sortedArrayLength = yield select(({ arraySettings }) => arraySettings.arrayLength);    yield put({type: 'COMPARISON\/RESET'});    \/\/ \u0446\u0438\u043a\u043b \u043f\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430   for(let length = 1; length &lt;= sortedArrayLength; length++) {          \/\/ \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u043f\u043e\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435     yield put({ type: 'COMPARISON\/SET_SORTED_ELEMENTS', value: Array.from(Array(length).keys()) });      \/\/ \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0430\u0443\u0437\u0430 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438     yield setPause(1);   } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0435\u0441\u0442\u044c, \u0447\u0442\u043e \u0438\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043d\u0430\u0434 \u043a\u0430\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430 \u0438\u043b\u0438 \u0438\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0430\u044f \u043d\u0430\u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f (\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430, \u0432\u044b\u0431\u043e\u0440 \u043e\u043f\u043e\u0440\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430) \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u0443\u044e, \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u0443\u044e \u0438\u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432. \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0441\u043b\u0438\u044f\u043d\u0438\u0435\u043c \u0438\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u042d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>\u0421 \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u0443\u0437\u044b\u0440\u044c\u043a\u043e\u043c, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c, \u0434\u0435\u043b\u043e \u043e\u0431\u0441\u0442\u043e\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0430\u043c\u044b\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430, \u043b\u0438\u0448\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0432 \u0435\u0433\u043e. \u042f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0441 \u043a\u0440\u0430\u0442\u043a\u0438\u043c \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>bubbleSort.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import {   select,   put,   race,   take,   takeLatest } from 'redux-saga\/effects';  import { startSorting, setNewParams, setPause } from \".\/sorting\";  \/\/ \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 const SPEED_MULTIPLIER = 80;  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \/\/ \u0438 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f function* bubbleSortHelper() {   const { array, arrayLength } = yield select(({ arraySettings }) => ({     array: arraySettings.array,     arrayLength: arraySettings.arrayLength   }));    yield startSorting();    \/\/ \u0433\u043e\u043d\u043a\u0430 \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438   const { success } = yield race({     success: bubbleSort(array, arrayLength),     canceled: take('COMPARISON\/RESET')   });    \/\/ \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438   if(success) {     yield put({ type: 'COMPARISON\/TOGGLE_SORT', value: false });   } }  \/\/ \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 function* bubbleSort(array, arrayLength) {    \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432   const completedElements = [];    for(let step = 0; step &lt; arrayLength - 1; step++) {     for(let compareIndex = 0; compareIndex &lt; arrayLength - 1 - step; compareIndex++) {        \/\/ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432,       \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442       yield put({ type: 'COMPARISON\/SET_ACTIVE_ELEMENTS', value: [compareIndex, compareIndex + 1] });        \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438       yield setPause(SPEED_MULTIPLIER);        const left = array[compareIndex];       const right = array[compareIndex + 1];        if(left  > right) {         const params = {           [compareIndex]:  right,           [compareIndex + 1]: left         };          array[compareIndex] = right;         array[compareIndex + 1] = left;          \/\/ \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043f\u0443\u0442\u0451\u043c \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432         yield setNewParams(params);          \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u043b\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438         yield setPause(SPEED_MULTIPLIER);       }     }      \/\/ \u0432 \u043a\u043e\u043d\u0446\u0435 \u0446\u0438\u043a\u043b\u0430 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a     completedElements.push(arrayLength - 1 - step);      \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435     yield put({ type: 'COMPARISON\/SET_SORTED_ELEMENTS', value: completedElements });   }    \/\/ \u0432 \u043a\u043e\u043d\u0446\u0435 \u0432\u0441\u0435\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c   yield put({ type: 'COMPARISON\/SET_SORTED_ELEMENTS', value: [0, ...completedElements] });    \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c true \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0446\u0438\u043a\u043b\u0430   return true }  \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c bubbleSortHelper \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 SORTING\/BUBBLE_SORT export default [   takeLatest('SORTING\/BUBBLE_SORT', bubbleSortHelper), ];<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0432 <code>index.js<\/code>.<\/p>\n<p>\u0412\u043d\u0435\u0441\u0438\u0442\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e resetArray \u0432 \u0444\u0430\u0439\u043b\u0435 <code>controls.js<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>controls.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">function* resetArray() {   const arrayLength = yield select(({ arraySettings }) => arraySettings.arrayLength);    yield all([     put({ type: 'COMPARISON\/RESET' }),     put({ type: 'ARRAY\/SET_ARRAY', value: createArray(arrayLength) })   ]); }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u044b\u0431\u043e\u0440\u0430 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0414\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <code>&lt;Array \/><\/code> \u0438 <code>&lt;Bar \/><\/code> \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u0445 \u043a \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n<details class=\"spoiler\">\n<summary>array\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { useEffect } from \"react\"; import { shallowEqual, useDispatch, useSelector } from \"react-redux\";  import Bar from '.\/bar';  import styles from '.\/styles';  const WIDTH_MULTIPLIER = window.screen.width;  const ACTIVE_COLOR = '#ff5555'; const SORTED_COLOR = '#4ed26c'; const AUXILIARY_COLOR = '#bd93f9'; const DEFAULT_COLOR = '#ffb86c';  const resetArray = () => ({ type: 'CONTROLS\/RESET_ARRAY' });  const Array = () => {   const {     activeElements,     auxiliaryElements,     sortedElements   } = useSelector(({ comparison }) => ({     activeElements: comparison.activeElements,     auxiliaryElements: comparison.auxiliaryElements,     sortedElements: comparison.sortedElements   }), shallowEqual);   const array = useSelector(({ arraySettings }) => arraySettings.array);    const dispatch = useDispatch();   const createArray = () => dispatch(resetArray());    useEffect(() => {     createArray()   }, []);    const barWidth = WIDTH_MULTIPLIER \/ array.length || 0;    return (     &lt;div className={ styles.array }>       {         array.map((height, index) => {             const barColor = sortedElements.includes(index) &amp;&amp; SORTED_COLOR               || activeElements.includes(index) &amp;&amp; ACTIVE_COLOR               || auxiliaryElements.includes(index) &amp;&amp; AUXILIARY_COLOR               || DEFAULT_COLOR;              return (               &lt;Bar                 key={ index }                 width={ barWidth }                 height={ height }                 color={ barColor }               \/>             )           }         )       }     &lt;\/div>   ); }  export default Array;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>bar\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import styles from '.\/styles';  const Bar = ({ width, height, color }) => {   const barStyles = {     height: `${ height }px`,     width: `${ width }px`,     backgroundColor: color   };    return &lt;div className={ styles.bar } style={ barStyles } \/>; }  export default Bar;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u043e\u043c\u0438\u043c\u043e \u0441\u0430\u043c\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u044f\u0432\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435, \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438.<\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0421\u0435\u0439\u0447\u0430\u0441 \u043a \u043d\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Button \/><\/code>. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>controls<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 \u043d\u0451\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 <code>sortButtons<\/code>. \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u044c\u0442\u0435 \u0434\u0432\u0430 \u043f\u0443\u0441\u0442\u044b\u0445 \u0444\u0430\u0439\u043b\u0430 \u0434\u043b\u044f \u043a\u043e\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;SortButtons \/><\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u0431\u0443\u0434\u0443\u0449\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043f\u0443\u0441\u0442\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u044d\u0442\u043e\u0442 \u043a\u043e\u0434:<\/p>\n<details class=\"spoiler\">\n<summary>sortButtons\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { useDispatch, useSelector } from \"react-redux\";  import { Button } from \"shared\";  import styles from '.\/styles'  const bubbleSort = () => ({ type: 'SORTING\/BUBBLE_SORT' });  const SortButtons = () => {   const dispatch = useDispatch();    const onBubbleSort = () => dispatch(bubbleSort());    return(     &lt;div className={ styles.buttons }>       &lt;Button         text=\"\u041f\u0443\u0437\u044b\u0440\u044c\u043a\u043e\u043c\"         onClick={ onBubbleSort }       \/>     &lt;\/div>   ); };  export default SortButtons;<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u044d\u043a\u0448\u0435\u043d\u0430 SORTING\/BUBBLE_SORT. \u0414\u0430\u043b\u0435\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043b\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442\u044c \u044d\u043a\u0448\u043d. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u043d\u0435\u0435 \u0441\u0430\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>sortButtons\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.buttons   margin-left 3.2rem<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u044c <code>&lt;Controls \/><\/code> \u043f\u0440\u044f\u043c\u043e \u043f\u043e\u0441\u043b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u0431\u0440\u043e\u0441\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>controls\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ ...  &lt;div className={ styles.controls__buttons }>   &lt;ResetButton \/>   &lt;SortButtons \/> &lt;\/div>  \/\/ ...<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u044f\u0434\u043e\u043c \u0441\u043e \u0441\u0431\u0440\u043e\u0441\u043e\u043c \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043a\u043d\u043e\u043f\u043a\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435, \u0442\u043e \u044d\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0448\u0430\u0433\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1b8\/9b3\/907\/1b89b39076e6dd25b0412b1c36652913.png\" width=\"3770\" height=\"2338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1b8\/9b3\/907\/1b89b39076e6dd25b0412b1c36652913.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f. \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0434\u0435\u043b\u0430\u0435\u0442 \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0442\u043e, \u0447\u0442\u043e \u043e\u0442 \u043d\u0435\u0433\u043e \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c: \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u043f\u043e\u043f\u0430\u0440\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043d\u0430 \u043e\u0434\u0438\u043d \u0448\u0430\u0433 \u043a \u043f\u0440\u0430\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435. \u041a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u044d\u0442\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e!<\/p>\n<h3>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u043b\u0438\u043d\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438<\/h3>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435, \u043a\u043e\u0433\u0434\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u0430, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0435\u043d\u0430\u0434\u043e\u043b\u0433\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412\u0435\u0434\u044c \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0435\u043b\u0435\u0435, \u0435\u0441\u043b\u0438 \u0431\u044b \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u0438\u043d\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u0440\u044f\u043c\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430. \u0421\u0435\u0439\u0447\u0430\u0441 \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0442, \u0432\u0435\u0434\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u0438\u043d\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u041e\u0431\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430. \u0417\u043d\u0430\u0447\u0438\u0442, \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>&lt;RangeInput \/><\/code> \u0432 <code>shared<\/code> \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043f\u043e \u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>&lt;input type=\u201drange\u201d \/><\/code>. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 \u043d\u0451\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 <code>rangeInput<\/code>. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<details class=\"spoiler\">\n<summary>rangeInput\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import classnames from \"classnames\/bind\";  import styles from '.\/styles';  const cn = classnames.bind(styles);  const RangeInput = ({   value,   title,   min,   max,   disabled,   wrapperClassName,   onValueChange }) => {   const onInput = (value) => {     if (disabled) {       return     }      onValueChange(value);   };    return(     &lt;div className={ cn('wrapper', wrapperClassName) }>       { title &amp;&amp; &lt;div className={ styles.title }>{ title }&lt;\/div> }       &lt;input         type='range'         value={ value }         min={ min }         max={ max }         onInput={ (event) => onInput(Number(event.target.value)) }         className={ cn('range', { disabled }) }       \/>     &lt;\/div>   ); };  export default RangeInput;<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u043e\u0431\u0451\u0440\u0442\u043a\u0438, \u0444\u043b\u0430\u0433, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0439, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043d\u0438\u043c \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438 \u043a\u043e\u043b\u0431\u044d\u043a \u0434\u043b\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>rangeInput\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">@import '~constants'  $thumb()   box-shadow .1rem .1rem .1rem $grey   border .1rem solid $grey   height 1.6rem   width 1.4rem   border-radius .5rem   background $cyan   cursor pointer   -webkit-appearance none  $track()   width 100%   height 1rem  .wrapper   width 24.8rem   display flex   flex-direction column  .title   padding-left .4rem   margin-bottom .4rem   font-size 1.2rem   color #8c8c8c  .range   margin 0   height 1.2rem   -webkit-appearance none   width 100%   border .1rem solid $grey   border-radius .5rem    &amp;:focus     outline none    &amp;::-webkit-slider-thumb     $thumb()    &amp;::-moz-range-track     $track()    &amp;::-moz-range-thumb     $thumb()    &amp;::-ms-thumb     $thumb()    &amp;::-ms-track     $track()  .disabled   background-color #edeeee   border-color #edeeee   color #a7a8a9   cursor not-allowed<\/code><\/pre>\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0432 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e \u0438\u043c\u043f\u043e\u0440\u0442 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 <code>index.js<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0433\u043e\u0442\u043e\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041d\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u0441 \u0441\u0430\u0433\u0430\u043c\u0438 <code>controls.js<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>controls.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ ...  function* setArrayLength({ value }) {   yield put({ type: 'ARRAY\/SET_LENGTH', value })   yield resetArray(); }  export default [   takeLatest('CONTROLS\/RESET_ARRAY', resetArray),   takeLatest('CONTROLS\/SET_ARRAY_LENGTH', setArrayLength) ];<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u0438\u043d\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0443\u0436\u0435 \u043d\u043e\u0432\u0443\u044e \u0434\u043b\u0438\u043d\u0443. \u0421\u0430\u0433\u0430 setArrayLength \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 CONTROLS\/SET_ARRAY_LENGTH.<\/p>\n<\/div>\n<\/details>\n<p>\u0417\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>controls<\/code> \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 \u043d\u0435\u0439 \u043f\u0430\u043f\u043a\u0443 <code>lengthInput<\/code>. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>&lt;LengthInput \/><\/code> \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u0438\u043d\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<details class=\"spoiler\">\n<summary>lengthInput\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { useDispatch, useSelector } from \"react-redux\";  import { RangeInput } from 'shared';  import styles from '.\/styles';  const setArrayLength = value => ({ type: 'CONTROLS\/SET_ARRAY_LENGTH', value });  const LengthInput = () => {   const arrayLength = useSelector(({ arraySettings }) => arraySettings.arrayLength);   const inProgress = useSelector(({ comparison }) => comparison.inProgress);    const dispatch = useDispatch();    const onChangeLength = length => dispatch(setArrayLength(length));    return(     &lt;RangeInput       value={ arrayLength }       title=\"\u0414\u043b\u0438\u043d\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\"       min={ 15 }       max={ 180 }       disabled={ inProgress }       wrapperClassName={ styles.range }       onValueChange={ onChangeLength }     \/>   ); };  export default LengthInput;<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u044d\u043a\u0448\u0435\u043d\u0430 CONTROLS\/SET_ARRAY_LENGTH. \u0414\u0430\u043b\u0435\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043b\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u043f\u0443\u0442\u0430 \u0438 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442\u044c \u044d\u043a\u0448\u043d. \u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u0438\u043c \u0438\u0437 \u0441\u0442\u043e\u0440\u0430. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u0438\u0442\u044c \u0444\u043b\u0430\u0433 inProgress, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043b\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u0438\u043d\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0430.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>lengthInput\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.range   width 38rem   margin-right 3rem<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0414\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;SortingSpeed \/><\/code>. \u041d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0441 <code>lengthInput<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 <code>controls<\/code> \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 <code>sortingSpeed<\/code> \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>sortingSpeed\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { useDispatch, useSelector } from \"react-redux\";  import { RangeInput } from \"shared\";  const changeSpeed = value => ({ type: 'COMPARISON\/SET_SORTING_SPEED', value });  const SortingSpeed = () => {   const sortingSpeed = useSelector(({ comparison }) => comparison.sortingSpeed);    const dispatch = useDispatch();    const onChangeSpeed = multiplier => dispatch(changeSpeed(multiplier));    return(     &lt;RangeInput       value={ sortingSpeed }       title=\"\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438\"       min={ 1 }       max={ 20 }       onValueChange={ onChangeSpeed }     \/>   ); };  export default SortingSpeed;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0433\u043e\u0442\u043e\u0432\u044b. \u0427\u0442\u043e\u0431\u044b \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b \u043a \u0443\u0436\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438 \u0444\u0430\u0439\u043b \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>&lt;Controls \/><\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>controls\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">\/\/ ...  &lt;div className={ styles.controls }>   &lt;div className={ styles.controls__buttons }>     &lt;ResetButton \/>     &lt;SortButtons \/>   &lt;\/div>   &lt;div className={ styles.controls__sliders }>     &lt;LengthInput \/>     &lt;SortingSpeed \/>   &lt;\/div> &lt;\/div>  \/\/ ...<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>controls\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.controls  \/\/ ...    &amp;__sliders     display flex<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0423 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u0438\u043d\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044f \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u043c\u044b \u0438\u0437\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043a\u043e\u0434\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/352\/b3b\/355\/352b3b3556cfa8891fbe3235333188b6.png\" width=\"3770\" height=\"2338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/352\/b3b\/355\/352b3b3556cfa8891fbe3235333188b6.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0434\u043b\u0438\u043d\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0410 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u044f\u043c\u043e \u043f\u043e \u0445\u043e\u0434\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c \u0441\u0442\u0430\u043b\u043e<strong> <\/strong>\u043f\u0440\u043e\u0449\u0435 \u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043d\u0438\u043c \u044f\u0432\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435!<\/p>\n<h3>\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432<\/h3>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u0436\u0435 \u0432 \u043f\u043e\u043b\u043d\u043e\u043c \u043e\u0431\u044a\u0451\u043c\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u0435\u043b\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u044d\u0442\u0430\u043f\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u044b\u043b\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u044b.<\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u044f \u0445\u043e\u0447\u0443 \u0432\u043d\u0435\u0441\u0442\u0438 \u043b\u0438\u0448\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432: \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435\u043c, \u0441\u043b\u0438\u044f\u043d\u0438\u0435\u043c \u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u0412\u0441\u0451 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0435 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0431\u043e\u0447\u0438\u043c\u0438 \u0441\u0430\u0433\u0430\u043c\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438.<\/p>\n<p><strong>\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435\u043c<\/strong>. \u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u0443\u0437\u044b\u0440\u044c\u043a\u043e\u0432\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u0412 \u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0447\u0430\u0441\u0442\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0446\u0438\u043a\u043b \u0438 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u0441\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438\u0445 \u0432 \u043c\u0435\u0441\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043e\u0431\u043c\u0435\u043d\u0430. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u0432\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b: \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u043a \u043f\u0440\u0430\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u043a \u043b\u0435\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0438\u0439:<\/p>\n<details class=\"spoiler\">\n<summary>sorting\/shakerSort.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import {   select,   put,   race,   take,   takeLatest } from 'redux-saga\/effects';  import { startSorting, setNewParams, setPause } from \".\/sorting\";  \/\/ \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 const SPEED_MULTIPLIER = 60;  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \/\/ \u0438 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f function* shakerSortHelper() {   const { array, arrayLength } = yield select(({ arraySettings }) => ({     array: arraySettings.array,     arrayLength: arraySettings.arrayLength   }));    yield startSorting();    \/\/ \u0433\u043e\u043d\u043a\u0430 \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438   const { success } = yield race({     success: shakerSort(array, arrayLength),     canceled: take('COMPARISON\/RESET')   });    \/\/ \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441   if(success) {     yield put({ type: 'COMPARISON\/TOGGLE_SORT', value: false });   } }  \/\/ \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u0432\u0430\u043f\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 function* swap(array, i, j) {   const params = {     [i]: array[j],     [j]: array[i]   };    let temp = array[i];   array[i] = array[j];   array[j] = temp;    yield setNewParams(params);   yield setPause(SPEED_MULTIPLIER); }  \/\/ \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 function* shakerSort(array, arrayLength) {    \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432   let completedElements = [];    \/\/ \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430   let left = 0;   let right = arrayLength - 1;    \/\/ \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438   \/\/ \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u044d\u0442\u043e \u043a\u0440\u0430\u0439\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c - \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b,   \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438 \u0437\u0430 \u0432\u0440\u0435\u043c\u044f \u043e\u0434\u043d\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0441\u043e \u0441\u0432\u043e\u0438\u043c \u0441\u043e\u0441\u0435\u0434\u043e\u043c   let leftSwap = 0;   let rightSwap = arrayLength - 1;    while (left &lt; right) {     for (let i = left; i &lt; right; i++) {        \/\/ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432,       \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442       yield put({ type: 'COMPARISON\/SET_ACTIVE_ELEMENTS', value: [i, i + 1] });       yield setPause(SPEED_MULTIPLIER);        if (array[i] > array[i + 1]) {         yield swap(array, i, i + 1);          \/\/ \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043f\u043e\u043c\u0435\u044f\u043b\u0441\u044f \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0441 \u0441\u043e\u0441\u0435\u0434\u043e\u043c \u0441\u043f\u0440\u0430\u0432\u0430         rightSwap = i;       }     }      \/\/ \u0435\u0441\u043b\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043c\u0435\u0441\u0442\u0430\u043c\u0438, \u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d     if(rightSwap === right) {       completedElements = Array.from(Array(arrayLength).keys());        yield put({ type: 'COMPARISON\/SET_SORTED_ELEMENTS', value: completedElements });        return true;     }      \/\/ \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430     \/\/ \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0430\u0432\u0435\u0435 \u043d\u0435\u0433\u043e \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438     right = rightSwap;      \/\/ \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u043e\u043f\u043e\u0440\u043d\u043e\u0433\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043e\u043f\u043e\u0440\u043d\u043e\u0433\u043e \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438     completedElements = [...Array.from(Array(left).keys()), ...Array.from(Array(arrayLength).keys()).splice(right + 1)];      yield put({ type: 'COMPARISON\/SET_SORTED_ELEMENTS', value: completedElements });      \/\/ \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443, \u0434\u0432\u0438\u0433\u0430\u044f\u0441\u044c \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e     for (let i = right; i > left; i--) {       yield put({ type: 'COMPARISON\/SET_ACTIVE_ELEMENTS', value: [i - 1, i] });       yield setPause(SPEED_MULTIPLIER);        if (array[i] &lt; array[i - 1]) {         yield swap(array, i, i - 1);          \/\/ \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043f\u043e\u043c\u0435\u044f\u043b\u0441\u044f \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0441 \u0441\u043e\u0441\u0435\u0434\u043e\u043c \u0441\u043b\u0435\u0432\u0430         leftSwap = i;       }     }      \/\/ \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430     \/\/ \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043b\u0435\u0432\u0435\u0435 \u043d\u0435\u0433\u043e \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438     left = leftSwap;      \/\/ \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u043e\u043f\u043e\u0440\u043d\u043e\u0433\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043e\u043f\u043e\u0440\u043d\u043e\u0433\u043e \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438     completedElements = [...Array.from(Array(left).keys()), ...Array.from(Array(arrayLength).keys()).splice(right + 1)];      yield put({ type: 'COMPARISON\/SET_SORTED_ELEMENTS', value: completedElements });   }    \/\/ \u0432 \u043a\u043e\u043d\u0446\u0435 \u0446\u0438\u043a\u043b\u0430 \u0432\u0435\u0441\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d   yield put({ type: 'COMPARISON\/SET_SORTED_ELEMENTS', value: Array.from(Array(arrayLength).keys()) });    return true; }  \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c shakerSortHelper \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 SORTING\/SHAKER_SORT export default [   takeLatest('SORTING\/SHAKER_SORT', shakerSortHelper), ];<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u0441\u043b\u0438\u044f\u043d\u0438\u0435\u043c<\/strong>. \u0414\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u041c\u0435\u0442\u043e\u0434 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043f\u043e\u0440\u043e\u0432\u043d\u0443, \u043f\u043e\u043a\u0430 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043b\u043a\u0438\u0445, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0417\u0430\u0442\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0435 \u0441\u043b\u0438\u044f\u043d\u0438\u0435, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430 \u043f\u0440\u043e\u0445\u043e\u0434 \u0446\u0438\u043a\u043b\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043e\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u041d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0430 \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0448\u0430\u0433\u0435.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u044b\u0445 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>sorting\/mergeSort.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import {   select,   put,   race,   take,   takeLatest } from 'redux-saga\/effects';  import {   startSorting,   setNewParams,   setPause,   afterSuccessSorting } from \".\/sorting\";  \/\/ \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 const SPEED_MULTIPLIER = 100;  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \/\/ \u0438 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f function* mergeSortHelper() {   const array = yield select(({ arraySettings }) => arraySettings.array);    yield startSorting();    \/\/ \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0434\u0432\u0435 \u043a\u043e\u043f\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e   const mainArray = array.slice();   const auxiliaryArray = array.slice();    \/\/ \u0433\u043e\u043d\u043a\u0430 \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438   const { success } = yield race({     success: mergeSort(mainArray, auxiliaryArray, 0, array.length - 1),     canceled: take('COMPARISON\/RESET')   });    \/\/ \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0441\u0430\u0433\u0443   if(success) {     yield afterSuccessSorting();   } }  function* mergeSort(   mainArray,   auxiliaryArray,   startIdx,   endIdx ) {   if (startIdx === endIdx) return;    \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430   const middleIdx = Math.floor((startIdx + endIdx) \/ 2);    \/\/ \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0434\u043b\u044f \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438   yield mergeSort(auxiliaryArray, mainArray, startIdx, middleIdx);    \/\/ \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438   yield mergeSort(auxiliaryArray, mainArray, middleIdx + 1, endIdx);    \/\/ \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430   yield sort(mainArray, auxiliaryArray, startIdx, middleIdx, endIdx);    return true; }  function* sort(   mainArray,   auxiliaryArray,   startIdx,   middleIdx,   endIdx ) {    \/\/ \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435   let k = startIdx;    \/\/ \u043d\u0430\u0447\u0430\u043b\u043e \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438   let i = startIdx;    \/\/ \u043d\u0430\u0447\u0430\u043b\u043e \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438   let j = middleIdx + 1;    \/\/ \u0438\u0434\u0451\u043c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u043e \u043b\u0435\u0432\u043e\u0439 \u0438 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u044f\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430   while (i &lt;= middleIdx &amp;&amp; j &lt;= endIdx) {      \/\/ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432,     \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442     yield put({ type: 'COMPARISON\/SET_ACTIVE_ELEMENTS', value: [i,j] });     yield setPause(SPEED_MULTIPLIER);      \/\/ \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b     \/\/ \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443     if (auxiliaryArray[i] &lt;= auxiliaryArray[j]) {       yield setNewParams({ [k]: auxiliaryArray[i] });       mainArray[k++] = auxiliaryArray[i++];     } else {       yield setNewParams({ [k]: auxiliaryArray[j] });       mainArray[k++] = auxiliaryArray[j++];     }   }    \/\/ \u0435\u0441\u043b\u0438 \u0432 \u043b\u0435\u0432\u043e\u0439 \u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u044f\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043d\u0435\u0437\u0430\u0442\u0440\u043e\u043d\u0443\u0442\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b   \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0438\u0445 \u043d\u0430 \u0441\u0432\u043e\u0438 \u043c\u0435\u0441\u0442\u0430 \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435   while (i &lt;= middleIdx) {     yield put({ type: 'COMPARISON\/SET_ACTIVE_ELEMENTS', value: [i] });     yield setPause(SPEED_MULTIPLIER);     yield setNewParams({ [k]: auxiliaryArray[i] });     mainArray[k++] = auxiliaryArray[i++];   }    while (j &lt;= endIdx) {     yield put({ type: 'COMPARISON\/SET_ACTIVE_ELEMENTS', value: [j] });     yield setPause(SPEED_MULTIPLIER);     yield setNewParams({ [k]: auxiliaryArray[j] });     mainArray[k++] = auxiliaryArray[j++];   } }  \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c mergeSortHelper \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 SORTING\/MERGE_SORT export default [   takeLatest('SORTING\/MERGE_SORT', mergeSortHelper), ];<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430<\/strong>. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u0438 \u043e\u0434\u0438\u043d \u0438\u0445 \u0441\u0430\u043c\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432. \u041e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u00ab\u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0439-\u0438-\u0432\u043b\u0430\u0441\u0442\u0432\u0443\u0439\u00bb. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u043e\u0440\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043c\u0435\u043d\u044c\u0448\u0438\u0435 \u043b\u0438\u0431\u043e \u0440\u0430\u0432\u043d\u044b\u0435 \u043e\u043f\u043e\u0440\u043d\u043e\u043c\u0443, \u0432\u043b\u0435\u0432\u043e \u043e\u0442 \u043d\u0435\u0433\u043e, \u0430 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043d\u0435\u0433\u043e \u2014 \u0432\u043f\u0440\u0430\u0432\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0442\u0430 \u0436\u0435 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>sorting\/quickSort.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import {   select,   put,   race,   take,   takeLatest } from 'redux-saga\/effects';  import {   startSorting,   setNewParams,   setPause,   afterSuccessSorting } from \".\/sorting\";  \/\/ \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 const SPEED_MULTIPLIER = 100;  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \/\/ \u0438 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f function* quickSortHelper() {   const { array, arrayLength } = yield select(({ arraySettings }) => ({     array: arraySettings.array,     arrayLength: arraySettings.arrayLength   }));    yield startSorting();    \/\/ \u0433\u043e\u043d\u043a\u0430 \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438   const { success } = yield race({     success: quickSort(array, 0, arrayLength - 1),     canceled: take('COMPARISON\/RESET')   });    \/\/ \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0441\u0430\u0433\u0443   if(success) {     yield afterSuccessSorting();   } }  \/\/ \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u0432\u0430\u043f\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 function* swap(items, firstIndex, secondIndex){   const params = {     [firstIndex]: items[secondIndex],     [secondIndex]: items[firstIndex]   };    let temp = items[firstIndex];   items[firstIndex] = items[secondIndex];   items[secondIndex] = temp;    yield setNewParams(params);   yield setPause(SPEED_MULTIPLIER); }  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 function* partition(items, left, right, pivot) {    \/\/ \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043d\u0430 \u043b\u0435\u0432\u044b\u0439 \u0438 \u043f\u0440\u0430\u0432\u044b\u0439 \u043a\u043e\u043d\u0435\u0446 \u043c\u0430\u0441\u0441\u0438\u0432\u0430   let i = left;   let j = right;    while (i &lt;= j) {      \/\/ \u0441\u043b\u0435\u0432\u0430-\u043d\u0430\u043f\u0440\u0430\u0432\u043e     \/\/ \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u043f\u043e\u0440\u043d\u043e\u0433\u043e, \u0442\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0435\u0433\u043e \u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c     while (items[i] &lt; pivot) {       i++;     }      \/\/ \u0441\u043f\u0440\u0430\u0432\u0430-\u043d\u0430\u043b\u0435\u0432\u043e     \/\/ \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043f\u043e\u0440\u043d\u043e\u0433\u043e, \u0442\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0435\u0433\u043e \u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c     while (items[j] > pivot) {       j--;     }      \/\/ \u043c\u0435\u043d\u044f\u0435\u043c \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0435\u0441\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f     if (i &lt;= j) {        \/\/ \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445       yield put({ type: 'COMPARISON\/SET_ACTIVE_ELEMENTS', value: [i,j] });        yield setPause(SPEED_MULTIPLIER);       yield swap(items, i, j);       yield setPause(SPEED_MULTIPLIER);        i++;       j--;     }   }    \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u0430\u0441\u0441\u0438\u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0430 \u043f\u043e\u0434\u043c\u0430\u0441\u0441\u0438\u0432\u0430   return i; }  \/\/ \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 function* quickSort(items, left, right) {    \/\/ \u0431\u0435\u0440\u0451\u043c \u0441\u0440\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043a\u0430\u043a \u043e\u043f\u043e\u0440\u043d\u044b\u0439   const pivotIndex = Math.floor((right + left) \/ 2);   const pivot = items[pivotIndex];    \/\/ \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u043f\u043e\u0440\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c   yield put({ type: 'COMPARISON\/SET_AUXILIARY_ELEMENTS', value: [pivotIndex] });    \/\/ \u0438\u043d\u0434\u0435\u043a\u0441, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u0430\u0441\u0441\u0438\u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0432\u0430 \u043f\u043e\u0434\u043c\u0430\u0441\u0441\u0438\u0432\u0430   const index = yield partition(items, left, right, pivot);    \/\/ \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0434\u043b\u044f \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438   if (left &lt; index - 1) {     yield quickSort(items, left, index - 1);   }    \/\/ \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438   if (index &lt; right) {     yield quickSort(items, index, right);   }    return items; }  \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c quickSortHelper \u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 SORTING\/QUICK_SORT export default [   takeLatest('SORTING\/QUICK_SORT', quickSortHelper), ];<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u043e\u0432\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0438\u0445 \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0441\u0430\u0433\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>index.js<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>index.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { all } from 'redux-saga\/effects';  import controls from '.\/controls' import bubbleSort from \".\/sorting\/bubbleSort\"; import shakerSort from \".\/sorting\/shakerSort\"; import mergeSort from \".\/sorting\/mergeSort\"; import quickSort from \".\/sorting\/quickSort\";  export default function* rootSaga() {   yield all([     ...controls,     ...bubbleSort,     ...shakerSort,     ...mergeSort,     ...quickSort   ]); };<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;SortButtons \/><\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>sortButtons\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { useDispatch } from \"react-redux\";  import { Button } from \"shared\";  import styles from '.\/styles'  const bubbleSort = () => ({ type: 'SORTING\/BUBBLE_SORT' }); const mergeSort = () => ({ type: 'SORTING\/MERGE_SORT' }); const shakerSort = () => ({ type: 'SORTING\/SHAKER_SORT' }); const quickSort = () => ({ type: 'SORTING\/QUICK_SORT' });  const SortButtons = () => {   const dispatch = useDispatch();    const onClick = action => dispatch(action())    return(     &lt;div className={ styles.buttons }>       &lt;Button         text=\"\u041f\u0443\u0437\u044b\u0440\u044c\u043a\u043e\u043c\"         onClick={ () => onClick(bubbleSort) }       \/>       &lt;Button         text=\"\u041f\u0435\u0440\u0435\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435\u043c\"         onClick={ () => onClick(shakerSort) }       \/>       &lt;Button         text=\"\u0421\u043b\u0438\u044f\u043d\u0438\u0435\u043c\"         onClick={ () => onClick(mergeSort) }       \/>       &lt;Button         text=\"\u0411\u044b\u0441\u0442\u0440\u0430\u044f\"         onClick={ () => onClick(quickSort) }       \/>     &lt;\/div>   ); };  export default SortButtons;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d1c\/060\/b1a\/d1c060b1a9fad7c5b2682c7d8b0ae504.png\" width=\"3770\" height=\"2338\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d1c\/060\/b1a\/d1c060b1a9fad7c5b2682c7d8b0ae504.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0447\u0435\u0442\u044b\u0440\u0435, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u043d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u043e\u0441\u043c\u0435\u043b\u044e\u0441\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0432\u0438\u0434\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u0433\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c, \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0443 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0432\u043d\u043e \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c. \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0443\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f!<\/p>\n<h3>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>\u041e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043c\u043e\u0435\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0435\u0441\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e\u00a0\u0432 <a href=\"https:\/\/github.com\/SemenovSY\/sorting_visualizer\">\u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d <a href=\"https:\/\/semenovsy.github.io\/sorting_visualizer\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/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\/company\/domclick\/blog\/689064\/\"> https:\/\/habr.com\/ru\/company\/domclick\/blog\/689064\/<\/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<p>\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0447\u0438\u0442\u0430\u043b\u0438! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0421\u0435\u0440\u0433\u0435\u0439 \u0421\u0435\u043c\u0435\u043d\u043e\u0432, \u044f frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0414\u043e\u043c\u043a\u043b\u0438\u043a. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043c\u043d\u043e\u0433\u0438\u043c \u0438\u0437 \u0432\u0430\u0441 \u0442\u0435\u043c\u0430 \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439. \u0423\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0432\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u043e\u0439\u0434\u0451\u0442\u0435 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0435 \u044d\u0442\u0430\u043f\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043f\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u0432\u043e\u044e \u043a\u043e\u043f\u0438\u043b\u043a\u0443 \u043f\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ol>\n<li>\n<p>JavaScript \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432 \u043c\u0438\u0440\u0435 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ru.reactjs.org\/\">React<\/a> \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 JavaScript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \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.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/redux.js.org\/\">Redux<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/redux-saga.js.org\/\">Redux-saga<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0432 Redux.<\/p>\n<\/li>\n<\/ol>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u0443\u0441\u0442\u043e\u0435 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0443\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442, \u0441\u043b\u0435\u0434\u0443\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0432 readme, \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043f\u043e <a href=\"https:\/\/github.com\/SemenovSY\/base-config\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n<h3>\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438<\/h3>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438, \u0442\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u043e\u0438\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0447\u0438\u0441\u0435\u043b. \u0410 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u043c\u043e\u0436\u043d\u043e, \u0441\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0440\u0430\u0437\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b, \u0432\u044b\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434. \u0422\u0430\u043a \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0436\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u044d\u0442\u043e\u0442 \u0440\u044f\u0434 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>\u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <code>modules<\/code>. \u0412 \u043d\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u0435\u0440\u0432\u044b\u043c\u0438 \u0438\u0437 \u0442\u0430\u043a\u043e\u0432\u044b\u0445 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Array \/><\/code> \u0438 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Bar \/><\/code>, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u041d\u0430\u0447\u043d\u0451\u043c \u0441\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e.<\/p>\n<p>\u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0442 \u043d\u0435\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u044d\u0442\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b \u0441\u0442\u043e\u043b\u0431\u0435\u0446, \u0432\u044b\u0441\u043e\u0442\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u043e\u0439 \u0438 \u0448\u0438\u0440\u0438\u043d\u043e\u0439. \u0428\u0438\u0440\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0442\u0430\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0441\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u043b\u0438\u043d\u0438\u044e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f \u0437\u0430 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u044b. \u041a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 \u0448\u0438\u0440\u0438\u043d\u044b \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<details class=\"spoiler\">\n<summary>bar\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import styles from '.\/styles';  const Bar = ({ width, height }) => {   const barStyles = {     height: `${ height }px`,     width: `${ width }px`   };    return &lt;div className={ styles.bar } style={ barStyles } \/>; }  export default Bar;<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443. \u0411\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u0417\u043d\u0430\u0447\u0438\u0442, \u0438\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u043b\u043e\u043a\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0442\u0438\u043b\u0435\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c width \u0438 height \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>bar\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.bar   background-color #ffb86c   border .1rem solid #44475a<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0446\u0432\u0435\u0442 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0432\u0448\u0438\u0439\u0441\u044f. \u0418 \u0442\u043e\u043d\u043a\u0430\u044f \u0440\u0430\u043c\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u041b\u0443\u0447\u0448\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u0439 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 1px \u0438 \u0446\u0432\u0435\u0442, \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0439 \u0446\u0432\u0435\u0442\u0443 \u0437\u0430\u0434\u043d\u0435\u0433\u043e \u0444\u043e\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 \u0444\u0430\u0439\u043b\u0430\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f rem, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;html \/>. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 1\/10, \u0442.\u0435. 1rem = 10px.<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u043e\u0442\u043e\u0432. \u0421\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0443.  \u041e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>&lt;Array \/><\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: \u0432\u044b\u0432\u043e\u0434 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u0436\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;Bar \/><\/code>. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043d\u0438\u0445:<\/p>\n<details class=\"spoiler\">\n<summary>array\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { createArray } from 'utils';  import Bar from '.\/bar';  import styles from '.\/styles';  const WIDTH_MULTIPLIER = window.screen.width; const ARRAY = createArray(30); const BAR_WIDTH = WIDTH_MULTIPLIER \/ ARRAY.length;  const Array = () => (   &lt;div className={ styles.array }>     {       ARRAY.map((height, index) => (           &lt;Bar             key={ index }             width={ BAR_WIDTH }             height={ height }           \/>         )       )     }   &lt;\/div> );  export default Array;<\/code><\/pre>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u044b. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0451 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c. \u041f\u043e\u0441\u043b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 WIDTH_MULTIPLIER \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u041e\u043d\u0430 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u043e\u043d\u0438 \u0440\u043e\u0432\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438\u0441\u044c \u0432 \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u0437\u043e\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0441\u0434\u0432\u0438\u0433\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u0432. \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0435 ARRAY \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u0435\u0440\u043d\u0443\u0432\u0448\u0435\u0435\u0441\u044f \u0438\u0437 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e \u043d\u0435\u043c\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434 map, \u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0442\u043e\u043b\u0431\u0435\u0446, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u044b\u0441\u043e\u0442\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0438\u0440\u0438\u043d\u044b &#8212; \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u0435 \u0432\u044b\u0448\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b BAR_WIDTH.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>array\/styles.styl<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"css\">.array   height 65rem   width 100%   display flex   justify-content center   align-items flex-end<\/code><\/pre>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432. \u0422\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 <code>utils<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 <code>src<\/code>. \u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0435\u0451 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>createArray.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);  export const createArray = arrayLength => {   const array = [];    for (let i = 0; i &lt; arrayLength; i++) {     array.push(randomIntFromInterval(30, 600));   }    return array; }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f createArray \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u044b, \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c\u0438 \u0447\u0438\u0441\u043b\u0430\u043c\u0438. \u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0438\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430.<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>index.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { createArray } from \".\/createArray\";  export {   createArray }<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b \u0438\u043c\u043f\u043e\u0440\u0442\u0430\/\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u0441\u0451 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0432\u044b\u0432\u043e\u0434\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043b\u0438\u0448\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;App \/><\/code>. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>app.jsx<\/code> \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0438\u0442\u0435 \u0435\u0433\u043e \u043a \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n<details class=\"spoiler\">\n<summary>app.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import Array from '.\/modules\/array'  const App = () => {   return &lt;Array \/>; };  export default App;<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u044b\u0445 \u0448\u0430\u0433\u043e\u0432. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c \u0441\u0430\u043c\u0438. \u041f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:3000\/\">localhost:3000<\/a> \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 \u044d\u0442\u043e:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432. \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442!<\/p>\n<h3>\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0430\u0434\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0441\u0430\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0431\u0443\u0434\u0443\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438.<\/p>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043d\u0435\u043c\u043d\u043e\u0433\u0443 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0438. \u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <strong>redux<\/strong> \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 <strong>redux-saga<\/strong>.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443, \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0430\u0434\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>reducers<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 \u043d\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>arraySettings.js<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>arraySettings.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const initial = {   array: [],   arrayLength: 30 };  export default (state = initial, { type, value }) => {   switch (type) {     case 'ARRAY\/SET_ARRAY':       return { ...state, array: value };     case 'ARRAY\/SET_LENGTH':       return { ...state, arrayLength: value };     default:       return state;   } };<\/code><\/pre>\n<p>\u0412 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0418 \u044d\u043a\u0448\u0435\u043d\u044b, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0434\u043b\u0438\u043d\u044b.<\/p>\n<\/div>\n<\/details>\n<p>\u0412\u0430\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u044b \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0439\u043b <code>index.js<\/code> \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>index.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { combineReducers } from 'redux';  import arraySettings from '.\/arraySettings'  export default combineReducers({   arraySettings });<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0430\u0433\u0438 (saga) \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>sagas<\/code><strong> <\/strong>\u0438 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>controls.js<\/code>. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0451, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f:<\/p>\n<details class=\"spoiler\">\n<summary>controls.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import {   put,   select,   takeLatest } from 'redux-saga\/effects';  import { createArray } from \"utils\";  function* resetArray() {   const arrayLength = yield select(({ arraySettings }) => arraySettings.arrayLength);    yield put({ type: 'ARRAY\/SET_ARRAY', value: createArray(arrayLength) }); }  export default [   takeLatest('CONTROLS\/RESET_ARRAY', resetArray) ];<\/code><\/pre>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u0441\u0442\u043e\u0440\u0443 \u0438 \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0418 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u043a\u043e\u043c\u0430\u044f \u043d\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044f createArray. \u041f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0441\u0430\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u043f\u0440\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 CONTROLS\/RESET_ARRAY.<\/p>\n<\/div>\n<\/details>\n<p>\u0418 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0430\u0433\u0443 \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0441\u0430\u0433\u0438 \u0432 <code>index.js<\/code>:<\/p>\n<details class=\"spoiler\">\n<summary>index.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { all } from 'redux-saga\/effects';  import controls from '.\/controls'  export default function* rootSaga() {   yield all([     ...controls   ]); };<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b \u0438\u043c\u043f\u043e\u0440\u0442\u0430\/\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0441\u0430\u0433. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 shared<strong> <\/strong>\u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src. \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u044e\u0434\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043d\u043e\u043f\u043e\u043a:<\/p>\n<details class=\"spoiler\">\n<summary>button\/index.jsx<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import classnames from 'classnames\/bind';<\/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-338609","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/338609","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=338609"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/338609\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=338609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=338609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=338609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}