{"id":282838,"date":"2016-12-21T18:25:04","date_gmt":"2016-12-21T15:25:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=282838"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=282838","title":{"rendered":"\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u043a\u0443\u0440\u0441 Redux + websockets \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0435\u0440\u0430"},"content":{"rendered":"<p>\u042d\u0442\u043e \u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0435\u0434\u0443 \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0435\u0440\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u044f \u0440\u0435\u0448\u0430\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (single page app).<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0435\u043b\u044c\u044e \u043c\u043e\u0435\u0433\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (\u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e <del>\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e<\/del> \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430) \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441-\u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. \u041c\u044b (\u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438) \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u0448 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u2014 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c. \u041a\u043e\u0433\u0434\u0430 (\u0432 \u0433\u0438\u043f\u043e\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435) \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435 \u043f\u0440\u043e\u0444\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0434\u0435\u043b\u0430, \u043e\u043d\u0438 \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 &quot;\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e&quot;.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0440\u043e\u043b\u0438 \u0443\u0447\u0435\u0431\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430 \u0447\u0430\u0442\u0430 \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u0443\u043c\u043e\u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c &quot;\u0431\u043e\u0442\u043e\u043c&quot;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 WebSocket. \u0411\u043e\u0442 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u044d\u0445\u043e \u0432\u0430\u0448\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 (\u043c\u044b \u0442\u0443\u0442 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435).<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u041c\u043d\u0435 \u0434\u043b\u044f \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u0438\u043c\u0435\u043b\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u043d\u0438\u0435 javascript (\u0442\u0443\u0442 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 js \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 ES-2015)<\/li>\n<li>\u0437\u043d\u0430\u043d\u0438\u0435 reactjs (\u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f <a href=\"https:\/\/facebook.github.io\/react\/tutorial\/tutorial.html\"><a href=\"https:\/\/facebook.github.io\/react\/tutorial\/tutorial.html\">https:\/\/facebook.github.io\/react\/tutorial\/tutorial.html<\/a><\/a>)<\/li>\n<li>\u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u043e websockets (\u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e, \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u044d\u0442\u043e \u0443\u043c\u0435\u043b)<\/li>\n<li>\u0437\u043d\u0430\u043d\u0438\u0435 \u0438 \u0443\u043c\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c bootstrap (\u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <a href=\"http:\/\/getbootstrap.com\/css\/\"><a href=\"http:\/\/getbootstrap.com\/css\/\">http:\/\/getbootstrap.com\/css\/<\/a><\/a>)<\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"chto-ispolzuem\">\u0427\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c<\/h2>\n<p>  <\/p>\n<p>Redux \u2014 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/redux.js.org\/\"><a href=\"http:\/\/redux.js.org\">http:\/\/redux.js.org<\/a><\/a>. \u041f\u043e-\u0440\u0443\u0441\u0441\u043a\u0438 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u044f \u043b\u0438\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c <a href=\"https:\/\/rajdee.gitbooks.io\/redux-in-russian\/content\/docs\/introduction\/index.html\"><a href=\"https:\/\/rajdee.gitbooks.io\/redux-in-russian\/content\/docs\/introduction\/index.html\">https:\/\/rajdee.gitbooks.io\/redux-in-russian\/content\/docs\/introduction\/index.html<\/a><\/a>.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0430\u0442\u044c\u044e exec64, \u043e\u043d\u0430 \u0441\u0442\u0430\u043b\u0430 \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0442\u0443\u0442\u0440\u0438\u0430\u043b <a href=\"https:\/\/exec64.co.uk\/blog\/websockets_with_redux\/\"><a href=\"https:\/\/exec64.co.uk\/blog\/websockets_with_redux\/\">https:\/\/exec64.co.uk\/blog\/websockets_with_redux\/<\/a><\/a>.<\/p>\n<p>  <\/p>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 react \u0438 redux \u043e\u0442 <a href=\"https:\/\/github.com\/erikras\/react-redux-universal-hot-example\"><a href=\"https:\/\/github.com\/erikras\/react-redux-universal-hot-example\">https:\/\/github.com\/erikras\/react-redux-universal-hot-example<\/a><\/a>(\u043e\u043d \u043d\u0430\u043c \u0441\u043f\u0430\u0441\u0430\u0435\u0442 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e-\u043c\u0435\u0441\u044f\u0446\u044b \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0432\u044f\u0437\u043a\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e js \u043f\u0440\u043e\u0435\u043a\u0442\u0430)<\/p>\n<p>  <\/p>\n<h2 id=\"motivaciya\">\u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435 \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 Python. \u041f\u043e\u0433\u043e\u0434\u0438-\u043f\u043e\u0433\u043e\u0434\u0438 \u0443\u0445\u043e\u0434\u0438\u0442\u044c &#8230;<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0443\u0436\u043d\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0435 \u0434\u0438\u043a\u0442\u043e\u0432\u0430\u043b\u0430 \u043c\u043d\u0435 \u0432\u044b\u0431\u043e\u0440 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/li>\n<li>\u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 (\u043c\u043d\u0435 \u043d\u0435\u0447\u0435\u0433\u043e \u0431\u044b\u043b\u043e \u0442\u0435\u0440\u044f\u0442\u044c \u0438\u043b\u0438 \u0431\u044b\u0442\u044c \u0447\u0435\u043c-\u0442\u043e \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u044b\u043c &quot;\u0441\u0442\u0430\u0440\u044b\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u0435\u043c\u0430\u043c&quot;)<\/li>\n<li>\u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u044f \u0443\u0436\u0435 \u0441\u0430\u043c \u0432\u044b\u0431\u0435\u0440\u0443, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c)<\/li>\n<li>\u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/li>\n<li>\u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u043e\u0431\u043c\u0435\u043d \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u0441\u0435\u0440\u0432\u0435\u0440-\u043a\u043b\u0438\u0435\u043d\u0442 (\u0430 \u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440) \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/li>\n<li>\u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043d\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438 \u043d\u0430 \u0442\u0435\u043c\u0443 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c js (\u0443\u0441\u0442\u0430\u0440\u0435\u043b\u043e, \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430)<\/li>\n<li>JQuery (<del>\u0443\u0436\u0435 \u043d\u0435 \u043c\u043e\u0433\u0443 \u0422\u0410\u041a \u0438\u0437\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0442\u0430\u043a \u0441\u0432\u043e\u0439 \u043c\u043e\u0437\u0433<\/del>, \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438\u2026 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u043e\u0432)<\/li>\n<li>Angular (\u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 2 \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u043f\u0443\u0433\u043d\u0443\u043b \u0438 \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u0437\u0430 \u043e\u0442\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043b\u0430\u0437\u0435\u0439\u043a\u0438 \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u043c\u043e\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438)<\/li>\n<li>Socket.io (\u0442\u0430\u043c \u0432\u0441\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b node.js \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u0432\u044b \u0443\u0436\u0435 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435, \u043d\u043e \u043e\u043d \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043d\u0430 node, \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0435\u0437 \u0442\u0440\u0435\u0442\u044c\u0438\u0445 \u043b\u0438\u0446)<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412\u044b\u0431\u0440\u0430\u043d\u043e \u0432 \u0438\u0442\u043e\u0433\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>React (\u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\/\u043f\u0440\u043e\u0441\u0442\u043e + babel = \u0434\u0435\u043b\u0430\u0435\u0442 \u044f\u0437\u044b\u043a \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c)<\/li>\n<li>Redux (\u0438\u043c\u043f\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <del>\u0435\u0434\u0438\u043d\u043e\u0439 \u043f\u043e\u043c\u043e\u0439\u043a\u0438<\/del> \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430)<\/li>\n<li>WebSockets (\u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u043d\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0443\u043a\u0438, \u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0443\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u044f)<\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"uproscheniya-i-dopuscheniya\">\u0423\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0438\u044f:<\/h2>\n<p>  <\/p>\n<ul>\n<li>\u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/li>\n<li>\u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 WebSocket-\u0430\u0445<\/li>\n<li>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Websocket Echo (<a href=\"https:\/\/www.websocket.org\/echo.html\"><a href=\"https:\/\/www.websocket.org\/echo.html\">https:\/\/www.websocket.org\/echo.html<\/a><\/a>)<\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"soderzhanie\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<ul>\n<li>\u0427\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u0430\u044f. \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/li>\n<li>\u0427\u0430\u0441\u0442\u044c \u0432\u0442\u043e\u0440\u0430\u044f. \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0427\u0430\u0441\u0442\u044c \u0442\u0440\u0435\u0442\u044c\u044f. \u0418\u0437\u0443\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 Redux<\/li>\n<li>\u0427\u0430\u0441\u0442\u044c \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f. \u041e\u0436\u0438\u0432\u043b\u044f\u0435\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e<\/li>\n<li>\u0427\u0430\u0441\u0442\u044c \u043f\u044f\u0442\u0430\u044f. \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0447\u0430\u0442<\/li>\n<li>\u0427\u0430\u0441\u0442\u044c \u0448\u0435\u0441\u0442\u0430\u044f. \u041c\u0438\u0434\u043b\u0432\u0430\u0440\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"kak-chitat\">\u041a\u0430\u043a \u0447\u0438\u0442\u0430\u0442\u044c<\/h1>\n<p>  <\/p>\n<p>\u041d\u0435 \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u2014 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u044c 1<br \/>  \u0417\u043d\u0430\u0435\u0442\u0435 reactjs \u2014 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u044c 2<br \/>  \u0417\u043d\u0430\u0435\u0442\u0435 redux \u2014 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u0438 3, 4 \u0438 5<br \/>  \u0417\u043d\u0430\u0435\u0442\u0435 \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 middleware \u0432 redux \u2014 \u0441\u043c\u0435\u043b\u043e \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0447\u0430\u0441\u0442\u044c 6 \u0438 \u0434\u0430\u043b\u0435\u0435 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<p>  <\/p>\n<h1 id=\"chast-pervaya-pervonachalnaya-nastroyka-nastroyka-stranicy\">\u0427\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u0430\u044f. \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/h1>\n<p>  <\/p>\n<h2 id=\"nastroyka-okruzheniya\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u0435\u043d node.js \u0438 npm.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0430\u0432\u0438\u043c node.js \u0441 \u0441\u0430\u0439\u0442\u0430 <a href=\"https:\/\/nodejs.org\"><a href=\"https:\/\/nodejs.org\">https:\/\/nodejs.org<\/a><\/a> \u2014 \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 6\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0432\u0435\u0440\u0441\u0438\u044e 7 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u2014 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<br \/>  npm \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 node.js<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c npm \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c node.js (\u0434\u043b\u044f windows \u0432\u0441\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0431\u0435\u0437 npm)<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">sudo npm cache clean -f sudo npm install -g n sudo n stable<\/code><\/pre>\n<p>  <\/p>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">node -v<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"nastroyka-react-redux-universal-hot-example\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 react-redux-universal-hot-example<\/h2>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0432\u044b\u043b\u043e\u0436\u0435\u043d\u043e \u0432 <a href=\"https:\/\/github.com\/erikras\/react-redux-universal-hot-example\">react-redux-universal-hot-example<\/a>, \u0442\u0430\u043c \u0436\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435.<br \/>  \u0422\u0443\u0442 \u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0438 \u0440\u0430\u0437\u0430\u0440\u0445\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u0430\u0440\u0445\u0438\u0432\/\u0444\u043e\u0440\u043a\u0430\u0435\u043c\/\u0447\u0442\u043e-\u0443\u0433\u043e\u0434\u043d\u043e-\u043a\u0430\u043a-\u0432\u0430\u043c-\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f.<\/li>\n<li>\u0427\u0435\u0440\u0435\u0437 node.js command line \u0438\u043b\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u044d\u0442\u0443 \u043f\u0430\u043f\u043a\u0443<\/li>\n<li>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c<\/li>\n<\/ol>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install npm run dev<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a> \u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043e\u043a \u2014 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"sozdaem-novyy-konteyner\">\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/h2>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u043f\u0440\u0430\u0432\u043a\u0443 \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b <a href=\"https:\/\/github.com\/erikras\/react-redux-universal-hot-example\">react-redux-universal-hot-example<\/a>. \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/erikras\/react-redux-universal-hot-example\/blob\/master\/docs\/AddingAPage\/AddingAPage.md\">\u0442\u0443\u0442<\/a>.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">cd .\/src\/containers &amp;&amp; mkdir .\/SocketExample<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"kopiruem-tuda-hellojs-kak-shablon-stranichki\">\u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0442\u0443\u0434\u0430 hello.js \u043a\u0430\u043a \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438<\/h2>\n<p>  <\/p>\n<pre><code class=\"bash\">cp About\/About.js Hello\/SocketExamplePage.js<\/code><\/pre>\n<p>  <\/p>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e Atom, \u043a\u0430\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440-\u0447\u0435\u0433\u043e-\u0443\u0433\u043e\u0434\u043d\u043e \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u043b\u044e\u0448\u043a\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"pravim-skopirovannyy-fayl\">\u041f\u0440\u0430\u0432\u0438\u043c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b<\/h2>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u043f\u043e\u0434 \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u0412\u0432\u043e\u0434\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;p&gt;<\/code>. \u041f\u043e\u0437\u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0432 \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<pre><code>import React, {Component} from 'react'; import Helmet from 'react-helmet';  export default class SocketExamplePage extends Component {   render() {     return (       &lt;div className=&quot;container&quot;&gt;         &lt;h1&gt;Socket Exapmle Page&lt;\/h1&gt;         &lt;Helmet title=&quot;Socket Exapmle Page&quot;\/&gt;         &lt;p&gt;Sockets not connected&lt;\/p&gt;       &lt;\/div&gt;     );   } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"podklyuchaem-sozdannuyu-stranicu\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/h3>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 <code>.\/src\/containers\/index.js<\/code> \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React<\/p>\n<p>  <\/p>\n<pre><code>export SocketExamplePage from '.\/SocketExample\/SocketExamplePage';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 <code>.\/src\/routes.js<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u043f\u0443\u043d\u0442\u0438 <code>\/socketexamplepage<\/code> \u0432 \u043a\u0430\u0440\u0442\u0443 \u0441\u0441\u044b\u043b\u043e\u043a<\/p>\n<p>  <\/p>\n<pre><code>... import {     App,     Chat,     Home,     Widgets,     About,     Login,     LoginSuccess,     Survey,     NotFound,     SocketExamplePage   } from 'containers'; ...       { \/* Routes *\/ }       &lt;Route path=&quot;about&quot; component={About}\/&gt;       &lt;Route path=&quot;login&quot; component={Login}\/&gt;       &lt;Route path=&quot;survey&quot; component={Survey}\/&gt;       &lt;Route path=&quot;widgets&quot; component={Widgets}\/&gt;       &lt;Route path=&quot;socketexamplepage&quot; component={SocketExamplePage}\/&gt; ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 <code>.\/src\/containers\/App\/App.js<\/code>, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u0432 \u043c\u0435\u043d\u044e<\/p>\n<p>  <\/p>\n<pre><code>              &lt;LinkContainer to=&quot;\/socketexamplepage&quot;&gt;                 &lt;NavItem eventKey={99}&gt;Socket Example Page&lt;\/NavItem&gt;               &lt;\/LinkContainer&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c <\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm run dev<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/69935996671fc5dd64062143526d1a00b49afcbd\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/69935996671fc5dd64062143526d1a00b49afcbd\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/69935996671fc5dd64062143526d1a00b49afcbd<\/a><\/a><\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0438\u043c\u0435\u0435\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0420\u0430\u0437\u0434\u0435\u043b \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0421\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430 \u043d\u0430 React \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0417\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0438\u0434\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<blockquote><p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043d\u0430\u0447\u043d\u0435\u043c. \u042f \u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u2014 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u0440\u0443\u0442\u0438\u043b \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435, \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043b \u044d\u043a\u0448\u0435\u043d\u044b \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u043f\u0440\u0438\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043b \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432 reactjs. \u041c\u044b \u0432 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u043f\u0440\u043e\u0449\u0435. \u041c\u0438\u043d\u0443\u0441 \u043c\u043e\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0432 \u0440\u0430\u0437\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0438 &quot;\u043a\u043e\u0441\u0442\u044b\u043b\u0435\u0439&quot;, \u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435. \u0411\u0443\u0434\u0435\u043c \u0440\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438.<\/p><\/blockquote>\n<p>  <\/p>\n<h1 id=\"chast-vtoraya-proektirovanie-buduschego-prilozheniya\">\u0427\u0430\u0441\u0442\u044c \u0432\u0442\u043e\u0440\u0430\u044f. \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h1>\n<p>  <\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043a\u0435\u043b\u0435\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043a\u0430\u043a\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u043d\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 React \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 React, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u0442\u044c\u0441\u044f, \u0430 \u043f\u0440\u044f\u043c\u043e \u0431\u0443\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043d\u0435\u043c\u0443.<\/p>\n<p>  <\/p>\n<p>\u0414\u044d\u043d \u0410\u0431\u0440\u0430\u043c\u043e\u0432 \u043f\u0438\u0441\u0430\u043b \u0432 \u0441\u0432\u043e\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438 \u043a\u0430\u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"itak-nachnem\">\u0418\u0442\u0430\u043a \u043d\u0430\u0447\u043d\u0435\u043c.<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0445\u043e\u0447\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043f\u0440\u044f\u043c\u043e \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u0431\u0435\u0440\u0435\u043c \u0441 \u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0441\u043b\u0435 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>  <\/p>\n<h3 id=\"polzovatelskiy-interfeys-variant-1\">\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 &quot;\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1&quot;<\/h3>\n<p>  <\/p>\n<p>\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0432\u0430 \u043d\u043e\u0432\u044b\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043d\u0430 \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043b\u043e\u0433\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u043a\u0435\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u043c \u043a\u0440\u0430\u0442\u043a\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c. \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0444\u0430\u0439\u043b <code>.\/src\/containers\/SocketExample\/SocketExamplePage.js<\/code>.<\/p>\n<p>  <\/p>\n<pre><code>\/\/ inside render () { return (...) }           &lt;h3&gt;Socket connection log&lt;\/h3&gt;           &lt;textarea             className=&quot;form-control&quot;             rows=&quot;1&quot;             readOnly             placeholder=&quot;Waiting ...&quot;             value=&quot;               index = 2, loaded = true, message = Connected, connected = true               index = 1, loaded = false, message = Connecting..., connected = false&quot;\/&gt;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>index \u2014 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043f\u0438\u0441\u0438 \u043b\u043e\u0433\u0430<\/p>\n<p>  loaded \u2014 \u043f\u0440\u0438\u0437\u043d\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/p>\n<p>  message \u2014 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430-\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430<\/p>\n<p>  connected \u2014 \u043f\u0440\u0438\u0437\u043d\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u043b\u0438 \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443<\/p><\/blockquote>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u043c\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u043f\u0440\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a websocket<\/li>\n<li>\u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043e\u0442 websocket<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code>          &lt;button className=&quot;btn btn-primary btn-sm&quot;&gt;             &lt;i className=&quot;fa fa-sign-in&quot;\/&gt; Connect           &lt;\/button&gt;           &lt;button className=&quot;btn btn-danger btn-sm&quot;&gt;             &lt;i className=&quot;fa fa-sign-out&quot;\/&gt; Disconnect           &lt;\/button&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043b\u043e\u0433\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 <code>-&gt;<\/code> \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f <code>&lt;-<\/code>.<\/p>\n<p>  <\/p>\n<pre><code>\/\/ inside render () { return (...) }       &lt;h3&gt;Message log&lt;\/h3&gt;       &lt;ul&gt;           &lt;li key=&quot;1&quot; className=&quot;unstyled&quot;&gt;             &lt;span className=&quot;glyphicon glyphicon-arrow-right&quot;&gt;&lt;\/span&gt;             Socket string           &lt;\/li&gt;           &lt;li key=&quot;2&quot; className=&quot;unstyled&quot;&gt;             &lt;span className=&quot;glyphicon glyphicon-arrow-left&quot;&gt;&lt;\/span&gt;             [ECHO] Socket string           &lt;\/li&gt;       &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u0438 \u0432\u0432\u043e\u0434 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435<\/p>\n<p>  <\/p>\n<pre><code>      &lt;form className=&quot;form-inline&quot;&gt;         &lt;p&gt;&lt;\/p&gt;         &lt;div className=&quot;form-group&quot;&gt;           &lt;input           className=&quot;form-control input-sm&quot;           type=&quot;text&quot;           ref=&quot;message_text&quot;&gt;&lt;\/input&gt;         &lt;\/div&gt;         &lt;button className=&quot;btn btn-primary btn-sm&quot;&gt;           &lt;i className=&quot;fa fa-sign-in&quot;\/&gt; Send         &lt;\/button&gt;       &lt;\/form&gt;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u041d\u0435 \u043d\u0430\u0436\u0438\u043c\u0430\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 Send<\/p><\/blockquote>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0438 \u0437\u0430\u043a\u043e\u043c\u0438\u0442\u0438\u043c\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/510a59f732a9bf42e070e7f57e970a2307661739\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/510a59f732a9bf42e070e7f57e970a2307661739\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/510a59f732a9bf42e070e7f57e970a2307661739<\/a><\/a><\/p>\n<p>  <\/p>\n<h3 id=\"polzovatelskiy-interfeys-variant-2-komponenty\">\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0412\u0430\u0440\u0438\u0430\u043d\u0442 2. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/h3>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u0432\u0441\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>.\/src\/components<\/code> \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0435 <code>SocketExampleComponents<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0442\u0440\u0438 \u0448\u0430\u0433\u0430:<\/p>\n<p>  <\/p>\n<p>1 \u2014 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0435 <code>SocketConnectionLog.js<\/code><\/p>\n<p>  <\/p>\n<blockquote><p>\u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 div \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0442 \u043d\u0430\u0441 \u044d\u0442\u043e\u0433\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0442 React<\/p><\/blockquote>\n<p>  <\/p>\n<pre><code>import React, {Component} from 'react';  export default class SocketConnectionLog extends Component {   render() {     return (       &lt;div&gt;         &lt;h3&gt;Socket connection log&lt;\/h3&gt;         &lt;textarea           className=&quot;form-control&quot;           rows=&quot;1&quot;           readOnly           placeholder=&quot;Waiting ...&quot;           value=&quot;             index = 2, loaded = true, message = Connected, connected = true             index = 1, loaded = false, message = Connecting..., connected = false&quot;\/&gt;         &lt;button className=&quot;btn btn-primary btn-sm&quot;&gt;           &lt;i className=&quot;fa fa-sign-in&quot;\/&gt; Connect         &lt;\/button&gt;         &lt;button className=&quot;btn btn-danger btn-sm&quot;&gt;           &lt;i className=&quot;fa fa-sign-out&quot;\/&gt; Disconnect         &lt;\/button&gt;       &lt;\/div&gt;     );   } }<\/code><\/pre>\n<p>  <\/p>\n<p>2 \u2014 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>components\/index.js<\/code><\/p>\n<p>  <\/p>\n<pre><code>export SocketConnectionLog from '.\/SocketExampleComponents\/SocketConnectionLog';<\/code><\/pre>\n<p>  <\/p>\n<p>3 \u2014 \u043f\u0440\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>.\/src\/components\/SocketExamplePage.js<\/code> \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u043c\u0438 \u043a\u043e\u0434\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<p>  <\/p>\n<pre><code>import {SocketConnectionLog} from 'components'; \/\/ ...         &lt;SocketConnectionLog \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0442\u0443 \u0436\u0435 \u043f\u0430\u043f\u043a\u0443 <code>.\/src\/components\/SocketExampleComponents<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0442\u0440\u0438 \u0448\u0430\u0433\u0430<\/p>\n<p>  <\/p>\n<p>1 \u2014 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0435 <code>SocketMessageLog.js<\/code><\/p>\n<p>  <\/p>\n<pre><code>import React, {Component} from 'react';  export default class SocketMessageLog extends Component {   render() {     return (       &lt;div&gt;         &lt;h3&gt;Message log&lt;\/h3&gt;         &lt;ul&gt;           &lt;li key=&quot;1&quot; className=&quot;unstyled&quot;&gt;             &lt;span className=&quot;glyphicon glyphicon-arrow-right&quot;&gt;&lt;\/span&gt;             Socket string           &lt;\/li&gt;           &lt;li key=&quot;2&quot; className=&quot;unstyled&quot;&gt;             &lt;span className=&quot;glyphicon glyphicon-arrow-left&quot;&gt;&lt;\/span&gt;             [ECHO] Socket string           &lt;\/li&gt;         &lt;\/ul&gt;         &lt;form className=&quot;form-inline&quot;&gt;           &lt;p&gt;&lt;\/p&gt;           &lt;div className=&quot;form-group&quot;&gt;             &lt;input             className=&quot;form-control input-sm&quot;             type=&quot;text&quot;             ref=&quot;message_text&quot;&gt;&lt;\/input&gt;           &lt;\/div&gt;           &lt;button className=&quot;btn btn-primary btn-sm&quot;&gt;             &lt;i className=&quot;fa fa-sign-in&quot;\/&gt; Send           &lt;\/button&gt;         &lt;\/form&gt;       &lt;\/div&gt;     );   } }<\/code><\/pre>\n<p>  <\/p>\n<p>2 \u2014 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/components\/index.js<\/code><\/p>\n<p>  <\/p>\n<pre><code>export SocketMessageLog from '.\/SocketExampleComponents\/SocketMessageLog';<\/code><\/pre>\n<p>  <\/p>\n<p>3 \u2014 \u043f\u0440\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u043c\u0438 \u043a\u043e\u0434\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<p>  <\/p>\n<pre><code>\/\/ ... import {SocketMessageLog} from 'components'; \/\/ ...         &lt;SocketMessageLog\/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c. \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0438 \u044d\u0442\u043e \u0443\u0441\u043f\u0435\u0445.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442:<br \/>  <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/97a6526020a549f2ddf91370ac70dbc0737f167b\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/97a6526020a549f2ddf91370ac70dbc0737f167b\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/97a6526020a549f2ddf91370ac70dbc0737f167b<\/a><\/a><\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u043c 2 \u0447\u0430\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<h1 id=\"chast-tretya-izumitelnyy-redux\">\u0427\u0430\u0441\u0442\u044c \u0442\u0440\u0435\u0442\u044c\u044f. \u0418\u0437\u0443\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 Redux<\/h1>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0441\u0440\u0430\u0437\u0443 \u043a Redux.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e: <\/p>\n<p>  <\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0434\u044e\u0441\u0435\u0440 <\/li>\n<li>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b <\/li>\n<li>\u0418 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u0432 \u043e\u0431\u0449\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443<\/li>\n<\/ol>\n<p>  <\/p>\n<blockquote><p>\u041f\u0440\u043e \u044d\u043a\u0448\u0435\u043d\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e <a href=\"http:\/\/redux.js.org\/docs\/basics\/Actions.html\">\u0412 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a><br \/>  \u041f\u0440\u043e \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e <a href=\"http:\/\/redux.js.org\/docs\/basics\/Reducers.html\">\u0422\u0430\u043c \u0436\u0435<\/a><\/p><\/blockquote>\n<p>  <\/p>\n<h3 id=\"sozdaem-fayl\">\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b<\/h3>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>.\/src\/redux\/modules\/socketexamplemodule.js<\/code> \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u044d\u043a\u0448\u0435\u043d\u0430\u043c\u0438 \u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430\u043c\u0438. \u0412\u043e\u0442 \u0442\u0443\u0442 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u0430\u044f \u043d\u0435\u0441\u0442\u044b\u043a\u043e\u0432\u043a\u0430, \u0432\u0441\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u043d\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044f \u043d\u0430 \u0444\u0430\u0439\u043b \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u043e\u0432, \u043d\u0443 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c. \u0412\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u2014 \u043c\u044b \u0442\u0443\u0442 \u0432\u0441\u0435 \u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0435 \u043b\u044e\u0434\u0438 (we are all adults).<\/p>\n<p>  <\/p>\n<h3 id=\"eksheny-1\">\u042d\u043a\u0448\u0435\u043d\u044b 1<\/h3>\n<p>  <\/p>\n<pre><code>export const SOCKETS_CONNECTING = 'SOCKETS_CONNECTING'; export const SOCKETS_DISCONNECTING = 'SOCKETS_DISCONNECTING'; export const SOCKETS_MESSAGE_SENDING = 'SOCKETS_MESSAGE_SENDING'; export const SOCKETS_MESSAGE_RECEIVING = 'SOCKETS_MESSAGE_RECEIVING';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u044d\u043a\u0448\u0435\u043d\u044b \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043d\u043e\u043f\u043e\u043a, \u043a\u0440\u043e\u043c\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>SOCKETS_MESSAGE_RECEIVING<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 (\u0438\u043b\u0438 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435) \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"redyuser\">\u0420\u0435\u0434\u044e\u0441\u0435\u0440<\/h3>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0442\u043e\u0442 \u0436\u0435 \u0444\u0430\u0439\u043b.<\/p>\n<p>  <\/p>\n<pre><code>export default function reducer(state = initialState, action = {}) {   switch (action.type) {     case SOCKETS_CONNECTING:       return Object.assign({}, state, {         loaded: true,         message: 'Connecting...',         connected: false       });     case SOCKETS_DISCONNECTING:       return Object.assign({}, state, {         loaded: true,         message: 'Disconnecting...',         connected: true       });     case SOCKETS_MESSAGE_SENDING:       return Object.assign({}, state, {         loaded: true,         message: 'Send message',         connected: true       });     case SOCKETS_MESSAGE_RECEIVING:       return Object.assign({}, state, {         loaded: true,         message: 'Message receive',         connected: true       });     default:       return state;   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043f\u0440\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 reducer \u0438 \u0437\u0430\u0447\u0435\u043c <code>Object.assign({}, state,{});<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"http:\/\/redux.js.org\/docs\/basics\/Reducers.html\">\u0442\u0443\u0442<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0412\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e state = initialState, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043d\u0435 \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438 (\u043f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 ESLint \u0438\u043b\u0438 \u0435\u0433\u043e \u0430\u043d\u0430\u043b\u043e\u0433 \u2014 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442 \u0436\u0438\u0437\u043d\u044c \u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0427\u0435\u043b\u043e\u0432\u0435\u043a\u0430). \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043c\u0435\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u0442\u043e\u0440\u0435 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0443 \u0442\u043e\u0447\u043d\u0435\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0443\u0436\u0435 \u0441 \u044d\u0442\u0438\u043c \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c.<\/p>\n<p>  <\/p>\n<pre><code>const initialState = {   loaded: false,   message: 'Just created',   connected: false, };<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"eksheny-2\">\u042d\u043a\u0448\u0435\u043d\u044b 2<\/h3>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u044d\u043a\u0448\u0435\u043d\u0430\u043c\u0438 \u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c. \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u043f\u0438\u0441\u0430\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 reducer&#8217;a.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0442\u043e\u0442 \u0436\u0435 \u0444\u0430\u0439\u043b.<\/p>\n<p>  <\/p>\n<pre><code>export function socketsConnecting() {   return {type: SOCKETS_CONNECTING}; } export function socketsDisconnecting() {   return {type: SOCKETS_DISCONNECTING}; } export function socketsMessageSending() {   return {type: SOCKETS_MESSAGE_SENDING}; } export function socketsMessageReceiving() {   return {type: SOCKETS_MESSAGE_RECEIVING}; }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"podklyuchaem-v-obschiy-redyuser\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432 \u043e\u0431\u0449\u0438\u0439 \u0440\u0435\u0434\u044e\u0441\u0435\u0440<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043d\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 reducer&#8217;\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0430\u043b\u0435 <code>.\/src\/redux\/modules\/reducer.js<\/code> \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c.<\/p>\n<p>  <\/p>\n<pre><code>import socketexample from '.\/socketexamplemodule';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u043e\u0431\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430<\/p>\n<p>  <\/p>\n<pre><code>export default combineReducers({   routing: routerReducer,   reduxAsyncConnect,   auth,   form,   multireducer: multireducer({     counter1: counter,     counter2: counter,     counter3: counter   }),   info,   pagination,   widgets,   \/\/ our hero   socketexample });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0438 \u0443\u0440\u0430 \u0432 DevTools \u043c\u044b \u0432\u0438\u0434\u0438\u043c.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/e0f\/4f4\/b88\/e0f4f4b8851b4e2e84e2ee062a440c54.png\" alt=\"image\"\/><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0441 initialState \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c, \u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0438\u0445 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043d\u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/0c984e3b5bc25056aa578ee57f90895bc6baaf18\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/0c984e3b5bc25056aa578ee57f90895bc6baaf18\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/0c984e3b5bc25056aa578ee57f90895bc6baaf18<\/a><\/a><\/p>\n<p>  <\/p>\n<h3 id=\"stor\">\u0421\u0442\u043e\u0440<\/h3>\n<p>  <\/p>\n<p>\u0410 \u0441\u0442\u043e\u0440 \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d \u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440 \u0432 \u043d\u0435\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d. \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435, \u0442\u043e \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u043a\u0430\u043a \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043d\u0430\u0448 \u0440\u0435\u0434\u044e\u0441\u0435\u0440 \u0432 <code>combineReducers<\/code> \u0432\u044b\u0448\u0435 \u043f\u043e \u0441\u0442\u0430\u0442\u044c\u0435. \u0422\u0430\u043a \u0432\u043e\u0442 \u044d\u0442\u043e\u0442 <code>combineReducers<\/code> \u0441\u0430\u043c \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/redux\/create.js<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"podklyuchaem-stor-k-react-komponentam\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u0442\u043e\u0440 \u043a react \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432 \u043d\u0430\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0438. \u0412 \u0446\u0435\u043b\u044f\u0445 \u0432\u0441\u0435\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0437 \u043d\u0435\u0433\u043e \u0447\u0438\u0441\u0442\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 react (\u0432 \u0441\u043c\u044b\u0441\u043b\u0435 \u0447\u0438\u0441\u0442\u044b\u0439 \u043e\u0442 redux).<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>SocketConnectionLog<\/code> \u043c\u044b \u043f\u043e\u043a\u0430 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u043c, \u0430 \u0438\u0434\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <code>SocketExamplePage<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 redux.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/containers\/SocketExample\/SocketExamplePage.js<\/code>.<\/p>\n<p>  <\/p>\n<pre><code>import {connect} from 'react-redux';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u043a\u0448\u0435\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443 \u0441\u0435\u0431\u044f \u0432 react.<\/p>\n<p>  <\/p>\n<pre><code>import * as socketExampleActions from 'redux\/modules\/socketexamplemodule';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0430 \u0435\u0449\u0435 \u043c\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c PropTypes<\/p>\n<p>  <\/p>\n<pre><code>import React, {Component, PropTypes} from 'react';<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<pre><code>@connect(   state =&gt; ({     loaded: state.socketexample.loaded,     message: state.socketexample.message,     connected: state.socketexample.connected}),   socketExampleActions)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 <code>state.socketexample.loaded<\/code> \u044d\u0442\u043e \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0432 redux, \u0432 \u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432 DevTools.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c\u044b\u0445 \u0438\u0437 redux, \u0447\u0442\u043e \u0432\u0438\u0434\u0438\u0442\u0441\u044f \u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c \u0442.\u043a. \u043b\u044e\u0431\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0442\u0438\u043f \u0435\u0441\u0442\u044c \u0432\u0441\u0435\u043b\u0435\u043d\u0441\u043a\u043e\u0435 \u0434\u043e\u0431\u0440\u043e.<\/p>\n<p>  <\/p>\n<pre><code>  static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c. \u0412\u043d\u0443\u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430 render \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0436\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u0437 props.<\/p>\n<p>  <\/p>\n<pre><code>const {loaded, message, connected} = this.props;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0438 \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0438\u0445 \u0432 \u043d\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c:<\/p>\n<p>  <\/p>\n<pre><code>&lt;SocketConnectionLog loaded={loaded} message={message} connected={connected} \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 (\u0447\u0435\u0440\u0435\u0437 react) \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043f\u0440\u043e \u0441\u0442\u043e\u0440 (redux), \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0435\u043c\u0443 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/components\/SocketExampleComponents\/SocketConnectionLog.js<\/code> \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u043c \u043f\u043e \u0441\u043f\u0438\u0441\u043a\u0443:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 props <\/li>\n<li>\u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0438\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 render <\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code>import React, {Component, PropTypes} from 'react';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code>  static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 props<\/p>\n<p>  <\/p>\n<pre><code>    const {loaded, message, connected} = this.props;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043d\u0430\u0448\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/p>\n<p>  <\/p>\n<pre><code>          value={'index =' + 0 + ', loaded = ' + loaded + ', message = ' + message + ', connected = ' + connected}\/&gt;           {\/* value=&quot;             index = 2, loaded = true, message = Connected, connected = true             index = 1, loaded = false, message = Connecting..., connected = false&quot;\/&gt;           *\/}<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0438 \u0432\u0438\u0434\u0438\u043c, initialState \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0435\u0442 \u043a \u043d\u0430\u043c \u043f\u0440\u044f\u043c\u043e \u0438\u0437 redux-&gt;react-&gt;props-&gt;props. <\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/60ac05332e35dfdbc11b9415f5bf5c46cd740ba8\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/60ac05332e35dfdbc11b9415f5bf5c46cd740ba8\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/60ac05332e35dfdbc11b9415f5bf5c46cd740ba8<\/a><\/a><\/p>\n<p>  <\/p>\n<h3 id=\"socketexamplemessagelog\">SocketExampleMessageLog<\/h3>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <code>SocketExampleMessageLog<\/code> \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0433\u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u0432 \u0441\u043c\u044b\u0441\u043b\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043c. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043d\u0438\u043a\u0430\u043a\u0438\u0435 props, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0438\u0437 \u0441\u0442\u043e\u0440 \u0441\u0430\u043c.<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>.\/src\/components\/SocketExampleComponents\/SocketMessageLog.js<\/code><\/p>\n<p>  <\/p>\n<p>\u0432 \u043d\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/p>\n<p>  <\/p>\n<pre><code>import React, {Component, PropTypes} from 'react'; import {connect} from 'react-redux'; import * as socketExampleActions from 'redux\/modules\/socketexamplemodule';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <code>connect<\/code>, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u0438\u043f\u043e\u0432 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n<p>  <\/p>\n<pre><code>@connect(   state =&gt; ({     loaded: state.socketexample.loaded,     message: state.socketexample.message,     connected: state.socketexample.connected}),   socketExampleActions) export default class SocketMessageLog extends Component {   static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool   }  \/\/ ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043c\u0435\u0442\u043e\u0434 render() \u0447\u0435\u0440\u0435\u0437 props<\/p>\n<p>  <\/p>\n<pre><code>    const {loaded, message, connected} = this.props;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>loaded<\/code> \u0438 <code>connected<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u044c \u043a \u043e\u0431\u043c\u0435\u043d\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u0430 <code>message<\/code> \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438.<\/p>\n<p>  <\/p>\n<pre><code>        &lt;ul&gt;           &lt;li key=&quot;1&quot; className=&quot;unstyled&quot;&gt;             &lt;span className=&quot;glyphicon glyphicon-arrow-right&quot;&gt; &lt;\/span&gt;             {message}           &lt;\/li&gt;           &lt;li key=&quot;2&quot; className=&quot;unstyled&quot;&gt;             &lt;span className=&quot;glyphicon glyphicon-arrow-left&quot;&gt; &lt;\/span&gt;             [ECHO] {message}           &lt;\/li&gt;         &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u042f \u0431\u0443\u0434\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>loaded<\/code> \u0438 <code>connected<\/code> \u044f\u0432\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0434\u043b\u044f (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445) \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432.<\/p>\n<p>  <\/p>\n<pre><code>        &lt;form className=&quot;form-inline&quot;&gt;           &lt;p&gt;&lt;\/p&gt;           &lt;div className=&quot;form-group&quot;&gt;             &lt;input               className=&quot;form-control input-sm&quot;               type=&quot;text&quot;               ref=&quot;message_text&quot; readOnly = {(loaded === true) ? false : true}&gt;&lt;\/input&gt;           &lt;\/div&gt;           &lt;button             className=&quot;btn btn-primary btn-sm&quot;             disabled = {(connected === true) ? false : true}&gt;             &lt;i className=&quot;fa fa-sign-in&quot;\/&gt; Send           &lt;\/button&gt;         &lt;\/form&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u043f\u0443\u0442\u0438 \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043e. <\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/a473d6a86262f2d2b52c590974e77df9454de5a1\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/a473d6a86262f2d2b52c590974e77df9454de5a1\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/a473d6a86262f2d2b52c590974e77df9454de5a1<\/a><\/a>.<\/p>\n<p>  <\/p>\n<h1 id=\"chast-chetvertaya-ozhivlyaem-istoriyu\">\u0427\u0430\u0441\u0442\u044c \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u0430\u044f. \u041e\u0436\u0438\u0432\u043b\u044f\u0435\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e<\/h1>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u044f \u043c\u044b \u0432\u0441\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 react \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0441\u0442\u043e\u0440. \u041d\u0430\u0447\u043d\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u041e\u0436\u0438\u0432\u0438\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439 \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <code>.\/src\/components\/SocketExampleComponents\/SocketConnectionLog.js<\/code>.<br \/>  \u041d\u043e \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u043e\u043d \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u0440\u043e \u0441\u0442\u043e\u0440 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u043d \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043f\u0440\u043e \u044d\u043a\u0448\u0435\u043d\u044b \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u043c\u0443 \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <code>.\/src\/containers\/SocketExample\/SocketExamplePage.js<\/code>. \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0438\u0445 \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0435 props.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/habrahabr.ru\/users\/connect\/\" class=\"user_link\">connect<\/a>. \u0421\u0442\u043e\u043f. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0439. \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c.<\/p>\n<p>  <\/p>\n<pre><code>\/\/.... import * as socketExampleActions from 'redux\/modules\/socketexamplemodule'; \/\/.... @connect(   state =&gt; ({     loaded: state.socketexample.loaded,     message: state.socketexample.message,     connected: state.socketexample.connected}),   socketExampleActions)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0438\u0445 \u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/containers\/SocketExample\/SocketExamplePage.js<\/code>: <\/p>\n<p>  <\/p>\n<pre><code>static propTypes = {   loaded: PropTypes.bool,   message: PropTypes.string,   connected: PropTypes.bool,   socketsConnecting: PropTypes.func,   socketsDisconnecting: PropTypes.func  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/p>\n<p>  <\/p>\n<pre><code>  render() {     const {loaded, message, connected, socketsConnecting, socketsDisconnecting} = this.props;     return (       &lt;div className=&quot;container&quot;&gt;         &lt;h1&gt;Socket Exapmle Page&lt;\/h1&gt;         &lt;Helmet title=&quot;Socket Exapmle Page&quot;\/&gt;         &lt;SocketConnectionLog loaded={loaded} message={message} connected={connected} connectAction={socketsConnecting} disconnectAction={socketsDisconnecting}\/&gt;         &lt;SocketMessageLog\/&gt;       &lt;\/div&gt;     );   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043c \u043f\u0440\u0438\u0435\u043c \u043f\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/components\/SocketExampleComponents\/SocketConnectionLog.js<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 (\u044d\u043a\u0448\u0435\u043d\u044b) \u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0430\u0448\u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043d\u0430 \u0444\u043e\u0440\u043c\u0435. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0434\u0432\u0430: \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043a\u043d\u043e\u043f\u043a\u0438 &quot;Connect&quot; \u0438 &quot;Disconnect&quot;.<\/p>\n<p>  <\/p>\n<pre><code>  static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool,     connectAction: PropTypes.func,     disconnectAction: PropTypes.func   }   handleConnectButton = (event) =&gt; {     event.preventDefault();     this.props.connectAction();   }   handleDisconnectButton = (event) =&gt; {     event.preventDefault();     this.props.disconnectAction();   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a.<\/p>\n<p>  <\/p>\n<pre><code>  render() {     const {loaded, message, connected} = this.props;     return (       &lt;div&gt;         &lt;h3&gt;Socket connection log&lt;\/h3&gt;         &lt;textarea           className=&quot;form-control&quot;           rows=&quot;1&quot;           readOnly           placeholder=&quot;Waiting ...&quot;           value={'index =' + 0 + ', loaded = ' + loaded + ', message = ' + message + ', connected = ' + connected}\/&gt;           {\/* value=&quot;             index = 2, loaded = true, message = Connected, connected = true             index = 1, loaded = false, message = Connecting..., connected = false&quot;\/&gt;           *\/}         &lt;button           className=&quot;btn btn-primary btn-sm&quot;           onClick={this.handleDisconnectButton}&gt;           &lt;i className=&quot;fa fa-sign-in&quot;\/&gt; Connect         &lt;\/button&gt;         &lt;button           className=&quot;btn btn-danger btn-sm&quot;           onClick={this.handleConnectButton}&gt;           &lt;i className=&quot;fa fa-sign-out&quot;\/&gt; Disconnect         &lt;\/button&gt;       &lt;\/div&gt;     );<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c. \u0423\u0440\u0430, \u043e\u043d\u043e \u0436\u0438\u0432\u043e! \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 DevTools, \u0447\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u0435. <\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a (\u0445\u043e\u0442\u044f \u043e\u043d \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e). \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0443 \u043d\u0430\u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 connected = false, \u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u044b\u0432\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0443 \u043d\u0430\u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 connected = true. \u0414\u0430\u0432\u0430\u0439-\u0442\u0435 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u043c. <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/redux\/modules\/socketexamplemodule.js<\/code> \u043f\u0440\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438<\/p>\n<p>  <\/p>\n<pre><code> case SOCKETS_CONNECTING:   return Object.assign({}, state, {    loaded: true,    message: 'Connecting...',    connected: true   });  case SOCKETS_DISCONNECTING:   return Object.assign({}, state, {    loaded: true,    message: 'Disconnecting...',    connected: false   });<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0443 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. <\/p>\n<p>  <\/p>\n<blockquote><p>\u041d\u041e \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435, \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u0442\u043e\u0436\u0434\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043e (\u0434\u0430 \u044f \u043a\u044d\u043f).<\/p><\/blockquote>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430. \u041c\u044b \u043d\u0435\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0430\u043c\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0435\u0435 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u043a\u043e\u043f\u0438\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0443 (\u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043d\u044f\u043b\u0438 \u043a\u043e\u043f\u0438\u044e).<\/p>\n<p>  <\/p>\n<pre><code>    case SOCKETS_CONNECTING:       return Object.assign({}, state, {         loaded: true,         message: 'Connecting...',         connected: true,         history: [           ...state.history,           {             loaded: true,             message: 'Connecting...',             connected: true           }         ]       });     case SOCKETS_DISCONNECTING:       return Object.assign({}, state, {         loaded: true,         message: 'Disconnecting...',         connected: false,         history: [           ...state.history,           {             loaded: true,             message: 'Disconnecting...',             connected: false           }         ]       });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0442\u043e\u043c \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 props \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/containers\/SocketExample\/SocketExamplePage.js<\/code>. \u0414\u0430\u043b\u0435\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/components\/SocketExampleComponents\/SocketConnectionLog.js<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/containers\/SocketExample\/SocketExamplePage.js<\/code> \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0437 \u0441\u0442\u043e\u0440\u0430:<\/p>\n<p>  <\/p>\n<pre><code>@connect(  state =&gt; ({   loaded: state.socketexample.loaded,   message: state.socketexample.message,   connected: state.socketexample.connected,   history: state.socketexample.history  }),  socketExampleActions)<\/code><\/pre>\n<p>  <\/p>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430 \u0442\u0438\u043f <\/p>\n<p>  <\/p>\n<pre><code>  static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool,     history: PropTypes.array,     socketsConnecting: PropTypes.func,     socketsDisconnecting: PropTypes.func       }<\/code><\/pre>\n<p>  <\/p>\n<p>\u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c <\/p>\n<p>  <\/p>\n<pre><code>  render() {     const {loaded, message, connected, socketsConnecting, socketsDisconnecting, history} = this.props;     return (       &lt;div className=&quot;container&quot;&gt;         &lt;h1&gt;Socket Exapmle Page&lt;\/h1&gt;         &lt;Helmet title=&quot;Socket Exapmle Page&quot;\/&gt;         &lt;SocketConnectionLog loaded={loaded} message={message} connected={connected} connectAction={socketsConnecting} disconnectAction={socketsDisconnecting} history={history}\/&gt;         &lt;SocketMessageLog\/&gt;       &lt;\/div&gt;     );<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u0443\u0436\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/components\/SocketExampleComponents\/SocketConnectionLog.js<\/code>.<\/p>\n<p>  <\/p>\n<pre><code> static propTypes = {    loaded: PropTypes.bool,    message: PropTypes.string,    connected: PropTypes.bool,    history: PropTypes.array,    connectAction: PropTypes.func,    disconnectAction: PropTypes.func  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0432 \u043b\u043e\u0433 \u043d\u0430\u043c \u0443\u0436\u0435 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>loaded<\/code>, <code>message<\/code>, <code>connected<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0445\u0440\u043e\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b\u043b\u043e \u0441\u0432\u0435\u0440\u0445\u0443. <\/p>\n<p>  <\/p>\n<pre><code>  render() {     const {history} = this.props;     return (       &lt;div&gt;         &lt;h3&gt;Socket connection log&lt;\/h3&gt;         &lt;textarea           className=&quot;form-control&quot;           rows=&quot;1&quot;           readOnly           placeholder=&quot;Waiting ...&quot;           value={             history.map((historyElement, index) =&gt;               'index = ' + index +               ' loaded = ' + historyElement.loaded.toString() +               ' message = ' + historyElement.message.toString() +               ' connected = ' + historyElement.connected.toString() + ' \\n').reverse()             }\/&gt;         &lt;button           className=&quot;btn btn-primary btn-sm&quot;           onClick={this.handleConnectButton}&gt;           &lt;i className=&quot;fa fa-sign-in&quot;\/&gt; Connect         &lt;\/button&gt;         &lt;button           className=&quot;btn btn-danger btn-sm&quot;           onClick={this.handleDisconnectButton}&gt;           &lt;i className=&quot;fa fa-sign-out&quot;\/&gt; Disconnect           &lt;\/button&gt;       &lt;\/div&gt;     );<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>history<\/code> \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430, \u0438\u043d\u0430\u0447\u0435 \u043d\u0430\u0448\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c. <\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/redux\/modules\/socketexamplemodule.js<\/code>.<\/p>\n<p>  <\/p>\n<pre><code>const initialState = {   loaded: false,   message: 'Just created',   connected: false,   history: [] };<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c. \u0418 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u043e \u0441 \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438. Javascript, WTF? \u041d\u0443 \u0434\u0430 \u043b\u0430\u0434\u043d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0441\u043b\u0435 \u043c\u0430\u043f\u0430 \u0438 \u0440\u0435\u0432\u0435\u0440\u0441\u0430 .join(&#187;), \u0442\u043e \u044d\u0442\u043e \u0432\u0441\u0435 \u0440\u0435\u0448\u0430\u0435\u0442. <\/p>\n<p>  <\/p>\n<blockquote><p>&quot;.join(&#187;) \u0432\u0441\u0435 \u0440\u0435\u0448\u0430\u0435\u0442.&quot;, \u041a\u0430\u0440\u043b!<\/p><\/blockquote>\n<p>\u041a\u0430\u043a\u043e\u0439 \u0443 \u043d\u0430\u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442? \u0427\u0438\u0442\u0430\u0435\u043c \u0438 \u043f\u0438\u0448\u0435\u043c \u0432 \u0441\u0442\u043e\u0440! \u041c\u043e\u0436\u043d\u043e \u0441\u0435\u0431\u044f \u043f\u043e\u0445\u0432\u0430\u043b\u0438\u0442\u044c! \u041d\u043e \u044d\u0442\u043e\u0433\u043e \u044f\u0432\u043d\u043e \u043c\u0430\u043b\u043e, \u0432\u0435\u0434\u044c \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0432\u043e\u0435\u0439 \u0436\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438 \u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0431\u0449\u0430\u0435\u043c\u0441\u044f \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u043c\u0438\u0440\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/24144226ea4c08ec1af5db3a5e9b37461be2dbdd\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/24144226ea4c08ec1af5db3a5e9b37461be2dbdd\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/24144226ea4c08ec1af5db3a5e9b37461be2dbdd<\/a><\/a><\/p>\n<p>  <\/p>\n<h1 id=\"chast-pyataya-proektiruem-chat\">\u0427\u0430\u0441\u0442\u044c \u043f\u044f\u0442\u0430\u044f. \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0447\u0430\u0442<\/h1>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f\/\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0441\u043e\u043a\u0435\u0442\u0443. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0443 \u0434\u043b\u044f \u0447\u0430\u0442\u0430, \u043e\u043d\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0430\u0448\u0438\u043c \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c\u044e (\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c).<\/p>\n<p>  <\/p>\n<p>\u0421 \u0447\u0430\u0442\u043e\u043c \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043a\u0430\u043a \u0438 \u0441 \u043b\u043e\u0433\u043e\u043c (\u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439) \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439 \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0447\u0430\u0442\u0430 \u0438 \u043d\u0430\u0443\u0447\u0438\u043c \u0435\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li>\n<p>\u0412 \u0440\u0435\u0434\u0430\u043a\u0441\u0435 \u043d\u0443\u0436\u043d\u043e: <\/p>\n<p>  <\/p>\n<ul>\n<li>\u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, <\/li>\n<li>\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0435\u0435 \u044d\u043a\u0448\u0435\u043d\u044b,<\/li>\n<li>\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a \u0434\u0430\u043d\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. <\/li>\n<\/ul>\n<p>  <\/li>\n<li>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043d\u0443\u0436\u043d\u043e:<br \/> \n<ul>\n<li>\u043f\u0440\u0438\u043d\u044f\u0442\u044c \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e,<\/li>\n<li>\u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0435 \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435,<\/li>\n<li>\u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u0438 \u044d\u043a\u0448\u0435\u043d\u044b.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"nastroyka-redyusera\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/redux\/modules\/socketexamplemodule.js<\/code> \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e<br \/>  \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e.<\/p>\n<p>  <\/p>\n<pre><code>const initialState = {   loaded: false,   message: 'Just created',   connected: false,   history: [],   message_history: [] };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b <code>SOCKETS_MESSAGE_SENDING<\/code> \u0438 <code>SOCKETS_MESSAGE_RECEIVING<\/code>. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0440\u0435\u0434\u044e\u0441\u0435\u0440.<\/p>\n<p>  <\/p>\n<pre><code>case SOCKETS_MESSAGE_SENDING:       return Object.assign({}, state, {         loaded: true,         message: 'Send message',         connected: true,         message_history: [           ...state.message_history,           {             direction: '-&gt;',             message: action.message_send           }         ]       });     case SOCKETS_MESSAGE_RECEIVING:       return Object.assign({}, state, {         loaded: true,         message: 'Message receive',         connected: true,         message_history: [           ...state.message_history,           {             direction: '&lt;-',             message: action.message_receive           }         ]       });<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 <code>action.message_receive<\/code> \u0438 <code>action.message_send<\/code>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0438\u0445 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0442\u043e\u0440\u0430. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043a\u0448\u0435\u043d\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0441\u0442\u043e\u0440 \u0438\u0437 \u044d\u043a\u0448\u0435\u043d\u043e\u0432.<\/p>\n<p>  <\/p>\n<pre><code>export function socketsMessageSending(sendMessage) {   return {type: SOCKETS_MESSAGE_SENDING, message_send: sendMessage}; } export function socketsMessageReceiving(sendMessage) {   return {type: SOCKETS_MESSAGE_RECEIVING, message_receive: sendMessage}; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f. \u041e\u0442\u043a\u0443\u0434\u0430-\u0442\u043e \u0438\u0437 \u043a\u043e\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u044d\u0442\u0438 \u044d\u043a\u0448\u0435\u043d\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043c \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>sendMessage<\/code> \u0438\u043b\u0438 <code>sendMessage<\/code>. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u0438 \u044d\u043a\u0448\u0435\u043d\u044b \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b, \u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043d\u043e\u043f\u043e\u043a. \u041f\u043e\u043a\u0430 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0447\u0430\u0442\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"nastroyka-interfeysa\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h3>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u043a\u0430\u043a \u0434\u043b\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 react \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0437 \u0441\u0442\u043e\u0440\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/components\/SocketExampleComponents\/SocketMessageLog.js<\/code>.<\/p>\n<p>  <\/p>\n<pre><code>@connect(   state =&gt; ({     loaded: state.socketexample.loaded,     message: state.socketexample.message,     connected: state.socketexample.connected,     message_history: state.socketexample.message_history   }),   socketExampleActions) export default class SocketMessageLog extends Component {   static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool,     message_history: PropTypes.array,     socketsMessageSending: PropTypes.func   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043d\u0430 \u0444\u043e\u0440\u043c\u0435.<\/p>\n<p>  <\/p>\n<pre><code>handleSendButton = (event) =&gt; {     event.preventDefault();     this.props.socketsMessageSending(this.refs.message_text.value);     this.refs.message_text.value = '';   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435, \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0438\u0437 \u043f\u043e\u043b\u044f <code>message_text<\/code>. \u041f\u0435\u0440\u0435\u0434\u0430\u0435\u043c <code>message_text<\/code> \u0432 \u043d\u0430\u0448 \u044d\u043a\u0448\u0435\u043d \u043e\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. \u0421\u0442\u0438\u0440\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 props.<\/p>\n<p>  <\/p>\n<pre><code>const {loaded, connected, message_history} = this.props;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b\u0432\u043e\u0434\u0438\u043c \u043b\u043e\u0433 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c<\/p>\n<p>  <\/p>\n<pre><code>        &lt;ul&gt;           {             message_history.map((messageHistoryElement, index) =&gt;             &lt;li key={index} className={'unstyled'}&gt;               &lt;span className={(messageHistoryElement.direction === '-&gt;') ? 'glyphicon glyphicon-arrow-right' : 'glyphicon glyphicon-arrow-left'}&gt;&lt;\/span&gt;               {messageHistoryElement.message}             &lt;\/li&gt;           )}         &lt;\/ul&gt;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u041d\u0435 \u043f\u044b\u0442\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u0442\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0443 \u0432\u0430\u0441 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0422.\u0435. \u043d\u0435 \u043f\u044b\u0442\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 &#8216; &#8216;?&#8217; &#8216;:&#8217; &#8216;. \u0412\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u0449\u0438\u0449\u0430\u0442\u044c. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u2014 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. \u0417\u0434\u0435\u0441\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p><\/blockquote>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438<\/p>\n<p>  <\/p>\n<pre><code>        &lt;form           className=&quot;form-inline&quot;           onSubmit={this.handleSendButton}&gt;           &lt;p&gt;&lt;\/p&gt;           &lt;div className=&quot;form-group&quot;&gt;             &lt;input               className=&quot;form-control input-sm&quot;               type=&quot;text&quot;               ref=&quot;message_text&quot; readOnly = {(loaded &amp;&amp; connected === true) ? false : true}&gt;             &lt;\/input&gt;           &lt;\/div&gt;           &lt;button             className=&quot;btn btn-primary btn-sm&quot;             onClick={this.handleSendButton}             disabled = {(connected === true) ? false : true}&gt;             &lt;i className=&quot;fa fa-sign-in&quot;\/&gt; Send           &lt;\/button&gt;         &lt;\/form&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0438 \u0432\u0438\u0434\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. \u0411\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u043b\u043e\u0431.<\/p>\n<p>  <\/p>\n<pre><code>handleSendButton = (event) =&gt; {     event.preventDefault();     this.props.socketsMessageSending(this.refs.message_text.value);     this.props.socketsMessageReceiving(this.refs.message_text.value);     this.refs.message_text.value = '';   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435, \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u044d\u043a\u0448\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u043d\u0430\u0448\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 <code>this.refs.message_text.value<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443!<\/p>\n<p>  <\/p>\n<pre><code>static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool,     message_history: PropTypes.array,     socketsMessageSending: PropTypes.func,     socketsMessageReceiving: PropTypes.func   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, <del>\u0441\u043a\u0443\u0447\u043d\u0430\u044f<\/del> \u043a\u0440\u043e\u043f\u043e\u0442\u043b\u0438\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c!<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/5158391cdd53545408637fd732c981f17852e84b\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/5158391cdd53545408637fd732c981f17852e84b\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/5158391cdd53545408637fd732c981f17852e84b<\/a><\/a>.<\/p>\n<p>  <\/p>\n<h1 id=\"midlvare\">\u041c\u0438\u0434\u043b\u0432\u0430\u0440\u0435<\/h1>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435 \u0432 \u0440\u0435\u0434\u0430\u043a\u0441\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 <a href=\"http:\/\/redux.js.org\/docs\/advanced\/Middleware.html\"><a href=\"http:\/\/redux.js.org\/docs\/advanced\/Middleware.html\">http:\/\/redux.js.org\/docs\/advanced\/Middleware.html<\/a><\/a>.<\/p>\n<p>  <\/p>\n<p>\u0410 \u0435\u0449\u0435 \u0432\u043e\u0442 \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f <a href=\"https:\/\/exec64.co.uk\/blog\/websockets_with_redux\/\"><a href=\"https:\/\/exec64.co.uk\/blog\/websockets_with_redux\/\">https:\/\/exec64.co.uk\/blog\/websockets_with_redux\/<\/a><\/a>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0443, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c\u0443 \u043d\u0430 websockets.<\/p>\n<p>  <\/p>\n<h3 id=\"pervyy-prohod\">\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u043e\u0445\u043e\u0434<\/h3>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>.\/src\/redux\/middleware\/socketExampleMiddleware.js<\/code><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043a\u0448\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430, \u043d\u043e \u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0438\u0436\u0435. <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<pre><code>import * as socketExampleActions from 'redux\/modules\/socketexamplemodule';  export default function createSocketExampleMiddleware() {   let socketExample = null;   socketExample = true;   socketExampleActions();    return store =&gt; next =&gt; action =&gt; {     switch (action.type) {       default:         console.log(store, socketExample, action);         return next(action);     }   }; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u0412\u043e\u043e\u0431\u0449\u0435 \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0430\u043c\u0438\u043c \u0441\u0442\u043e\u0440\u043e\u043c \u0438 \u043a\u0430\u043a \u043e\u043d \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>return store =&gt; next =&gt; action =&gt;<\/code> \u043c\u044b \u0432\u043c\u0435\u0448\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0448\u0435\u043d \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0432 \u0441\u0442\u043e\u0440\u0435 \u0438 \u043f\u043e \u043f\u043e\u043b\u044e <code>switch (action.type)<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0435\u0442 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 <code>store, socketExample, action<\/code>. (<code>socketExampleActions();<\/code> \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0443\u0433\u0430\u043b\u0441\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440, \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u043d\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c).<\/p>\n<p>  <\/p>\n<p>\u041d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0443 \u043d\u0430\u0441 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u043d\u0430\u0448 \u043a\u043b\u0430\u0441\u0441 \u0432 \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c. <\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/redux\/create.js<\/code> \u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0430\u0440\u0443 \u0441\u0442\u0440\u043e\u043a.<\/p>\n<p>  <\/p>\n<pre><code>import createSocketExampleMiddleware from '.\/middleware\/socketExampleMiddleware'; \/\/...   const middleware = [     createMiddleware(client),     reduxRouterMiddleware,     thunk,     createSocketExampleMiddleware()   ];<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c. \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u0431\u0435\u0441\u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u043d\u0446\u0435\u043f\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442!<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/7833a405be3445e58e8e672e9db03f8cfbfde022\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/7833a405be3445e58e8e672e9db03f8cfbfde022\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/7833a405be3445e58e8e672e9db03f8cfbfde022<\/a><\/a><\/p>\n<p>  <\/p>\n<h3 id=\"vtoroy-prohod-delaem-log-istoriyu\">\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0445\u043e\u0434. \u0414\u0435\u043b\u0430\u0435\u043c \u043b\u043e\u0433 \u0438\u0441\u0442\u043e\u0440\u0438\u044e.<\/h3>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0438 \u0433\u043e\u0442\u043e\u0432\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u043e\u0435\u0432\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c. \u0422\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043a websockets. <\/p>\n<p>  <\/p>\n<blockquote><p>\u0417\u0434\u0435\u0441\u044c \u0438 \u0434\u0430\u043b\u0435\u0435 \u0434\u0430\u044e\u0442\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442 \u0445\u043e\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u042d\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043f\u0440\u0435\u0434\u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0431\u043e\u0442.<\/p><\/blockquote>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b <code>.\/src\/redux\/middleware\/socketExampleMiddleware.js<\/code> \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<pre><code>  const onOpen = (token) =&gt; evt =&gt; {     console.log('WS is onOpen');     console.log('token ' + token);     console.log('evt ' + evt.data);   };   const onClose = () =&gt; evt =&gt; {     console.log('WS is onClose');     console.log('evt ' + evt.data);   };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043b\u0438\u0448\u043d\u0438\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f (\u043d\u0443\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c)<\/p>\n<p>  <\/p>\n<pre><code>  socketExample = true;   socketExampleActions();<\/code><\/pre>\n<p>  <\/p>\n<p>\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448\u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u044b \u0438 \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043b\u0438\u0448\u043d\u0435\u0435 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<pre><code>      case 'SOCKETS_CONNECT':         if (socketExample !== null) {           console.log('SOCKETS_DISCONNECTING');           store.dispatch(socketExampleActions.socketsDisconnecting());           socket.close();         }         console.log('SOCKETS_CONNECTING');         socketExample = new WebSocket('ws:\/\/echo.websocket.org\/');         store.dispatch(socketExampleActions.socketsConnecting());         socketExample.onclose = onClose();         socketExample.onopen = onOpen(action.token);         break;       default:         return next(action);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f. \u041c\u044b \u043b\u043e\u0432\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>SOCKETS_CONNECT<\/code>, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u043b\u0438 \u043c\u044b, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u0442\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0432\u0435\u0431 \u0441\u043e\u043a\u0435\u0442 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u044b <code>onClose()<\/code> \u0438 <code>onOpen(action.token)<\/code>. \u041f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041c\u044b \u043b\u043e\u0432\u0438\u043c \u044d\u043a\u0448\u0435\u043d <code>SOCKETS_CONNECT<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043a\u0430 \u043d\u0435\u0442. \u041d\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043a\u0448\u0435\u043d <code>SOCKETS_CONNECTING<\/code>, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u2014 \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442. <\/p>\n<p>  <\/p>\n<pre><code>      case 'SOCKETS_CONNECTING':         if (socketExample !== null) {           console.log('SOCKETS_DISCONNECTING');           store.dispatch(SocketExampleActions.socketsDisconnecting());           socket.close();         }         console.log('SOCKETS_CONNECTING');         socketExample = new WebSocket('ws:\/\/echo.websocket.org\/');         store.dispatch(SocketExampleActions.socketsConnecting());         socketExample.onclose = onClose();         socketExample.onopen = onOpen(action.token);         break;       default:         return next(action);<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>!!! \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u2014 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0432\u0441\u0435 \u0438\u043b\u0438 \u043d\u0435 \u043d\u0430\u0436\u0438\u043c\u0430\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435.<\/p><\/blockquote>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a. \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0435 <code>SOCKETS_CONNECTING<\/code> \u0438 <code>SOCKETS_DISCONNECTING<\/code>. \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u041c\u0438\u0434\u043b\u0432\u0430\u0440\u0435 &quot;\u0441\u043b\u0443\u0448\u0430\u0435\u0442&quot; \u0441\u0442\u043e\u0440 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u044d\u043a\u0448\u0435\u043d\u043e\u0432 <code>store =&gt; next =&gt; action =&gt;<\/code> \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0441\u0432\u043e\u0439 \u044d\u043a\u0448\u0435\u043d <code>SOCKETS_CONNECTING<\/code>. \u0414\u0430\u043b\u0435\u0435 \u043f\u043e \u043a\u043e\u0434\u0443 \u0438\u0434\u0435\u0442 \u0432\u044b\u0437\u043e\u0432 \u044d\u043a\u0448\u0435\u043d\u0430 <code>store.dispatch(SocketExampleActions.socketsConnecting());<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u044d\u043a\u0448\u0435\u043d <code>SOCKETS_CONNECTING<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u043e\u0432\u0438\u0442 \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435 \u0438 \u0442.\u0434. <\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u0432\u043e\u0434 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u2014 \u044d\u043a\u0448\u0435\u043d\u044b \u0434\u043b\u044f \u043c\u0438\u0434\u043b\u0435\u0432\u0430\u0440\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043e\u0442 \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0431\u044b\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0448 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 (\u044f \u0434\u0443\u043c\u0430\u044e \u043e\u043d \u043d\u0435 \u043e\u0434\u0438\u043d) \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c: <\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u044d\u043a\u0448\u0435\u043d\u044b \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0430,<\/li>\n<li>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0443\u0436\u0435 &quot;\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043d\u044b\u0435&quot; \u044d\u043a\u0448\u0435\u043d\u044b. <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c <\/p>\n<p>  <\/p>\n<ul>\n<li><code>SOCKETS_CONNECT<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/li>\n<li>\u043f\u0440\u0438 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f <code>SOCKETS_CONNECTING<\/code>,<\/li>\n<li>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0443\u0436\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u043e\u0440 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u0432\u0441\u0435 \u044d\u0442\u043e.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u044d\u043a\u0448\u0435\u043d\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043d\u0430\u0448\u0438 2 \u044d\u043a\u0448\u0435\u043d\u0430 \u043d\u043e\u0432\u044b\u043c\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>src\\redux\\modules\\socketexamplemodule.js<\/code>.<\/p>\n<p>  <\/p>\n<pre><code>export const SOCKETS_CONNECTING = 'SOCKETS_CONNECTING'; export const SOCKETS_CONNECT = 'SOCKETS_CONNECT'; export const SOCKETS_DISCONNECTING = 'SOCKETS_DISCONNECTING'; export const SOCKETS_DISCONNECT = 'SOCKETS_DISCONNECT';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u043d\u0438 \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<pre><code>export function socketsConnecting() {   return {type: SOCKETS_CONNECTING}; } export function socketsConnect() {   return {type: SOCKETS_CONNECT}; } export function socketsDisconnecting() {   return {type: SOCKETS_DISCONNECTING}; } export function socketsDisconnect() {   return {type: SOCKETS_DISCONNECT}; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u041f\u043e \u0438\u0434\u0435\u0438 \u043d\u0443\u0436\u043d\u043e \u043b\u0435\u0437\u0442\u044c \u0432 <code>.\/src\/components\/SocketExampleComponents\/SocketConnectionLog.js\u0440<\/code>, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 react. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 <code>.\/src\/containers\/SocketExample\/SocketExamplePage.js<\/code>. <\/p>\n<p>  <\/p>\n<pre><code>static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool,     history: PropTypes.array,     socketsConnecting: PropTypes.func,     socketsDisconnecting: PropTypes.func, \/\/HERE     socketsConnect: PropTypes.func,     socketsDisconnect: PropTypes.func   }   render() { \/\/HERE     const {loaded, message, connected, socketsConnecting, socketsDisconnecting, history, socketsConnect, socketsDisconnect} = this.props;     return (       &lt;div className=&quot;container&quot;&gt;         &lt;h1&gt;Socket Exapmle Page&lt;\/h1&gt;         &lt;Helmet title=&quot;Socket Exapmle Page&quot;\/&gt;         &lt;SocketConnectionLog           loaded={loaded}           message={message}           connected={connected}           connectAction={socketsConnecting}           disconnectAction={socketsDisconnecting}           history={history} \/\/HERE           connectAction={socketsConnect}           disconnectAction={socketsDisconnect}           \/&gt;         &lt;SocketMessageLog\/&gt;       &lt;\/div&gt;     );   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a <code>.\/src\/redux\/middleware\/SocketExampleMiddleware.js<\/code> \u0438 \u043d\u0430\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a. <\/p>\n<p>  <\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u043e\u0434\u0438\u043d \u043a\u0435\u0439\u0441<\/p>\n<p>  <\/p>\n<pre><code>      case 'SOCKETS_CONNECT':<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0435\u0439\u0441 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code>      case 'SOCKETS_DISCONNECT':         if (socketExample !== null) {           console.log('SOCKETS_DISCONNECTING');           store.dispatch(socketExampleActions.socketsDisconnecting());           socketExample.close();         }         socketExample = null;         break;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043a\u0448\u0435\u043d\u044b \u043f\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 disconnect \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0442\u0430\u043a\u0436\u0435 \u0441\u0430\u043c \u0441\u0442\u043e\u0440.<\/p>\n<p>  <\/p>\n<pre><code>        socketExample.onclose = onClose(store);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0430\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a<\/p>\n<p>  <\/p>\n<pre><code>  const onClose = (store) =&gt; evt =&gt; {     console.log('WS is onClose');     console.log('evt ' + evt.data);     store.dispatch(socketExampleActions.socketsDisconnect());   };<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0443 \u0432\u0440\u043e\u0434\u0435 \u0432\u0441\u0435 \u2014 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c. \u041d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0443 Network \u0438\u043b\u0438 \u0435\u0435 \u0430\u043d\u0430\u043b\u043e\u0433 \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0432\u0435\u0431 \u0441\u043e\u043a\u0435\u0442\u0430\u043c. <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u043e\u043a\u0435\u0442\u0430\u043c. <\/p>\n<p>  <\/p>\n<pre><code>        socketExample = new WebSocket('ws:\/\/echo.websocket.org123\/');<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u042d\u0442\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0443 \u043d\u0430\u0441 \u0438\u0434\u0435\u0442 \u0432 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u041c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043e\u0442 \u0441\u043e\u043a\u0435\u0442\u0430 \u043d\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0438\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0438. \u041d\u0430\u0448 \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c <code>store.dispatch(socketExampleActions.socketsDisconnect());<\/code> \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 <code>onClose<\/code> \u0432 \u043a\u0435\u0439\u0441 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0447\u0442\u043e \u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/7569536048df83f7e720b000243ed9798308df20\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/7569536048df83f7e720b000243ed9798308df20\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/7569536048df83f7e720b000243ed9798308df20<\/a><\/a><\/p>\n<p>  <\/p>\n<h3 id=\"prohod-vtoroy-delaem-soobscheniya\">\u041f\u0440\u043e\u0445\u043e\u0434 \u0432\u0442\u043e\u0440\u043e\u0439. \u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0430.<br \/>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u043a\u0448\u0435\u043d\u044b \u0432 <code>.\/src\/redux\/modules\/socketexamplemodule.js<\/code><\/p>\n<p>  <\/p>\n<pre><code>export const SOCKETS_MESSAGE_SENDING = 'SOCKETS_MESSAGE_SENDING'; export const SOCKETS_MESSAGE_SEND = 'SOCKETS_MESSAGE_SEND'; export const SOCKETS_MESSAGE_RECEIVING = 'SOCKETS_MESSAGE_RECEIVING'; export const SOCKETS_MESSAGE_RECEIVE = 'SOCKETS_MESSAGE_RECEIVE';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438<\/p>\n<p>  <\/p>\n<pre><code>export function socketsMessageSending(sendMessage) {   return {type: SOCKETS_MESSAGE_SENDING, message_send: sendMessage}; } export function socketsMessageSend(sendMessage) {   return {type: SOCKETS_MESSAGE_SEND, message_send: sendMessage}; } export function socketsMessageReceiving(receiveMessage) {   return {type: SOCKETS_MESSAGE_RECEIVING, message_receive: receiveMessage}; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0442\u043e\u043f. \u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 4 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430? \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u041d\u0430\u043c, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 socketsMessageReceive, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. \u0425\u043e\u0442\u044f \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u044d\u0442\u0438\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043c\u0435\u0447\u0430\u0442\u044c \u0444\u0430\u043a\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435, \u0442.\u0435. \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u0437\u043d\u0430\u043a &quot;\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043e&quot; (\u043d\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438).<\/p>\n<p>  <\/p>\n<h4 id=\"priem-soobscheniya\">\u041f\u0440\u0438\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/h4>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043e\u0442 \u0441\u043e\u043a\u0435\u0442\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.\/src\/redux\/middleware\/socketExampleMiddleware.js<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442 \u0441\u043e\u043a\u0435\u0442\u0430, \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0438\u0437 \u043d\u0435\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u0441\u0442\u043e\u0440 \u0447\u0435\u0440\u0435\u0437 \u044d\u043a\u0448\u0435\u043d.<\/p>\n<p>  <\/p>\n<pre><code>  const onMessage = (ws, store) =&gt; evt =&gt; {     \/\/ Parse the JSON message received on the websocket     const msg = evt.data;     store.dispatch(SocketExampleActions.socketsMessageReceiving(msg));   };<\/code><\/pre>\n<p>  <\/p>\n<pre><code>      case 'SOCKETS_CONNECT':         if (socketExample !== null) {           console.log('SOCKETS_DISCONNECTING');           store.dispatch(SocketExampleActions.socketsDisconnecting());           socket.close();         }         console.log('SOCKETS_CONNECTING');         socketExample = new WebSocket('wss:\/\/echo.websocket.org\/');         store.dispatch(SocketExampleActions.socketsConnecting());         socketExample.onmessage = onMessage(socketExample, store);         socketExample.onclose = onClose(store);         socketExample.onopen = onOpen(action.token);         break;<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"otpravka-soobscheniya\">\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f<\/h4>\n<p>  <\/p>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435 \u043f\u0438\u0448\u0435\u043c \u0440\u0435\u0434\u044e\u0441\u0435\u0440.<\/p>\n<p>  <\/p>\n<pre><code>      case 'SOCKETS_MESSAGE_SEND':         socketExample.send(action.message_send);         store.dispatch(SocketExampleActions.socketsMessageSending(action.message_send));         break;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. <code>action.message_send<\/code> \u2014 \u044d\u0442\u043e \u043e \u0447\u0435\u043c? \u0412\u0441\u0435, \u0447\u0442\u043e \u043c\u044b \u043a\u043b\u0430\u0434\u0435\u043c \u0432 \u0441\u0442\u043e\u0440 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <code>store =&gt; next =&gt; action =&gt;<\/code> \u0432 \u044d\u0442\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u044d\u043a\u0448\u0435\u043d, \u0442\u043e \u0432 \u044d\u0442\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u0441 \u0447\u0435\u043c \u043c\u044b \u044d\u0442\u043e\u0442 \u044d\u043a\u0448\u0435\u043d \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u0430\u043a \u0432 \u044d\u043a\u0448\u0435\u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b <code>.\/src\/components\/SocketExampleComponents\/SocketMessageLog.js<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u044d\u043a\u0448\u0435\u043d \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>  <\/p>\n<pre><code>  static propTypes = {     loaded: PropTypes.bool,     message: PropTypes.string,     connected: PropTypes.bool,     message_history: PropTypes.array,     socketsMessageSend: PropTypes.func   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u044d\u043a\u0448\u0435\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0445 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438\u0437 \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435.<\/p>\n<p>  <\/p>\n<pre><code>  handleSendButton = (event) =&gt; {     event.preventDefault();     this.props.socketsMessageSend(this.refs.message_text.value);     this.refs.message_text.value = '';   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0438\u0445 \u0441\u0442\u043e\u0440\u0430 \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>message_history<\/code> \u0438 react \u043d\u0430 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442 \u0438\u0445. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u043a\u0449\u0435\u043d \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435 <code>this.props.socketsMessageSend(this.refs.message_text.value)<\/code>, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0432 <code>action<\/code> \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u0440\u0430\u0431\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u043e\u043c \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u0435 <code>SOCKETS_MESSAGE_SEND<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>SOCKETS_MESSAGE_SENDING<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0444\u0435\u0439\u0441\u043d\u044b\u043c \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c. <\/p>\n<p>  <\/p>\n<p>\u0424\u0438\u043d\u0438\u0448!<\/p>\n<p>  <\/p>\n<blockquote><p>[\u0417\u0430\u043c\u0435\u0442\u043a\u0438 \u043d\u0430 \u043f\u043e\u043b\u044f\u0445] \u041e\u0433\u043b\u044f\u043d\u0438\u0442\u0435\u0441\u044c, \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u0441\u0435\u0431\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u0431\u044d\u043a\u044d\u043d\u0434\u0443 \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0437\u0430\u0434\u0443\u043c\u043a\u0438, \u043d\u0435 \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0439\u0442\u0435 \u2014 \u0434\u0435\u043b\u0430\u0439\u0442\u0435. <\/p>\n<p>  [\u0417\u0430\u043c\u0435\u0442\u043a\u0438 \u043d\u0430 \u043f\u043e\u043b\u044f\u0445] \u0410 \u0432\u0434\u0440\u0443\u0433 \u044f \u044d\u0442\u043e \u0432\u0441\u0435 \u043d\u0435 \u0437\u0440\u044f.<\/p><\/blockquote>\n<p>\u041a\u043e\u043c\u043c\u0438\u0442: <a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/40fd0b38f7a4b4acad141997e1ad9e7d978aa3b3\"><a href=\"https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/40fd0b38f7a4b4acad141997e1ad9e7d978aa3b3\">https:\/\/github.com\/valentinmk\/react-redux-universal-hot-example\/commit\/40fd0b38f7a4b4acad141997e1ad9e7d978aa3b3<\/a><\/a><\/p>\n<p>  <\/p>\n<h1 id=\"ps\">PS<\/h1>\n<p>  <\/p>\n<p>\u0420\u0430\u0431\u043e\u0447\u0430\u044f \u043a\u043e\u043f\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 <a href=\"https:\/\/www.gitbook.com\/book\/valentinmk\/react-redux-socket-tutorial\">\u0442\u0443\u0442<\/a>.<\/p>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/318148\/\"> https:\/\/habrahabr.ru\/post\/318148\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u042d\u0442\u043e \u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0435\u0434\u0443 \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0435\u0440\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u044f \u0440\u0435\u0448\u0430\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (single page app).<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0435\u043b\u044c\u044e \u043c\u043e\u0435\u0433\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (\u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e <del>\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e<\/del> \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430) \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441-\u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. \u041c\u044b (\u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438) \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u0448 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u2014 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c. \u041a\u043e\u0433\u0434\u0430 (\u0432 \u0433\u0438\u043f\u043e\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435) \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435 \u043f\u0440\u043e\u0444\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u0434\u0435\u043b\u0430, \u043e\u043d\u0438 \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 &quot;\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e&quot;.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0440\u043e\u043b\u0438 \u0443\u0447\u0435\u0431\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430 \u0447\u0430\u0442\u0430 \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u0443\u043c\u043e\u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c &quot;\u0431\u043e\u0442\u043e\u043c&quot;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 WebSocket. \u0411\u043e\u0442 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u044d\u0445\u043e \u0432\u0430\u0448\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 (\u043c\u044b \u0442\u0443\u0442 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435).<\/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-282838","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/282838","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=282838"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/282838\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=282838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=282838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=282838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}