{"id":314734,"date":"2020-12-11T21:00:30","date_gmt":"2020-12-11T21:00:30","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=314734"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=314734","title":{"rendered":"\u042d\u043f\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0430\u0433\u0430 \u043f\u0440\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 custom hook \u0434\u043b\u044f React (\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b, sagas, rxjs) \u0447\u0430\u0441\u0442\u044c 3"},"content":{"rendered":"\n
\n

\u0427\u0430\u0441\u0442\u044c 1. \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a<\/a><\/p>\n

\u0427\u0430\u0441\u0442\u044c 2. \u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b<\/a><\/p>\n

Redux-saga<\/h2>\n

\u042d\u0442\u043e middleware \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0434 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 redux. \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u043b\u0435\u0436\u0438\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432. \u0422.\u0435. \u043a\u043e\u0434 \u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f \u043d\u0430 \u043f\u0430\u0443\u0437\u0443 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c — \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0442\u0438\u043f\u043e\u043c \u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. <\/p>\n

\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 redux-saga (middleware)<\/strong> \u043a\u0430\u043a \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430 \u043a\u0430\u043c\u0435\u0440 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f. \u0412 \u043a\u0430\u043c\u0435\u0440\u044b \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043a\u043b\u0430\u0441\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430 \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0440\u043e\u043a \u0438 \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0445 \u043e\u0442\u0442\u0443\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u043e. \u0415\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u044b\u0439 put<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043a \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0443 \u0438 \u043f\u0440\u043e\u0441\u0438\u0442 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u043a\u0430\u043c\u0435\u0440\u0443 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 (\u044d\u0444\u0444\u0435\u043a\u0442). \u0415\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u044b\u0439 take<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043a \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0443 \u0438 \u043f\u0440\u043e\u0441\u0438\u0442 \u0435\u043c\u0443 \u0432\u044b\u0434\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0442\u0438\u043f\u043e\u043c (\u044d\u0444\u0444\u0435\u043a\u0442). \u0414\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440, \u043f\u043e \u043f\u0440\u043e\u0441\u044c\u0431\u0435 take<\/strong>, \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u0432\u0441\u0435 \u043a\u0430\u043c\u0435\u0440\u044b \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u0435\u0441\u043b\u0438 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u0442, \u0442\u043e take<\/strong> \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u043e\u043c \u0438 \u0436\u0434\u0451\u0442, \u043f\u043e\u043a\u0430 put<\/strong> \u043d\u0435 \u043f\u0440\u0438\u043d\u0435\u0441\u0451\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0434\u043b\u044f take<\/strong> \u0442\u0438\u043f\u043e\u043c. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0438\u0434\u044b \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u044b\u0445 (takeEvery \u0438 \u0442.\u0434.). <\/p>\n

\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u043a\u0430\u043c\u0435\u0440 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f — \u044d\u0442\u043e «\u0440\u0430\u0437\u0432\u0435\u0441\u0442\u0438» \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u043b\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u044f (\u043d\u0435\u043a\u0438\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438).<\/p>\n

Redux-saga — \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0430 \u0432\u043e\u0442 \u0433\u043b\u0430\u0432\u043d\u044b\u043c \u0442\u0443\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0442, \u043a\u0442\u043e \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u044b\u0445 \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442. \u042d\u0442\u0438\u043c «\u043a\u0442\u043e-\u0442\u043e» \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 (\u043d\u0430\u0437\u043e\u0432\u0443 \u0435\u0451 \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0441\u043f\u0440\u0430\u0432\u043a\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f saga<\/strong> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 middleware<\/strong>. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c middleware<\/strong> \u043c\u043e\u0436\u043d\u043e \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e middleware.run(saga, …args)<\/em><\/strong> \u0438 runSaga(options, saga, …args). <\/em><\/strong>Saga — \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n

\u041c\u0435\u043d\u044f \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f redux-saga \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0431\u0435\u0437 redux. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u043c\u0435\u0442\u043e\u0434 runSaga(…) \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:<\/p>\n

runSaga(options, saga, …args)<\/strong><\/p>\n

saga — \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430;<\/p>\n

args — \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u0432 saga;<\/p>\n

options — \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 «\u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442» \u0440\u0430\u0431\u043e\u0442\u0443 redux-saga. \u0414\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432\u0441\u0435\u0433\u043e \u0442\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n

channel — \u043a\u0430\u043d\u0430\u043b, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f;<\/p>\n

dispatch — \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u0441\u043b\u0430\u0442\u044c redux-saga \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e put.<\/p>\n

getState — \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 state, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f redux-saga. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0445\u0443\u043a\u043e\u043c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 state.<\/p>\n

\u0412\u0430\u0440\u0438\u0430\u043d\u0442 6. Redux-saga \u043a\u0430\u043a \u043a\u0430\u043d\u0430\u043b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439<\/h2>\n

\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0445\u0443\u043a\u0430 \u0441 saga \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0432\u0430. \u0421\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043a\u0430\u043d\u0430\u043b channel (\u043a\u0430\u043c\u0435\u0440\u044b \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f) \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b redux-saga. \u0421\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043a\u0430\u043d\u0430\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 — eventsChannel. \u042d\u0442\u043e \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u0430\u043d\u0430\u043b\u0430! \u0412\u0435\u0440\u043d\u0443\u0441\u044c \u043a \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043a\u0430\u043c\u0435\u0440\u0430\u043c\u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f.<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043c\u0435\u0440\u044b \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f (channel), \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440 (redux-saga)<\/p>\n

const sagaChannelRef = useRef(stdChannel());<\/code><\/pre>\n
\u041f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 runSaga() redux-saga \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u0442\u0441\u044f \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u0430\u043c\u0435\u0440 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f. <\/p>\n
runSaga(   {     channel: sagaChannelRef.current,     dispatch: () => {},     getState: () => {},   },   saga );<\/code><\/pre>\n
\u041a\u0430\u043c\u0435\u0440\u044b \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u044b (channel), \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d (redux-saga) \u0438 \u0434\u0430\u043b\u0435\u0435 \u044d\u0442\u0438\u043c \u0432\u0441\u0435\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 (\u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0437\u0430\u043f\u0443\u0441\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 saga)<\/p>\n
\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 saga) \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u0430\u043d\u0430\u043b \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 (\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u044d\u0442\u0438\u0445 \u043a\u0430\u043d\u0430\u043b\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432).<\/p>\n
const eventsChannel = yield call(getImageLoadingSagas, imgArray);<\/code><\/pre>\n
function getImageLoadingSagas(imagesArray) {   return eventChannel((emit) => {     for (const img of imagesArray) {       const imageChecker = new Image();       imageChecker.addEventListener(\"load\", () => {         emit(true);       });       imageChecker.addEventListener(\"error\", () => {         emit(true);       });       imageChecker.src = img.url;     }     setTimeout(() => {       \/\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043a\u0430\u043d\u0430\u043b\u0430 \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443       emit(END);     }, 100000);     return () => {      };   }, buffers.expanding(10)); }<\/code><\/pre>\n
\u0422.\u0435. \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 saga) \u043f\u0440\u043e\u0441\u0438\u0442 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430 (redux-saga) \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u043e\u0433\u043e put, \u043d\u043e \u0438 \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 (eventsChannel). \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 (eventChannel) \u0443 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430 (redux-saga) \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u044b\u0439 take, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u043e\u0438\u0442 \u0440\u044f\u0434\u043e\u043c \u0441 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u043e\u043c \u0438 \u0436\u0434\u0451\u0442 \u043e\u0442 \u043d\u0435\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n
yield take(eventsChannel);<\/code><\/pre>\n
\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0443 (redux-saga) \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 eventChannel, \u043e\u043d \u0442\u0443\u0442 \u0436\u0435 \u043e\u0442\u0434\u0430\u0435\u0442 \u0435\u0433\u043e take, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440\u0443 (\u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0443 saga). \u0421\u0430\u043c take \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440\u043e\u043c \u0438 \u0436\u0434\u0451\u0442 \u043e\u0442 \u043d\u0435\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0439. <\/p>\n
\u041f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 saga) \u043e\u0442\u0434\u0430\u0435\u0442 \u044d\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440\u0443 (\u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0443 putCounter) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e call(). \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 saga (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 saga) \u0431\u0443\u0434\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 putCounter (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 putCounter) \u043d\u0435 \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0442\u0441\u044f (\u0442.\u0435. saga \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f putCounter).<\/p>\n
yield call(putCounter);<\/code><\/pre>\n
function* putCounter() {   dispatch({     type: ACTIONS.SET_COUNTER,     data: stateRef.current.counter + stateRef.current.counterStep,   });   yield take((action) => {     return action.type === \"STATE_UPDATED\";   }); }<\/code><\/pre>\n
\u0427\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 putCounter (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 putCounter). \u0414\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0445\u0443\u043a\u0430 \u0438 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u043e\u0433\u043e take \u043a \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0443 (redux-saga) \u0437\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u0441 \u0442\u0438\u043f\u043e\u043c STATE_UPDATED \u0438 \u0436\u0434\u0451\u0442 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u043e\u0433\u043e.<\/p>\n
\u0412 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u0438 \u0435\u0449\u0451 \u0440\u0430\u0437 \u043e\u043f\u0438\u0448\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0445\u043e\u0440\u043e\u0432\u043e\u0434 (\u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0440\u0435\u0437 \u043d\u0430 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442).<\/p>\n
\u041f\u043e\u0441\u044b\u043b\u044c\u043d\u044b\u0439 take(eventChannel) \u0441\u0442\u043e\u0438\u0442 (\u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u0446\u0438\u043a\u043b\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0435 saga) \u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440\u043e\u043c saga (\u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c saga). \u041f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 saga (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 saga) \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043f\u043e\u043a\u0430 \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 putCounter (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 putCounter) \u043d\u0435 \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0442\u0441\u044f. \u041f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 putCounter (\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 putCounter), \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0436\u0434\u0451\u0442 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u043e\u0433\u043e take, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u043e\u0438\u0442 \u0440\u044f\u0434\u043e\u043c \u0441 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u043e\u043c (redux-saga) \u0438 \u0436\u0434\u0451\u0442 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u043e\u0433\u043e put, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u043d\u0435\u0441\u0442\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u0442\u0438\u043f\u043e\u043c STATE_UPDATED. \u041a\u043e\u0440\u043e\u0447\u0435 «\u0414\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043b \u0414\u0436\u0435\u043a». <\/p>\n
\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0435\u0441\u044c \u0445\u043e\u0440\u043e\u0432\u043e\u0434 «\u0437\u0430\u0441\u0442\u044b\u043b» \u0432 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e-\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f STATE_UPDATED. \u041a\u0441\u0442\u0430\u0442\u0438, \u0432 \u043a\u0430\u043d\u0430\u043b\u0435 eventChannel \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f  \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u0441\u0442\u044b\u0432\u0448\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0443\u0444\u0435\u0440 \u0441 \u043a\u0430\u043d\u0430\u043b\u043e\u043c eventChannel, \u0442\u043e \u044d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430 (redux-saga). \u041d\u043e \u0431\u0443\u0444\u0435\u0440 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0432 \u0442\u0430\u043c\u0431\u0443\u0440\u0435 \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u043c\u0435\u0440\u0430\u043c\u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f (\u0431\u0443\u0444\u0435\u0440\u0435) \u0442\u043e\u043b\u043f\u044f\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0442 eventChannel.<\/p>\n
\u0418 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u043e\u0433\u043e put \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0445\u0443\u043a useEffect<\/p>\n
useEffect(() => { \t...     sagaChannelRef.current.put({ type: \"STATE_UPDATED\" });  \t... }, [state]);<\/code><\/pre>\n
\u041f\u043e\u0441\u044b\u043b\u044c\u043d\u044b\u0439 put \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 STATE_UPDATED \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0443 (redux-saga). <\/p>\n
\u0414\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440 (redux-saga) \u043e\u0442\u0434\u0430\u0451\u0442 \u0435\u0433\u043e take, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0438\u0441\u043b\u0430\u043b \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 putCounter. <\/p>\n
\u041f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 putCounter \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043f\u0430\u0441\u0441\u0430\u0436\u0438\u0440\u0443 saga, \u0447\u0442\u043e \u043e\u043d \u043e\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u043b\u0441\u044f.<\/p>\n
\u041f\u0430\u0441\u0441\u0430\u0436\u0438\u0440 saga, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0441\u044b\u043b\u044c\u043d\u043e\u0433\u043e take \u0437\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0442 eventChannel<\/p>\n
Take \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0443 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0437\u044f\u043b \u0435\u0433\u043e \u0438\u0437 \u0431\u0443\u0444\u0435\u0440\u0430.<\/p>\n
\u041a\u0440\u0443\u0433 \u0437\u0430\u043c\u043a\u043d\u0443\u043b\u0441\u044f.<\/p>\n
\n\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0445\u0443\u043a\u0430 \u0441 redux-saga \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u0430\u043d\u0430\u043b\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/summary>\n
\n
import { useReducer, useEffect, useRef } from \"react\"; import { reducer, initialState, ACTIONS } from \".\/state\"; import { runSaga, eventChannel, stdChannel, buffers, END } from \"redux-saga\"; import { call, take } from \"redux-saga\/effects\";  const PRELOADER_SELECTOR = \".preloader__wrapper\"; const PRELOADER_COUNTER_SELECTOR = \".preloader__counter\";  const usePreloader = () => {   const [state, dispatch] = useReducer(reducer, initialState);    const stateRef = useRef(state);   const sagaChannelRef = useRef(stdChannel());    const preloaderEl = document.querySelector(PRELOADER_SELECTOR);   const counterEl = document.querySelector(PRELOADER_COUNTER_SELECTOR);    useEffect(() => {     const imgArray = document.querySelectorAll(\"img\");     if (imgArray.length > 0) {       dispatch({         type: ACTIONS.SET_COUNTER_STEP,         data: Math.floor(100 \/ imgArray.length) + 1,       });        function* putCounter() {         dispatch({           type: ACTIONS.SET_COUNTER,           data: stateRef.current.counter + stateRef.current.counterStep,         });         yield take((action) => {           return action.type === \"STATE_UPDATED\";         });       }        function* saga() {         const eventsChannel = yield call(getImageLoadingSagas, imgArray);          try {           while (true) {             yield take(eventsChannel);              yield call(putCounter);           }         } finally {           \/\/channel closed         }       }        runSaga(         {           channel: sagaChannelRef.current,           dispatch: () => {},           getState: () => {},         },         saga       );     }   }, []);    useEffect(() => {     stateRef.current = state;      if (stateRef.current.counterStep != 0 && stateRef.current.counter != 0) {       sagaChannelRef.current.put({ type: \"STATE_UPDATED\" });     }      if (counterEl) {       stateRef.current.counter < 100         ? (counterEl.innerHTML = `${stateRef.current.counter}%`)         : hidePreloader(preloaderEl);     }   }, [state]);    return; };  function getImageLoadingSagas(imagesArray) {   return eventChannel((emit) => {     for (const img of imagesArray) {       const imageChecker = new Image();       imageChecker.addEventListener(\"load\", () => {         emit(true);       });       imageChecker.addEventListener(\"error\", () => {         emit(true);       });       imageChecker.src = img.url;     }     setTimeout(() => {       \/\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043a\u0430\u043d\u0430\u043b\u0430 \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443       emit(END);     }, 100000);     return () => {            };   }, buffers.expanding(10)); }  const hidePreloader = (preloaderEl) => {   preloaderEl.remove(); };  export default usePreloader; <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\u042f \u0431\u044b\u043b \u0442\u0440\u0435\u0437\u0432\u044b\u0439, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0438\u0441\u0430\u043b. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c, \u043f\u0438\u0442\u044c \u0442\u043e\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. <\/p>\n
\u0412\u0430\u0440\u0438\u0430\u043d\u0442 7. Redux-saga + useReducer = useReducerAndSaga<\/h3>\n
\u0412 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 6 \u0441\u0430\u0433\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u0430\u043a \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e state \u0445\u0443\u043a\u0430. \u041f\u043e\u0433\u0443\u0433\u043b\u0438\u0432 \u043d\u0430\u0448\u0451\u043b \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/a> \u0445\u0443\u043a\u0430 useReducerAndSaga<\/p>\n
\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u0430\u043c\u0435\u0440 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/p>\n
\n\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 useReducerAndSaga.js<\/summary>\n
\n
import { useReducer, useEffect, useRef } from \"react\"; import { runSaga, stdChannel, buffers } from \"redux-saga\";  export function useReducerAndSaga(reducer, state0, saga, sagaOptions) {   const [state, reactDispatch] = useReducer(reducer, state0);   const sagaEnv = useRef({ state: state0, pendingActions: [] });    function dispatch(action) {     console.log(\"useReducerAndSaga: react dispatch\", action);     reactDispatch(action);     console.log(\"useReducerAndSaga: post react dispatch\", action);     \/\/ dispatch to sagas is done in the commit phase     sagaEnv.current.pendingActions.push(action);   }    useEffect(() => {     console.log(\"useReducerAndSaga: update saga state\");     \/\/ sync with react state, *should* be safe since we're in commit phase     sagaEnv.current.state = state;     const pendingActions = sagaEnv.current.pendingActions;     \/\/ flush any pending actions, since we're in commit phase, reducer     \/\/ should've handled all those actions     if (pendingActions.length > 0) {       sagaEnv.current.pendingActions = [];       console.log(\"useReducerAndSaga: flush saga actions\");       pendingActions.forEach((action) => sagaEnv.current.channel.put(action));       sagaEnv.current.channel.put({ type: \"REACT_STATE_READY\", state });     }   });    \/\/ This is a one-time effect that starts the root saga   useEffect(() => {     sagaEnv.current.channel = stdChannel();      const task = runSaga(       {         ...sagaOptions,         channel: sagaEnv.current.channel,         dispatch,         getState: () => {           return sagaEnv.current.state;         }       },       saga     );     return () => task.cancel();   }, []);    return [state, dispatch]; } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\u0412\u0441\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0431\u044b\u043b\u0438 \u0432\u044b\u0434\u0435\u0441\u0435\u043d\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b sagas.js<\/p>\n
\n\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 sagas.js<\/summary>\n
\n
import { eventChannel, buffers } from \"redux-saga\"; import { call, select, take, put } from \"redux-saga\/effects\"; import { ACTIONS, getCounterStep, getCounter, END } from \".\/state\";  export const getImageLoadingSagas = (imagesArray) => {   return eventChannel((emit) => {     for (const img of imagesArray) {       const imageChecker = new Image();              imageChecker.addEventListener(\"load\", () => {         emit(true);       });       imageChecker.addEventListener(\"error\", () => {         emit(true);       });       imageChecker.src = img.src;     }     setTimeout(() => {       \/\/\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043a\u0430\u043d\u0430\u043b\u0430 \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443       emit(END);     }, 100000);     return () => {};   }, buffers.fixed(20)); };  function* putCounter() {   const currentCounter = yield select(getCounter);   const counterStep = yield select(getCounterStep);   yield put({ type: ACTIONS.SET_COUNTER, data: currentCounter + counterStep });   yield take((action) => {     return action.type === \"REACT_STATE_READY\";   }); }  function* launchLoadingEvents(imgArray) {   const eventsChannel = yield call(getImageLoadingSagas, imgArray);    while (true) {     yield take(eventsChannel);     yield call(putCounter);   } }  export function* saga() {   while (true) {     const { data } = yield take(ACTIONS.SET_IMAGES);     yield call(launchLoadingEvents, data);   } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\u041d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f state. \u0411\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d action SET_IMAGES \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0434\u043b\u044f counter \u0438 counterStep<\/p>\n
\n\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 state.js<\/summary>\n
\n
const SET_COUNTER = \"SET_COUNTER\"; const SET_COUNTER_STEP = \"SET_COUNTER_STEP\"; const SET_IMAGES = \"SET_IMAGES\";  export const initialState = {   counter: 0,   counterStep: 0,   images: [], }; export const reducer = (state, action) => {   switch (action.type) {     case SET_IMAGES:       return { ...state, images: action.data };     case SET_COUNTER:       return { ...state, counter: action.data };     case SET_COUNTER_STEP:       return { ...state, counterStep: action.data };     default:       throw new Error(\"This action is not applicable to this component.\");   } };  export const ACTIONS = {   SET_COUNTER,   SET_COUNTER_STEP,   SET_IMAGES, };  export const getCounterStep = (state) => state.counterStep; export const getCounter = (state) => state.counter; <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0443, \u043a\u043e\u0434 \u0445\u0443\u043a\u0430 usePreloader \u0441\u0442\u0430\u043b \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u043c.<\/p>\n
\n\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 usePreloader.js<\/summary>\n
\n
import { useEffect } from \"react\"; import { reducer, initialState, ACTIONS } from \".\/state\"; import { useReducerAndSaga } from \".\/useReducerAndSaga\"; import { saga } from \".\/sagas\";  const PRELOADER_SELECTOR = \".preloader__wrapper\"; const PRELOADER_COUNTER_SELECTOR = \".preloader__counter\";  const usePreloader = () => {   const [state, dispatch] = useReducerAndSaga(reducer, initialState, saga);    const preloaderEl = document.querySelector(PRELOADER_SELECTOR);   const counterEl = document.querySelector(PRELOADER_COUNTER_SELECTOR);    useEffect(() => {     const imgArray = document.querySelectorAll(\"img\");     if (imgArray.length > 0) {       dispatch({         type: ACTIONS.SET_COUNTER_STEP,         data: Math.floor(100 \/ imgArray.length) + 1,       });       dispatch({         type: ACTIONS.SET_IMAGES,         data: imgArray,       });     }   }, []);    useEffect(() => {     if (counterEl) {       state.counter < 100         ? (counterEl.innerHTML = `${state.counter}%`)         : hidePreloader(preloaderEl);     }   }, [state.counter]);    return; };  const hidePreloader = (preloaderEl) => {   preloaderEl.remove(); };  export default usePreloader; <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\u0418\u0442\u043e\u0433\u043e<\/h2>\n
\u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e:<\/p>\n