{"id":391924,"date":"2024-06-29T10:06:26","date_gmt":"2024-06-29T10:06:26","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=391924"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=391924","title":{"rendered":"<span>Redux-saga: \u043e\u0431\u0437\u043e\u0440\u043d\u0430\u044f \u044d\u043a\u0441\u043a\u0443\u0440\u0441\u0438\u044f<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<div class=\"persona\" persona=\"true\"><img persona=\"true\" class=\"image persona__image\"\/><\/p>\n<h5 class=\"persona__heading\" persona=\"true\">\u0421\u0442\u0430\u043d\u0438\u0441\u043b\u0430\u0432 \u0411\u044b\u043a\u043e\u0432<\/h5>\n<p>Frontend \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Usetech<\/p>\n<\/div>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0431\u044b \u0445\u043e\u0442\u0435\u043b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 redux-saga. \u041e\u043d\u0430 \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e frontend-\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u043d\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0439, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u0435\u0448\u0430\u0442\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u0435\u0451 \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0441\u044c \u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043e\u0434\u043d\u0438\u0445 \u043b\u0438\u0431\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0442.\u043a. \u0432\u044b\u0431\u043e\u0440 \u2014 \u044d\u0442\u043e \u043b\u0438\u0447\u043d\u043e\u0435 \u0434\u0435\u043b\u043e \u043a\u0430\u0436\u0434\u043e\u0433\u043e, \u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e React, Redux, \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u0445 \u0438 \u0438\u0442\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u0445 \u0438\u0437 ES6.<\/p>\n<p>\u0418\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0447\u0442\u043e redux-saga \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 (side-effects, \u043b\u044e\u0431\u044b\u043c\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u0441 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0441\u0440\u0435\u0434\u043e\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440) \u0438 \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u0435 \u0438\u0445 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412 redux \u0441\u0430\u0433\u0430 \u2014 \u044d\u0442\u043e middleware (\u0441\u043b\u043e\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0430 (dispatch) \u044d\u043a\u0448\u0435\u043d\u0430 (action) \u0438 \u0434\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0435\u0433\u043e \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u043e\u043c (reducer)), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f, \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0442\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 redux. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 ES6 \u043a\u0430\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b (Generators), \u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043f\u043e\u0442\u043e\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<h2>\u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f Redux-saga  <\/h2>\n<p>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f redux-saga \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432 \u0441\u0430\u0433 \u2014 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c (watcher saga) \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c (worker saga).<\/p>\n<ul>\n<li>\n<p>watcher saga \u2014 \u00ab\u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0435\u0442\u00bb \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0435 \u044d\u043a\u0448\u0435\u043d\u044b, \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u044d\u0442\u043e\u0433\u043e \u044d\u043a\u0448\u0435\u043d\u0430 (worker saga);<\/p>\n<\/li>\n<li>\n<p>worker saga \u2014 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u2014 \u044d\u0442\u043e action. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043b\u043e\u044f action \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e redux-thunk:<\/p>\n<pre><code class=\"java\">const actionRequestStarted = () => ({   type: 'REQUEST_DATA_STARTED', }); const actionRequestSuccess = (data) => ({   type: 'REQUEST_DATA_SUCCESS',   data, }); const actionRequestFailed = (error) => ({   type: 'REQUEST_DATA_FAILED',   error, }); const fetchData = (url) => {   (dispatch) => {     dispatch(actionRequestStarted());     fetch(url)       .then((response) => response.json())       .then((data) => dispatch(actionRequestSuccess(data)))       .catch((error) => dispatch(actionRequestFailed(error)))   }; };<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u0430\u043a \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u043e\u0434\u0438\u043d \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u044c \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430). \u041d\u043e \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435? \u0418\u0445 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u0443\u0434\u0435\u0442 \u00ab\u0437\u0430\u0442\u044b\u043a\u0430\u0442\u044c\u00bb \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0447\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Redux-saga \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432\u0441\u044e \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432 \u0441\u043b\u043e\u0439 \u0441\u0430\u0433. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a <code>fetchData<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0430\u0433\u0438 \u2014 \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 action creator:<\/p>\n<pre><code class=\"java\">const actionRequestData = (url) => ({   type: 'REQUEST_DATA',   url, });<\/code><\/pre>\n<p>\u0412 \u0441\u043b\u043e\u0435 \u0441\u0430\u0433 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c watcher saga, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u044d\u043a\u0448\u0435\u043d\u0430\u043c\u0438:<\/p>\n<pre><code class=\"java\">function* fetchDataWatcherSaga() {   yield takeEvery('REQUEST_DATA', fetchDataWorkerSaga); }<\/code><\/pre>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>takeEvery<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0439 \u044d\u043a\u0448\u0435\u043d <code>'REQUEST_DATA'<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a <code>fetchDataWorkerSaga<\/code>. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0434\u0438\u043d \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a, \u0442\u043e \u043e\u043d\u0438 \u0432\u0441\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u044f\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u0423 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439: <code>takeLeading<\/code> \u0438 takeLatest, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043a\u0448\u0435\u043d \u2014 \u043f\u0435\u0440\u0432\u044b\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0439, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435.  <\/p>\n<p>Worker saga \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"java\">function* fetchDataWorkerSaga(action) {   yield put(actionRequestStarted());   try {     const data = yield call(fetch, action.url);     yield put(actionRequestSuccess(data));   } catch (error) {     yield put(actionRequestFailed(error));   } }<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u0430\u0433\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u044d\u043a\u0448\u0435\u043d\u0430, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u2014 url. \u0422.\u043a. \u0441\u0430\u0433\u0430 \u2014 \u044d\u0442\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440, \u0442\u043e \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0435\u0431\u044f \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c. \u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>yield<\/code> \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 <code>put(actionRequestStarted())<\/code>, \u0434\u0430\u043b\u0435\u0435 \u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e <code>yield<\/code>, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 <code>call<\/code> \u0438 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e <code>call<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f, \u0442\u043e \u0441\u0430\u0433\u0430 \u0432\u0435\u0440\u043d\u0451\u0442 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0414\u0430\u043b\u0435\u0435, \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f \u0443\u0434\u0430\u0447\u043d\u043e, \u0442\u043e \u0441\u0430\u0433\u0430 \u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e <code>yield<\/code> \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f <code>put(actionRequestSuccess(data))<\/code>. \u0415\u0441\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u043e\u0448\u0438\u0431\u043a\u0438, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d <code>put(actionRequestFailed(error))<\/code>. <code>Call<\/code> \u0438 <code>put<\/code> \u2014 \u044d\u0442\u043e \u0435\u0449\u0451 \u043e\u0434\u043d\u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 redux-saga. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:<\/p>\n<ul>\n<li>\n<p><strong>call(fn, \u2026args)<\/strong> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (fn) \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 args. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 fn \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435, \u0442\u0430\u043a \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0435 Promise, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c. Call \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u0442.\u0435. \u043e\u043d\u0430 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u0430\u0433\u0443 \u0434\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>fork(fn, \u2026args)<\/strong> \u2014 \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 call \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u043e \u0441 \u0442\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439. \u0422.\u0435. \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 fork(&#8230;) \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u043a\u043e\u0434\u0430, \u0430 \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0435\u0451 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>put(action)<\/strong> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 action, \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a dispatch(action). \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>select(selector, \u2026args)<\/strong> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 state. Selector \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 state, \u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u0443\u044e \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c. \u0412\u044b\u0437\u043e\u0432 select \u0431\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 (yield select()) \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a store.getState().<\/p>\n<\/li>\n<li>\n<p><strong>take(pattern)<\/strong> \u2014 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0430\u0433\u0438 \u0438 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0435 actions \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 action, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 pattern, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0430\u0433\u0438. \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0430\u0433\u0443  <\/h2>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0433\u043e\u0440\u043e\u0434\u0441\u043a\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a (LibraryAPI), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 id \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (userId) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 id \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a (libraryIds), \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0437\u0430\u043f\u0438\u0441\u0430\u043d.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 id \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a (libraryIds), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0436\u0430\u043d\u0440 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f (genre) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043d\u0438\u0433 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0436\u0430\u043d\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0441\u0432\u043e\u0435\u0433\u043e id \u0438 \u0436\u0430\u043d\u0440\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0448\u0451\u043b \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0434\u0430\u043b\u0435\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043d\u0438\u0433 \u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043d\u0438\u0433 \u0443 \u043d\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0435\u0433\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0430\u0433\u0443:<\/p>\n<pre><code class=\"java\">\/* booksActions.js *\/ const actionRequestBooks = (libraryIds, genre) => ({   type: 'REQUEST_BOOKS',   libraryIds,   genre }); const actionRequestBooksComplete = (books) => ({   type: 'REQUEST_BOOKS_COMPLETE',   books, }); \/* booksSaga.js *\/ function* fetchBooksWatcherSaga() {   yield takeEvery('REQUEST_BOOKS', fetchBooksWorkerSaga); } function* fetchBooksWorkerSaga(action) {   \/* \u0421\u0447\u0438\u0442\u0430\u0435\u043c \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 LibraryAPI *\/   const data = yield call(LibraryAPI.fetchBooks, action.libraryIds, action.genre);   yield put(actionRequestBooksComplete(data)); }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0430\u0433\u0438:  <\/p>\n<pre><code class=\"java\">\/* librariesActions.js *\/ const actionRequestData = (userId, genre) => ({   type: 'REQUEST_DATA',   userId,   genre, }); \/* librariesSaga.js *\/ function* fetchDataWatcherSaga() {   yield takeEvery('REQUEST_DATA', fetchDataWorkerSaga); }  function* fetchDataWorkerSaga(action) {   const librariesIds = yield call(LibraryAPI.fetchLibraries, action.userId); \/* (1) *\/   yield put(actionRequestBooks(librariesIds, action.genre)); \/* (2) *\/   const booksAction = yield take('REQUEST_BOOKS_COMPLETE'); \/* (3) *\/   yield fork(LogData, formatLoggedData(action.userId, action.genre, librariesIds, booksAction.books)); \/* (4) *\/ }<\/code><\/pre>\n<p>\u0412 worker saga \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 id \u0432\u0441\u0435\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0434\u0430\u043b\u0435\u0435 (2) \u043c\u044b \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u043c \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 <code>booksSaga<\/code>. \u041d\u0430\u0448\u0430 \u0441\u0430\u0433\u0430 \u0432 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442\u0441\u044f \u044d\u043a\u0448\u0435\u043d <code>'REQUEST_BOOKS_COMPLETE'<\/code>. \u0414\u0430\u043b\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0430\u0433\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043d\u0438\u0433, \u0438 \u043f\u043e\u0441\u043b\u0435 \u0435\u0451 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0448\u0443 \u0441\u0430\u0433\u0443 (3). \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c (4) \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (<code>LogData<\/code>), \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0445\u0435\u043b\u043f\u0435\u0440\u043e\u043c <code>formatLoggedData<\/code> \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<h2>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e action \u0438\u0437 \u0432\u0441\u0435\u0445  <\/h2>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u2014 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0430\u0448\u0431\u043e\u0440\u0434 (dashboard), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044e. \u0427\u0430\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u0430\u0432\u0430\u043c\u0438 (\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u0430\u0432).<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043e\u0431\u0435\u0440\u043d\u0451\u043c \u0442\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u0435\u043d\u044e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>RightRequiredWrap<\/code>. \u0412 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f <code>children<\/code> \u0438 <code>right<\/code> (\u0442\u0438\u043f \u043f\u0440\u0430\u0432, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c children). \u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u0430\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u0435 (store) \u0438, \u0435\u0441\u043b\u0438 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u0430\u0432\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0445 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"java\">import { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; \/* \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0445\u0435\u043b\u043f\u0435\u0440, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0449\u0430\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 *\/ import { isValueInArray } from '\/helpers'; export const RightRequiredWrap = ({ right, children }) => {   const { userRights, loadingStatus } = useSelector((store) => store.rights);   const userId = useSelector((store) => store.userId);   const dispatch = useDispatch();   useEffect(     () => {       if (loadingStatus === PENDING &amp;&amp; !userRights.length) {         dispatch(actionRequestUserRights(userId));       }     },     [loadingStatus, userRights.length, userId, dispatch],   );   if (!isValueInArray(right, userRights)) {     return null;   }   return children; };<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e (\u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0439 \u044d\u043a\u0448\u0435\u043d \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a), \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>takeLeading<\/code>.<\/p>\n<pre><code class=\"java\">function* fetchUserRightsWatcherSaga() {   yield takeLeading('REQUEST_USER_RIGHTS', fetchUserRightsWorkerSaga); }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043a\u0448\u0435\u043d\u0430 \u0441\u0430\u0433\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 <code>fetchUserRightsWorkerSaga<\/code> \u0438 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u0434\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0430\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f). \u0417\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0441\u0430\u0433\u0430 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0435\u0442 \u044d\u043a\u0448\u0435\u043d\u044b, \u043f\u043e\u043a\u0430 \u043e\u043d\u0430 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.  <\/p>\n<h2>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 redux-saga  <\/h2>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c 2 \u043f\u0443\u0442\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 redux-saga:<\/p>\n<ol>\n<li>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (Unit Testing). Saga \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440, \u0433\u0434\u0435 \u0432\u0441\u0435 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u00ab\u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c\u00bb, \u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442 (call, put \u0438 \u0442.\u0434.). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0442\u0435\u0441\u0442\u0430\u0445 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u00ab\u0438\u0434\u0442\u0438\u00bb \u043f\u043e \u0441\u0430\u0433\u0435 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u043c. \u0413\u043b\u0430\u0432\u043d\u044b\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c \u043e\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0438 \u043f\u0440\u0438 \u043a\u0430\u043a\u043e\u043c-\u043b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432 \u043a\u043e\u0434\u0435 \u0442\u0435\u0441\u0442\u044b \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (Integration Testing). \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0430\u0433\u0438 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u043c\u0438. \u041d\u0430\u0441 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u0430\u043a\u043e\u0439 \u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a redux-saga \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u043e\u0434\u043d\u0443 \u0438\u0437 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u2014 <strong>redux-saga-test-plan<\/strong>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0441\u0430\u0433\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>fetchDataWorkerSaga<\/code> \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/p>\n<pre><code class=\"java\">function* fetchDataWorkerSaga(action) {   yield put(actionRequestStarted());   try {     const data = yield call(fetch, action.url);     yield put(actionRequestSuccess(data));   } catch (error) {     yield put(actionRequestFailed(error));   } }<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0439\u0434\u0435\u043c \u043f\u043e \u0441\u0430\u0433\u0435 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c <code>fetch<\/code>:  <\/p>\n<pre><code class=\"java\">it ('unit test with success fetch', () => {   testSaga(fetchWorkerSaga, { type: 'REQUEST_DATA', url: 'testUrl' })   .next()   .put({ type: 'REQUEST_DATA_STARTED' })   .next()   .call(fetch, 'testUrl')   .next('testData')   .put({ type: 'REQUEST_DATA_SUCCESS', data: 'testData' })   .next()   .isDone(); });<\/code><\/pre>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>testSaga<\/code> \u043c\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u0441\u0430\u0433\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c action, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0430\u0433\u0438. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434 <code>.next()<\/code> \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u0443 \u0438 \u043c\u043e\u0436\u0435\u043c \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u0430\u0433\u0438, \u0442\u0430\u043a \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u0451 <code>(.next('testData'))<\/code>.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u0440\u043e\u0439\u0434\u0451\u043c \u043f\u043e \u0441\u0430\u0433\u0435, \u043d\u043e \u0443\u0436\u0435 \u0441\u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 fetch \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430:<\/p>\n<pre><code class=\"java\">it ('unit test with error fetch', () => {   const error = new Error('testError');    testSaga(fetchWorkerSaga, { type: 'REQUEST_DATA', url: 'testUrl' })   .next()   .put({ type: 'REQUEST_DATA_STARTED' })   .next()   .call(fetch, 'testUrl')   .next()   .throw(error)   .put({ type: 'REQUEST_DATA_FAILED', error })   .next()   .isDone(); });<\/code><\/pre>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u043a\u043e\u0434 \u0441\u0430\u0433\u0438 \u0438 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043c\u0430\u043b\u043e \u0447\u0435\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u043c\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043d\u0435 \u0432\u0430\u0436\u0435\u043d \u043d\u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043d\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 state \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0430\u0433\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 reducer:<\/p>\n<pre><code class=\"java\">\/* reducer.js *\/ const initialState = {   data: null,   error: null,   loadingStatus: null, }; export const reducer = (state = initialState, action) => {   switch(action.type) {     case 'REQUEST_DATA_STARTED':       return { ...state, loadingStatus: 'LOADING' }     case 'REQUEST_DATA_SUCCESS':       return { ...state, data: action.data, loadingStatus: 'LOADED' }     case 'REQUEST_DATA_FAILED':       return { ...state, error: action.error, loadingStatus: 'FAILED' }     default: return state   } };<\/code><\/pre>\n<p>\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u2014 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 <code>fetch<\/code> \u0438 \u0441 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0438:<\/p>\n<pre><code class=\"java\">it('integration test with success fetch', async () => {   const testSaga = expectSaga(fetchWorkerSaga, { type: 'REQUEST_DATA', url: 'testUrl' })     .provide([       [call(fetch, 'testUrl'), 'testData']     ])     .withReducer(reducer);   const result = await testSaga.run();   expect(result.storeState).toEqual({ data: 'testData', error: null, loadingStatus: 'LOADED' }); });<\/code><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434\u043e\u043c <code>expectSaga<\/code> \u043c\u044b \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0443 \u0441\u0430\u0433\u0443. \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u0443\u044e \u0441\u0430\u0433\u0443 <code>(fetchWorkerSaga)<\/code> \u0438 action, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0435\u0451 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 <code>({ type: 'REQUEST_DATA', url: 'testUrl' })<\/code>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e .provide \u043c\u044b \u043c\u043e\u043a\u0430\u0435\u043c (mock) \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 call (\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0435 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u0447\u0442\u043e \u0438 <code>call<\/code> \u0438\u0437 redux-saga) \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 <code>fetch<\/code> \u0438 <code>'testUrl'. .withReducer<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 reducer, \u0432\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 initialState. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0430\u0433\u0443, \u0434\u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 state, \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0441 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u043c.<\/p>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e:<\/p>\n<pre><code class=\"java\">it('integration test with error fetch', async () => {   const error = new Error('testError');    const testSaga = expectSaga(fetchWorkerSaga, { type: 'REQUEST_DATA', url: 'testUrl' })     .provide([       [call(fetch, 'testUrl'), throwError(error)]     ])     .withReducer(reducer);      const result = await testSaga.run();   expect(result.storeState).toEqual({ data: null, error, loadingStatus: 'FAILED' }); });  <\/code><\/pre>\n<h2>\u0418\u0442\u043e\u0433<\/h2>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 redux-saga, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0430\u0442\u044c \u0441 \u0435\u0451 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438 \u043a\u0430\u043a \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0441\u0430\u0433 \u0442\u0435\u0441\u0442\u0430\u043c\u0438.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043d\u044f\u0442\u0438\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u0438\u0437\u043b\u0438\u0448\u043d\u0435\u0439, \u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0439.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/735914\/\"> https:\/\/habr.com\/ru\/articles\/735914\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<div class=\"persona\" persona=\"true\">\n<h5 class=\"persona__heading\" persona=\"true\">\u0421\u0442\u0430\u043d\u0438\u0441\u043b\u0430\u0432 \u0411\u044b\u043a\u043e\u0432<\/h5>\n<p>Frontend \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Usetech<\/p>\n<\/div>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0431\u044b \u0445\u043e\u0442\u0435\u043b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 redux-saga. \u041e\u043d\u0430 \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e frontend-\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u043d\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0439, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u0435\u0448\u0430\u0442\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u0435\u0451 \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0441\u044c \u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043e\u0434\u043d\u0438\u0445 \u043b\u0438\u0431\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0442.\u043a. \u0432\u044b\u0431\u043e\u0440 \u2014 \u044d\u0442\u043e \u043b\u0438\u0447\u043d\u043e\u0435 \u0434\u0435\u043b\u043e \u043a\u0430\u0436\u0434\u043e\u0433\u043e, \u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e React, Redux, \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u0445 \u0438 \u0438\u0442\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u0445 \u0438\u0437 ES6.<\/p>\n<p>\u0418\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0447\u0442\u043e redux-saga \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 (side-effects, \u043b\u044e\u0431\u044b\u043c\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u0441 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0441\u0440\u0435\u0434\u043e\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440) \u0438 \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u0435 \u0438\u0445 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0412 redux \u0441\u0430\u0433\u0430 \u2014 \u044d\u0442\u043e middleware (\u0441\u043b\u043e\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0430 (dispatch) \u044d\u043a\u0448\u0435\u043d\u0430 (action) \u0438 \u0434\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0435\u0433\u043e \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u043e\u043c (reducer)), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f, \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0442\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 redux. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 ES6 \u043a\u0430\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b (Generators), \u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0448\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043f\u043e\u0442\u043e\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<h2>\u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f Redux-saga  <\/h2>\n<p>\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f redux-saga \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432 \u0441\u0430\u0433 \u2014 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c (watcher saga) \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c (worker saga).<\/p>\n<ul>\n<li>\n<p>watcher saga \u2014 \u00ab\u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0435\u0442\u00bb \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0435 \u044d\u043a\u0448\u0435\u043d\u044b, \u043f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u044d\u0442\u043e\u0433\u043e \u044d\u043a\u0448\u0435\u043d\u0430 (worker saga);<\/p>\n<\/li>\n<li>\n<p>worker saga \u2014 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u2014 \u044d\u0442\u043e action. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043b\u043e\u044f action \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e redux-thunk:<\/p>\n<pre><code class=\"java\">const actionRequestStarted = () => ({   type: 'REQUEST_DATA_STARTED', }); const actionRequestSuccess = (data) => ({   type: 'REQUEST_DATA_SUCCESS',   data, }); const actionRequestFailed = (error) => ({   type: 'REQUEST_DATA_FAILED',   error, }); const fetchData = (url) => {   (dispatch) => {     dispatch(actionRequestStarted());     fetch(url)       .then((response) => response.json())       .then((data) => dispatch(actionRequestSuccess(data)))       .catch((error) => dispatch(actionRequestFailed(error)))   }; };<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u0430\u043a \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u043e\u0434\u0438\u043d \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u043c\u043e\u043a\u0430\u0442\u044c \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430). \u041d\u043e \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435? \u0418\u0445 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u0443\u0434\u0435\u0442 \u00ab\u0437\u0430\u0442\u044b\u043a\u0430\u0442\u044c\u00bb \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0447\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Redux-saga \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432\u0441\u044e \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432 \u0441\u043b\u043e\u0439 \u0441\u0430\u0433. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a <code>fetchData<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0430\u0433\u0438 \u2014 \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 action creator:<\/p>\n<pre><code class=\"java\">const actionRequestData = (url) => ({   type: 'REQUEST_DATA',   url, });<\/code><\/pre>\n<p>\u0412 \u0441\u043b\u043e\u0435 \u0441\u0430\u0433 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c watcher saga, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u044d\u043a\u0448\u0435\u043d\u0430\u043c\u0438:<\/p>\n<pre><code class=\"java\">function* fetchDataWatcherSaga() {   yield takeEvery('REQUEST_DATA', fetchDataWorkerSaga); }<\/code><\/pre>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>takeEvery<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0439 \u044d\u043a\u0448\u0435\u043d <code>'REQUEST_DATA'<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a <code>fetchDataWorkerSaga<\/code>. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0434\u0438\u043d \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a, \u0442\u043e \u043e\u043d\u0438 \u0432\u0441\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u044f\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e. \u0423 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439: <code>takeLeading<\/code> \u0438 takeLatest, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043a\u0448\u0435\u043d \u2014 \u043f\u0435\u0440\u0432\u044b\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0439, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435.  <\/p>\n<p>Worker saga \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"java\">function* fetchDataWorkerSaga(action) {   yield put(actionRequestStarted());   try {     const data = yield call(fetch, action.url);     yield put(actionRequestSuccess(data));   } catch (error) {     yield put(actionRequestFailed(error));   } }<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u0430\u0433\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u044d\u043a\u0448\u0435\u043d\u0430, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u2014 url. \u0422.\u043a. \u0441\u0430\u0433\u0430 \u2014 \u044d\u0442\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440, \u0442\u043e \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0435\u0431\u044f \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c. \u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>yield<\/code> \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 <code>put(actionRequestStarted())<\/code>, \u0434\u0430\u043b\u0435\u0435 \u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e <code>yield<\/code>, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 <code>call<\/code> \u0438 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e <code>call<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f, \u0442\u043e \u0441\u0430\u0433\u0430 \u0432\u0435\u0440\u043d\u0451\u0442 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0414\u0430\u043b\u0435\u0435, \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f \u0443\u0434\u0430\u0447\u043d\u043e, \u0442\u043e \u0441\u0430\u0433\u0430 \u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e <code>yield<\/code> \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f <code>put(actionRequestSuccess(data))<\/code>. \u0415\u0441\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u043e\u0448\u0438\u0431\u043a\u0438, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d <code>put(actionRequestFailed(error))<\/code>. <code>Call<\/code> \u0438 <code>put<\/code> \u2014 \u044d\u0442\u043e \u0435\u0449\u0451 \u043e\u0434\u043d\u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 redux-saga. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:<\/p>\n<ul>\n<li>\n<p><strong>call(fn, \u2026args)<\/strong> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (fn) \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 args. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 fn \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435, \u0442\u0430\u043a \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0435 Promise, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c. Call \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u0442.\u0435. \u043e\u043d\u0430 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u0430\u0433\u0443 \u0434\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>fork(fn, \u2026args)<\/strong> \u2014 \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 call \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u043e \u0441 \u0442\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439. \u0422.\u0435. \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 fork(&#8230;) \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u043a\u043e\u0434\u0430, \u0430 \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0435\u0451 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>put(action)<\/strong> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 action, \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a dispatch(action). \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>select(selector, \u2026args)<\/strong> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 state. Selector \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 state, \u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u0443\u044e \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u044c. \u0412\u044b\u0437\u043e\u0432 select \u0431\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 (yield select()) \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043a store.getState().<\/p>\n<\/li>\n<li>\n<p><strong>take(pattern)<\/strong> \u2014 \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0430\u0433\u0438 \u0438 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0435 actions \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 action, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 pattern, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u0430\u0433\u0438. \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0430\u0433\u0443  <\/h2>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0433\u043e\u0440\u043e\u0434\u0441\u043a\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a (LibraryAPI), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 id \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (userId) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 id \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a (libraryIds), \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0437\u0430\u043f\u0438\u0441\u0430\u043d.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 id \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a (libraryIds), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0436\u0430\u043d\u0440 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f (genre) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043d\u0438\u0433 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0436\u0430\u043d\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0441\u0432\u043e\u0435\u0433\u043e id \u0438 \u0436\u0430\u043d\u0440\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0448\u0451\u043b \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0434\u0430\u043b\u0435\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043d\u0438\u0433 \u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043d\u0438\u0433 \u0443 \u043d\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0435\u0433\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0430\u0433\u0443:<\/p>\n<pre><code class=\"java\">\/* booksActions.js *\/ const actionRequestBooks = (libraryIds, genre) => ({   type: 'REQUEST_BOOKS',   libraryIds,   genre }); const actionRequestBooksComplete = (books) => ({   type: 'REQUEST_BOOKS_COMPLETE',   books, }); \/* booksSaga.js *\/ function* fetchBooksWatcherSaga() {   yield takeEvery('REQUEST_BOOKS', fetchBooksWorkerSaga); } function* fetchBooksWorkerSaga(action) {   \/* \u0421\u0447\u0438\u0442\u0430\u0435\u043c \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 LibraryAPI *\/   const data = yield call(LibraryAPI.fetchBooks, action.libraryIds, action.genre);   yield put(actionRequestBooksComplete(data)); }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0430\u0433\u0438:  <\/p>\n<pre><code class=\"java\">\/* librariesActions.js *\/ const actionRequestData = (userId, genre) => ({   type: 'REQUEST_DATA',   userId,   genre, }); \/* librariesSaga.js *\/ function* fetchDataWatcherSaga() {   yield takeEvery('REQUEST_DATA', fetchDataWorkerSaga); }  function* fetchDataWorkerSaga(action) {   const librariesIds = yield call(LibraryAPI.fetchLibraries, action.userId); \/* (1) *\/   yield put(actionRequestBooks(librariesIds, action.genre)); \/* (2) *\/   const booksAction = yield take('REQUEST_BOOKS_COMPLETE'); \/* (3) *\/   yield fork(LogData, formatLoggedData(action.userId, action.genre, librariesIds, booksAction.books)); \/* (4) *\/ }<\/code><\/pre>\n<p>\u0412 worker saga \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 id \u0432\u0441\u0435\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0434\u0430\u043b\u0435\u0435 (2) \u043c\u044b \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u043c \u044d\u043a\u0448\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 <code>booksSaga<\/code>. \u041d\u0430\u0448\u0430 \u0441\u0430\u0433\u0430 \u0432 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442\u0441\u044f \u044d\u043a\u0448\u0435\u043d <code>'REQUEST_BOOKS_COMPLETE'<\/code>. \u0414\u0430\u043b\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0430\u0433\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043d\u0438\u0433, \u0438 \u043f\u043e\u0441\u043b\u0435 \u0435\u0451 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0448\u0443 \u0441\u0430\u0433\u0443 (3). \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c (4) \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (<code>LogData<\/code>), \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0445\u0435\u043b\u043f\u0435\u0440\u043e\u043c <code>formatLoggedData<\/code> \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<h2>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e action \u0438\u0437 \u0432\u0441\u0435\u0445  <\/h2>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u2014 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0430\u0448\u0431\u043e\u0440\u0434 (dashboard), \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044e. \u0427\u0430\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u0430\u0432\u0430\u043c\u0438 (\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u0430\u0432).<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043e\u0431\u0435\u0440\u043d\u0451\u043c \u0442\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u0435\u043d\u044e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>RightRequiredWrap<\/code>. \u0412 \u043d\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f <code>children<\/code> \u0438 <code>right<\/code> (\u0442\u0438\u043f \u043f\u0440\u0430\u0432, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c children). \u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u0430\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u0435 (store) \u0438, \u0435\u0441\u043b\u0438 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u0430\u0432\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0445 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"java\">import { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; \/* \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0445\u0435\u043b\u043f\u0435\u0440, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0449\u0430\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 *\/ import { isValueInArray } from '\/helpers'; export const RightRequiredWrap = ({ right, children }) => {   const { userRights, loadingStatus } = useSelector((store) => store.rights);   const userId = useSelector((store) => store.userId);   const dispatch = useDispatch();   useEffect(     () => {       if (loadingStatus === PENDING &amp;&amp; !userRights.length) {         dispatch(actionRequestUserRights(userId));       }     },     [loadingStatus, userRights.length, userId, dispatch],   );   if (!isValueInArray(right, userRights)) {     return null;   }   return children; };<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e (\u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0439 \u044d\u043a\u0448\u0435\u043d \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a), \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>takeLeading<\/code>.<\/p>\n<pre><code class=\"java\">function* fetchUserRightsWatcherSaga() {   yield takeLeading('REQUEST_USER_RIGHTS', fetchUserRightsWorkerSaga); }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-391924","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/391924","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=391924"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/391924\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=391924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=391924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=391924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}