{"id":284974,"date":"2017-04-14T04:31:26","date_gmt":"2017-04-14T00:31:26","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=284974"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=284974","title":{"rendered":"\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0445 React + Redux \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/b58\/8ec\/9ac\/b588ec9acf7b41b196ba8dc9735eb943.png\"\/><br \/>  \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 Redux \u0441 <a href=\"http:\/\/redux.js.org\/docs\/basics\/ExampleTodoList.html\">Todo List Project<\/a>. \u042d\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:  <\/p>\n<pre><code>actions\/   todos.js components\/   todos\/     TodoItem.js     ... constants\/   actionTypes.js reducers\/   todos.js index.js rootReducer.js<\/code><\/pre>\n<p>  \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0442\u0430\u043a\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0439, \u0432\u0435\u0434\u044c \u043e\u043d\u0430 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u0438\u0445 backend MVC-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432:  <\/p>\n<pre><code>app\/   controllers\/   models\/   views\/<\/code><\/pre>\n<p>  \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u043a\u0430\u043a \u0434\u043b\u044f MVC, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f React+Redux \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:  <\/p>\n<ol>\n<li>\u0421 \u0440\u043e\u0441\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u044c\u044e \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u044d\u043a\u0448\u043d\u0430\u043c\u0438 \u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430\u043c\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e<\/li>\n<li>\u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u043a\u0448\u043d\u0430 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0432 \u0440\u0435\u0434\u044e\u0441\u0435\u0440. \u0415\u0441\u043b\u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u0435\u043b\u0438\u043a\u043e, \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u044c IDE \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437 \u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e<\/li>\n<li>\u0422\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0442\u0432\u043e\u0440\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0435 \u0432 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430\u0445<\/li>\n<\/ol>\n<p>  \u041d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u0430\u0432\u0442\u043e\u0440\u044b(<a href=\"https:\/\/jaysoo.ca\/2016\/02\/28\/organizing-redux-application\/\">\u0440\u0430\u0437<\/a>, <a href=\"https:\/\/medium.com\/front-end-hacking\/structuring-react-and-redux-applications-255361d24f84\">\u0434\u0432\u0430<\/a>, <a href=\"https:\/\/medium.com\/collaborne-engineering\/organizing-redux-projects-7f12483f761a\">\u0442\u0440\u0438<\/a>) \u0441\u043e\u0432\u0435\u0442\u0443\u044e\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u00ab\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438\u00bb (<i>by feature<\/i>).<a name=\"habracut\"><\/a><\/p>\n<p>  \u041c\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0430\u0432\u043d\u043e \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0442\u0430\u043a\u043e\u043c\u0443-\u0436\u0435 \u0432\u044b\u0432\u043e\u0434\u0443 \u0432 \u0431\u0435\u043a\u044d\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435., \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0435 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u0442\u0430\u043a\u0436\u0435. \u0412 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043d\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0434\u043b\u044f \u0441\u043b\u043e\u0432\u0430 feature \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u043c\u044b \u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u043c \u0441\u043b\u043e\u0432\u043e \u00ab\u043c\u043e\u0434\u0443\u043b\u044c\u00bb. \u0412 ES6 \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u043c\u043e\u0434\u0443\u043b\u044c\u00bb \u0438\u043c\u0435\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c \u0438\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0432\u043e\u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u00ab\u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u00bb. \u0412 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u043e, \u043a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u043c\u043e\u0434\u0443\u043b\u044c\u00bb \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u043d\u044f\u0442\u0435\u043d \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438.<\/p>\n<h3>\u041c\u043e\u0434\u0443\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/h3>\n<p>  <\/p>\n<blockquote><p>\u041c\u043e\u0301\u0434\u0443\u043b\u044c \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b.<br \/>  \u041c\u043e\u0301\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0301\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043a\u0430\u043a \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0434\u0447\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c.  <\/p><\/blockquote>\n<p>  \u041c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c:  <\/p>\n<ol>\n<li>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u0437 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043f\u0430\u043f\u043a\u0443. \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043d\u043e \u043b\u0438\u0448\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/li>\n<li>\u041c\u043e\u0434\u0443\u043b\u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0414\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043e\u0442 \u00ab\u044f\u0434\u0440\u0430\u00bb \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/li>\n<li>\u042f\u0434\u0440\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0435 API, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0435 \u043c\u043e\u0434\u0443\u043b\u044f\u043c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0432\u0432\u043e\u0434\u0430\/\u0432\u044b\u0432\u043e\u0434\u0430 \u0438 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI.<\/li>\n<\/ol>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f  <\/p>\n<pre><code>app\/   modules\/      Module1\/          \u2026          index.js      Module2\/          \u2026          index.js      \u2026      index.js   core\/       \u2026   index.js   routes.js   store.js<\/code><\/pre>\n<p>  \u0412 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c <code>AppContainer<\/code>, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f <code>react-hot-reload<\/code>, \u0441\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <code>Root<\/code>. <code>Root<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <a href=\"https:\/\/github.com\/reactjs\/react-redux\/blob\/master\/docs\/api.md#provider-store\">Provider<\/a>, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0432\u044f\u0437\u044c \u0441 <code>redux<\/code> \u0438 <code>react-router<\/code>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>indexRoute<\/code>. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 npm-\u043f\u0430\u043a\u0435\u0442 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0442.\u043a. \u043e\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<h3>index.js<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">import 'isomorphic-fetch' import '.\/styles\/app.sass'  import React from 'react' import ReactDOM from 'react-dom'  import { AppContainer } from 'react-hot-loader' import browserHistory from '.\/core\/history' import Root from '.\/core\/containers\/Root' import store from '.\/store'; import routes from '.\/routes';     ReactDOM.render(     &lt;AppContainer&gt;       &lt;Root store={store}             history={browserHistory}             routes={routes}\/&gt;     &lt;\/AppContainer&gt;,     document.getElementById('root'));    import React from 'react' import PropTypes from 'prop-types' import {Provider} from &quot;react-redux&quot; import {Router} from &quot;react-router&quot;  core\/containers\/Root  const Root = props =&gt; ( &lt;Provider store={props.store}&gt;   &lt;Router history={props.history} routes={props.routes} \/&gt; &lt;\/Provider&gt;)  Root.propTypes = {   history: PropTypes.object.isRequired,   routes: PropTypes.array.isRequired,   store: PropTypes.object.isRequired }  export default Root <\/code><\/pre>\n<p>  \u041f\u043e\u043a\u0430 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e (store) \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u043e\u0443\u0442\u0438\u043d\u0433. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:  <\/p>\n<pre><code class=\"javascript\">export const defineModule = (   title,   path,   component,   reducer = (state = {}) =&gt; state,   onEnter = null) =&gt; {     return {title, path, component, reducer, onEnter} }<\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 <code>modules<\/code> \u043c\u043e\u0434\u0443\u043b\u044c \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.  <\/p>\n<pre><code>modules\/      Profile\/          Profile.js          index.js<\/code><\/pre>\n<p>  <\/p>\n<h3>Profile\/index.js<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">import React from 'react' import PropTypes from 'prop-types' const Profile = default (props) =&gt; (&lt;h2&gt;\u041f\u0440\u0438\u0432\u0435\u0442, {props.name}&lt;\/h2&gt;) Profile.propTypes = {   name: PropTypes.string.isRequired,  const SET_NAME = 'Profile\/SetName' const reducer (state = {name: \u2018\u0412\u0430\u0441\u0438\u043b\u0438\u0439\u2019}, action) =&gt; {    switch(action.type){         case SET_NAME: {\u2026state, name: action.name}    } } export default defineModule('\u041b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u0431\u0438\u043d\u0435\u0442', '\/profile, Profile)<\/code><\/pre>\n<p>  \u0418 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 modules\/index.js  <\/p>\n<pre><code class=\"javascript\">import Profile from '.\/Profile  export default {   Profile }<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u042d\u0442\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c, \u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438, \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0440\u0443\u0447\u043d\u0443\u044e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. \u0414\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\/\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435 \u0442\u0430\u043a \u0441\u043b\u043e\u0436\u043d\u043e.<\/p><\/blockquote>\n<p>  \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e CamelCase \u0438 \/ \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u0445 \u044d\u043a\u0448\u043d\u043e\u0432. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439:  <\/p>\n<pre><code class=\"javascript\">export const combineName = (...parts) =&gt; parts   .filter(x =&gt; x && toLowerCamelCase(x) != DATA)   .map(x =&gt; toUpperCamelCase(x))   .reduce((c,n) =&gt; c ? c + '\/' + n : n)  const Module = 'Profile' const SET_NAME = combineName(Module, 'SetName')<\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u0431\u0438\u043d\u0435\u0442 \u043a \u0440\u043e\u0443\u0442\u0435\u0440\u0443 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u043b\u0435\u0439\u0430\u0443\u0442. \u0421 \u043b\u0435\u0439\u0430\u0443\u0442\u043e\u043c \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u0421\u043e\u0437\u0434\u0430\u0435\u043c <code>core\/components\/App.js<\/code>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Navigation<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u0436\u0435 \u043c\u0430\u0441\u0441\u0438\u0432, \u0447\u0442\u043e \u0438 \u0432 \u0440\u043e\u0443\u0442\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.  <\/p>\n<pre><code class=\"javascript\">import React from 'react' import PropTypes from 'prop-types' import Navigation from '.\/Navigation'  const App = props =&gt; (   &lt;div&gt;     &lt;h1&gt;{props.title}&lt;\/h1&gt;     &lt;Navigation routes={props.routes}\/&gt;     {props.children}   &lt;\/div&gt;)  App.propTypes = {   title: PropTypes.string.isRequired,   routes: PropTypes.array.isRequired }  export default App<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0420\u043e\u0443\u0442\u0435\u0440<\/h3>\n<p>  \u0410 \u0441 \u0440\u043e\u0443\u0442\u0435\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043c\u043e\u0434\u0443\u043b\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e URL. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>\/profile<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u0440\u043e\u0444\u0438\u043b\u0435, \u0430 <code>\/profile\/transactions<\/code> \u2013 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043b\u0438\u0447\u043d\u043e\u043c \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0435, \u0430 \u043d\u0438\u0436\u0435 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0434\u0432\u0443\u043c\u044f \u0442\u0430\u0431\u0430\u043c\u0438: \u00ab\u043e\u0431\u0449\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f\u00bb \u0438 \u00ab\u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438\u00bb.<br \/>  \u0422\u043e\u0433\u0434\u0430, \u043b\u043e\u0433\u0438\u0447\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0440\u043e\u0443\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0439:  <\/p>\n<pre><code class=\"javascript\">  &lt;Router&gt;       &lt;Route path=&quot;\/profile&quot; component={Profile}&gt;          &lt;Route path=&quot;\/info&quot; component={Info}\/&gt;           &lt;Route path=&quot;\/transactions&quot; component={Transaction}\/&gt;       &lt;\/ Route &gt;   &lt;\/Router&gt;<\/code><\/pre>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Profile<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0442\u0430\u0431\u044b, \u0430 <code>Info<\/code> \u0438 <code>Transactions<\/code> \u2013 \u0434\u0435\u0442\u0430\u043b\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0434\u0443\u043b\u044f \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u044e\u0449\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043a\u0430\u0437 \u0438 \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0437\u0430\u043a\u0430\u0437\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438).<\/p>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043c \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0418\u0437 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u0430\u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>defineModule<\/code> \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u0430\u043a\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0440\u043e\u0443\u0442\u043e\u0432 \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043b\u044e\u0447 <code>children<\/code>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0443\u044e \u0444\u0430\u0439\u043b\u0443 <code>modules\/index.js<\/code>. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u0434\u043e\u043b\u0436\u0435\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f <code>Index<\/code>. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <code>IndexRoute<\/code>. \u0422\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u00ab\u043b\u0438\u0447\u043d\u043e\u043c\u0443 \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0443\u00bb.<\/p>\n<p>  \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f <a href=\"https:\/\/fsharpforfunandprofit.com\/posts\/monoids-without-tears\/\">\u043c\u043e\u043d\u043e\u0438\u0434\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u043e\u0439 \u0441\u043f\u0438\u0441\u043a\u0430<\/a> \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u043b\u043e\u0441\u043a\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442.  <\/p>\n<pre><code class=\"javascript\">export const flatModules = modules =&gt; Object.keys(modules)   .map(x =&gt; {     const res = Array.isArray(modules[x]) ? modules[x] : [modules[x]]     res.forEach(y =&gt; y[MODULE] = x)     return res   })   .reduce((c,n) =&gt; c.concat(n))<\/code><\/pre>\n<p>  \u0412 Router \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <code>Route<\/code>, \u043d\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0447\u0435\u043c \u043c\u044b \u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f.  <\/p>\n<pre><code class=\"javascript\">export const getRoutes = (modules, store, App, Home, title = '\u0413\u043b\u0430\u0432\u043d\u0430\u044f') =&gt;   [     {       path: '\/',       title: title,       component: App,       indexRoute: {         component: Home       },        childRoutes: flatModules(modules)         .map(x =&gt; {           if (!x.component) {             throw new Error('Component for module ' + x + ' is not defined')           }            const route = {             path: x.path,             title: x.title,             component: x.component,             onEnter: x.onEnter               ? routeParams =&gt; {                 x.onEnter(routeParams, store.dispatch)               }               : null           }            if(x.children){             if(!x.children.Index || !typeof(x.children.Index.component)){               throw new Error('Component for index route of &quot;' + x.title + '&quot; is not defined')             }              route.indexRoute = {               component: x.children.Index.component             }              route.childRoutes = Object.keys(x.children).map(y =&gt; {               const cm = x.children[y]               if (!cm.component) {                 throw new Error('Component for module ' + x + '\/' + y + ' is not defined')               }                return {                 path: x.path + cm.path,                 title: cm.title,                 component: cm.component,                 onEnter: cm.onEnter                   ? routeParams =&gt; {                     cm.onEnter(routeParams, store.dispatch)                   }                   : null               }             })           }            return route         })     }   ] <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0432 \u0444\u0430\u0439\u043b <code>modules\/index.js<\/code> \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0440\u043e\u0443\u0442\u044b. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0440\u043e\u0443\u0442 \u0438\u043b\u0438 \u0437\u0430\u043f\u0443\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f\u0445, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043d\u0435\u0434\u0432\u0443\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435.<\/p>\n<h3>onEnter<\/h3>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044c \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e onEnter. \u0412 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0440\u043e\u0443\u0442, \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0443\u0442\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f store.dispatch. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <a href=\"https:\/\/facebook.github.io\/react\/docs\/react-component.html#componentdidmount\">componentDidMount<\/a> \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043a\u0438\u043d\u0443\u0442\u044c \u0432 store \u0441\u043e\u0431\u044b\u0442\u0438\u0435 (\u0438\u043b\u0438 Promise, \u0435\u0441\u043b\u0438 \u0432\u044b, \u043a\u0430\u043a \u044f, \u0440\u0435\u0448\u0438\u043b\u0438 \u0432\u044b\u043a\u0438\u043d\u0443\u0442\u044c <a href=\"https:\/\/github.com\/redux-saga\/redux-saga\">redux-saga<\/a> \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c <a href=\"https:\/\/github.com\/gaearon\/redux-thunk\">redux-thunk<\/a>), \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0435, \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c state, \u0432\u044b\u0437\u0432\u0430\u0432 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u044b \u043a \u0441\u0442\u043e\u0440\u0443<br \/>  \u041d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f DevTools \u0438 thunk. \u041e\u0431\u044a\u044f\u0432\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u0440\u0430.  <\/p>\n<pre><code class=\"javascript\">const composeEnhancers = typeof window === 'object'   && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__   ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})   : compose;  const createAppStore = (reducer, ...middleware) =&gt; {   middleware.push(thunk)   const store = createStore(     reducer,     composeEnhancers(applyMiddleware(...middleware)))   return store }  export default createAppStore<\/code><\/pre>\n<p>  \u0418 \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0445 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439:  <\/p>\n<pre><code class=\"javascript\"> export const combineModuleReducers = modules =&gt; {   const reducers = {}   const flat = flatModules(modules)   for (let i = 0; i &lt; flat.length; i++) {     const red = flat[i].reducer     if (typeof(red) !== 'function') {       throw new Error('Module ' + i + ' does not define reducer!')     }      reducers[flat[i][MODULE]] = red      if(typeof(flat[i].children) === 'object'){       for(let j in flat[i].children){         if(typeof(flat[i].children[j].reducer) !== 'function'){           throw new Error('Module ' + j + ' does not define reducer!')         }          reducers[j] = flat[i].children[j].reducer       }     }   }    return reducers }<\/code><\/pre>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0435\u043d\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438, \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u043e\u0432, \u0430 \u043d\u0435 \u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c, \u043d\u043e \u043c\u043d\u0435 \u043f\u043e \u0434\u0443\u0448\u0435 \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u0415\u0441\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438, \u043f\u0440\u043e\u0449\u0435 \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0440\u043e\u0443\u0442\u0435\u0440 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<h3>\u0421\u043e\u0432\u043c\u0435\u0449\u0430\u0435\u043c \u0432\u0441\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 store.js<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">export default createAppStore(combineReducers(combineModuleReducers(modules)))<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043c\u043e\u0434\u0443\u043b\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0435\u0439\u0442\u0430, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0430\u044f \u0441 \u043a\u043b\u044e\u0447\u0435\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>modules\/index.js<\/code>. \u0414\u043b\u044f \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 <code>Profile<\/code><br \/>  \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0443 \u043c\u0435\u043d\u044f \u0432\u0441\u0435. \u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u00ab\u044f\u0434\u0440\u0430\u00bb \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e API \u043c\u043e\u0434\u0443\u043b\u044f\u043c \u2013 \u0442\u0435\u043c\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<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:\/\/habrahabr.ru\/post\/326484\/\"> https:\/\/habrahabr.ru\/post\/326484\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/b58\/8ec\/9ac\/b588ec9acf7b41b196ba8dc9735eb943.png\"\/><br \/>  \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 Redux \u0441 <a href=\"http:\/\/redux.js.org\/docs\/basics\/ExampleTodoList.html\">Todo List Project<\/a>. \u042d\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:  <\/p>\n<pre><code>actions\/   todos.js components\/   todos\/     TodoItem.js     ... constants\/   actionTypes.js reducers\/   todos.js index.js rootReducer.js<\/code><\/pre>\n<p>  \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0442\u0430\u043a\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0439, \u0432\u0435\u0434\u044c \u043e\u043d\u0430 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u0438\u0445 backend MVC-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432:  <\/p>\n<pre><code>app\/   controllers\/   models\/   views\/<\/code><\/pre>\n<p>  \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u043d\u0435\u0443\u0434\u0430\u0447\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u043a\u0430\u043a \u0434\u043b\u044f MVC, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f React+Redux \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:  <\/p>\n<ol>\n<li>\u0421 \u0440\u043e\u0441\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u044c\u044e \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u044d\u043a\u0448\u043d\u0430\u043c\u0438 \u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430\u043c\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e<\/li>\n<li>\u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u043a\u0448\u043d\u0430 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0432 \u0440\u0435\u0434\u044e\u0441\u0435\u0440. \u0415\u0441\u043b\u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u0435\u043b\u0438\u043a\u043e, \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u044c IDE \u0432\u0432\u0435\u0440\u0445\/\u0432\u043d\u0438\u0437 \u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e<\/li>\n<li>\u0422\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0442\u0432\u043e\u0440\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0435 \u0432 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430\u0445<\/li>\n<\/ol>\n<p>  \u041d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u0430\u0432\u0442\u043e\u0440\u044b(<a href=\"https:\/\/jaysoo.ca\/2016\/02\/28\/organizing-redux-application\/\">\u0440\u0430\u0437<\/a>, <a href=\"https:\/\/medium.com\/front-end-hacking\/structuring-react-and-redux-applications-255361d24f84\">\u0434\u0432\u0430<\/a>, <a href=\"https:\/\/medium.com\/collaborne-engineering\/organizing-redux-projects-7f12483f761a\">\u0442\u0440\u0438<\/a>) \u0441\u043e\u0432\u0435\u0442\u0443\u044e\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u00ab\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438\u00bb (<i>by feature<\/i>).<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-284974","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/284974","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=284974"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/284974\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=284974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=284974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=284974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}