+ actionAboutMe

package.json

@@ -27,6 +27,7 @@
     "react-sortable-tree": "^2.8.0",
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
+    "redux-saga": "^1.1.3",
     "redux-thunk": "^2.4.1",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"

src/actions/actionAboutMe.js

@@ -1,29 +1,35 @@
 import { gql } from "../helpers";
 import { actionPromise } from "../reducers";
+import { promiseWatcher, promiseWorker } from "../reducers/promiseReducer";
+import { call, select } from "redux-saga/effects";
 
-export const actionAboutMe = () => async (dispatch, getState) => {
+export const actionAboutMe = () => ({ type: "ABOUT_ME" });
+
+export function* aboutMeWorker() {
     const {
         auth: {
             payload: {
                 sub: { _id },
             },
         },
-    } = getState();
-    await dispatch(
+    } = yield select();
+
+    yield call(
+        promiseWorker,
         actionPromise(
             "aboutMe",
             gql(
                 `query AboutMe($q:String){
-                        UserFindOne(query:$q){
-                            _id username name nick avatar{
-                                _id url
-                            }
-                        }
-                    }`,
+                UserFindOne(query:$q){
+                    _id username name nick avatar{
+                        _id url
+                    }
+                }
+            }`,
                 {
                     q: JSON.stringify([{ _id }]),
                 }
             )
         )
     );
-};
+}

src/actions/actionCatAll.js

@@ -1,14 +1,11 @@
 import { actionPromise } from "../reducers";
 import { gql } from "../helpers";
 
-export const actionCatAll =
-    ({ limit = 20, skip = 0, promiseName = "catAll", orderBy = "_id" } = {}) =>
-    async (dispatch, getState) => {
-        dispatch(
-            actionPromise(
-                promiseName,
-                gql(
-                    `query CatAll($query:String){
+export const actionCatAll = ({ limit = 20, skip = 0, promiseName = "catAll", orderBy = "_id" } = {}) =>
+    actionPromise(
+        promiseName,
+        gql(
+            `query CatAll($query:String){
                         CategoryFind(query: $query){
                             _id name
                             parent{
@@ -22,17 +19,15 @@ export const actionCatAll =
                             }
                         }
                     }`,
+            {
+                query: JSON.stringify([
+                    {},
                     {
-                        query: JSON.stringify([
-                            {},
-                            {
-                                limit: !!limit ? limit : 100,
-                                skip: skip,
-                                orderBy,
-                            },
-                        ]),
-                    }
-                )
-            )
-        );
-    };
+                        limit: !!limit ? limit : 100,
+                        skip: skip,
+                        orderBy,
+                    },
+                ]),
+            }
+        )
+    );

src/actions/actionGoodsPopular.js

@@ -2,12 +2,11 @@ import { gql } from "../helpers";
 
 import { actionPromise } from "../reducers";
 
-export const actionGoodsPopular = () => async (dispatch, getState) => {
-    dispatch(
-        actionPromise(
-            "goodsPopular",
-            gql(
-                `query GoodsPopular($query:String){
+export const actionGoodsPopular = () =>
+    actionPromise(
+        "goodsPopular",
+        gql(
+            `query GoodsPopular($query:String){
                     GoodFind(query: $query){
                         _id name price amount
                         images{
@@ -15,16 +14,14 @@ export const actionGoodsPopular = () => async (dispatch, getState) => {
                         }
                     }
                 }`,
-                {
-                    query: JSON.stringify([
-                        {},
-                        {
-                            limit: 15,
-                            orderBy: "popular",
-                        },
-                    ]),
-                }
-            )
+            {
+                query: JSON.stringify([
+                    {},
+                    {
+                        limit: 15,
+                        orderBy: "popular",
+                    },
+                ]),
+            }
         )
     );
-};

src/actions/actionOrders.js

@@ -1,13 +1,10 @@
 import { actionPromise } from "../reducers";
 import { gql } from "../helpers";
-export const actionOrders =
-    ({ promiseName = "orders" } = {}) =>
-    (dispatch) =>
-        dispatch(
-            actionPromise(
-                promiseName,
-                gql(
-                    `
+export const actionOrders = ({ promiseName = "orders" } = {}) =>
+    actionPromise(
+        promiseName,
+        gql(
+            `
             query orders($query:String){
                 OrderFind(query:$query){
                     _id price createdAt status 
@@ -21,7 +18,6 @@ export const actionOrders =
                 }
             }
           `,
-                    { query: JSON.stringify([{}, { orderBy: "-createdAt", limit: 200 }]) }
-                )
-            )
-        );
+            { query: JSON.stringify([{}, { orderBy: "-createdAt", limit: 200 }]) }
+        )
+    );

src/actions/actionPageStart.js

@@ -3,18 +3,22 @@ import { actionCatAll } from "./actionCatAll";
 import { actionGoodsPopular } from "./actionGoodsPopular";
 import { actionOrders } from "./actionOrders";
 import { actionRootCats } from "./actionRootCats";
+import { put, select, call } from "redux-saga/effects";
+import { promiseWorker } from "../reducers/promiseReducer";
 
-export const actionPageStart = () => async (dispatch, getState) => {
-    dispatch(actionRootCats());
-    dispatch(actionCatAll());
-    dispatch(actionGoodsPopular());
+export const actionPageStart = () => ({ type: "PAGE_START" });
+
+export function* pageStartWorker() {
+    yield put(actionRootCats());
+    yield put(actionCatAll());
+    yield put(actionGoodsPopular());
 
     const {
         auth: { token },
-    } = getState();
+    } = yield select();
 
     if (token) {
-        dispatch(actionAboutMe());
-        dispatch(actionOrders());
+        yield put(actionAboutMe());
+        yield put(actionOrders());
     }
-};
+}

src/actions/actionRootCats.js

@@ -2,27 +2,24 @@ import { gql } from "../helpers";
 
 import { actionPromise } from "../reducers";
 
-export const actionRootCats = () => async (dispatch, getState) => {
-    dispatch(
-        actionPromise(
-            "rootCats",
-            gql(
-                `query rootCats($query:String) {
+export const actionRootCats = () =>
+    actionPromise(
+        "rootCats",
+        gql(
+            `query rootCats($query:String) {
                 CategoryFind(query: $query){
                     _id name
                 }
             }`,
-                {
-                    query: JSON.stringify([
-                        {
-                            parent: null,
-                        },
-                    ]),
-                }
-            )
+            {
+                query: JSON.stringify([
+                    {
+                        parent: null,
+                    },
+                ]),
+            }
         )
     );
-};
 
 // () => ({
 //     data: [

src/images/defaultAvatarImage.png:Zone.Identifier

@@ -1,4 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=https://www.google.com/
-HostUrl=https://avatarko.ru/img/kartinka/1/multfilm_gomer.png

src/reducers/index.js

@@ -1,8 +1,17 @@
 import { createStore, combineReducers, applyMiddleware } from "redux";
-import { composeWithDevTools } from "redux-devtools-extension";
+import { all, put, takeEvery, takeLatest, takeLeading, select } from "redux-saga/effects";
 import thunk from "redux-thunk";
+import createSagaMiddleware from "redux-saga";
 import { authReducer, actionAuthLogin, actionAuthLogout } from "./authReducer";
-import { promiseReducer, actionPending, actionFulfilled, actionRejected, actionPromise, actionPromiseClear } from "./promiseReducer";
+import {
+    promiseReducer,
+    actionPending,
+    actionFulfilled,
+    actionRejected,
+    actionPromise,
+    actionPromiseClear,
+    promiseWatcher,
+} from "./promiseReducer";
 import { cartReducer, actionCartAdd, actionCartChange, actionCartDelete, actionCartClear } from "./cartReducer";
 import {
     actionFeedCats,
@@ -34,6 +43,8 @@ export {
     actionFeedUsersFind,
     feedReducer,
 };
+
+const sagaMiddleware = createSagaMiddleware();
 export const store = createStore(
     combineReducers({
         auth: authReducer,
@@ -41,5 +52,11 @@ export const store = createStore(
         cart: cartReducer,
         feed: feedReducer,
     }),
-    composeWithDevTools(applyMiddleware(thunk))
+    applyMiddleware(sagaMiddleware)
 );
+
+function* rootSaga() {
+    yield all([promiseWatcher()]);
+}
+
+sagaMiddleware.run(rootSaga);

src/reducers/promiseReducer.js

@@ -1,3 +1,7 @@
+import { put, takeEvery } from "redux-saga/effects";
+import { aboutMeWorker } from "../actions/actionAboutMe";
+import { pageStartWorker } from "../actions/actionPageStart";
+
 export function promiseReducer(state = {}, { type, name, status, payload, error }) {
     if (type === "PROMISE") {
         return {
@@ -16,15 +20,23 @@ export const actionPending = (name) => ({ type: "PROMISE", name, status: "PENDIN
 export const actionFulfilled = (name, payload) => ({ type: "PROMISE", name, status: "FULFILLED", payload });
 export const actionRejected = (name, error) => ({ type: "PROMISE", name, status: "REJECTED", error });
 export const actionPromiseClear = (name) => ({ type: "PROMISE_CLEAR", name });
-export const actionPromise = (name, promise) => async (dispatch) => {
-    dispatch(actionPending(name));
 
-    try {
-        let payload = await promise;
-        dispatch(actionFulfilled(name, payload));
+export const actionPromise = (name, promise) => ({ type: "PROMISE_START", name, promise });
 
-        return payload;
+export function* promiseWorker(action) {
+    const { name, promise } = action;
+    yield put(actionPending(name));
+    try {
+        let data = yield promise;
+        yield put(actionFulfilled(name, data));
+        return data;
     } catch (error) {
-        dispatch(actionRejected(name, JSON.parse(error.message)));
+        yield put(actionRejected(name, error));
     }
-};
+}
+
+export function* promiseWatcher() {
+    yield takeEvery("PROMISE_START", promiseWorker);
+    yield takeEvery("PAGE_START", pageStartWorker);
+    yield takeEvery("ABOUT_ME", aboutMeWorker);
+}

yarn.lock

@@ -1033,6 +1033,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.6.3":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
+  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1756,6 +1763,50 @@
   resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a"
   integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==
 
+"@redux-saga/core@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
+  integrity sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@redux-saga/deferred" "^1.1.2"
+    "@redux-saga/delay-p" "^1.1.2"
+    "@redux-saga/is" "^1.1.2"
+    "@redux-saga/symbols" "^1.1.2"
+    "@redux-saga/types" "^1.1.0"
+    redux "^4.0.4"
+    typescript-tuple "^2.2.1"
+
+"@redux-saga/deferred@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.1.2.tgz#59937a0eba71fff289f1310233bc518117a71888"
+  integrity sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ==
+
+"@redux-saga/delay-p@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/delay-p/-/delay-p-1.1.2.tgz#8f515f4b009b05b02a37a7c3d0ca9ddc157bb355"
+  integrity sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==
+  dependencies:
+    "@redux-saga/symbols" "^1.1.2"
+
+"@redux-saga/is@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/is/-/is-1.1.2.tgz#ae6c8421f58fcba80faf7cadb7d65b303b97e58e"
+  integrity sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==
+  dependencies:
+    "@redux-saga/symbols" "^1.1.2"
+    "@redux-saga/types" "^1.1.0"
+
+"@redux-saga/symbols@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/symbols/-/symbols-1.1.2.tgz#216a672a487fc256872b8034835afc22a2d0595d"
+  integrity sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ==
+
+"@redux-saga/types@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
+  integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -8618,6 +8669,13 @@ redux-devtools-extension@^2.13.9:
   resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz#6b764e8028b507adcb75a1cae790f71e6be08ae7"
   integrity sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==
 
+redux-saga@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112"
+  integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==
+  dependencies:
+    "@redux-saga/core" "^1.1.3"
+
 redux-thunk@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
@@ -9841,6 +9899,25 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+typescript-compare@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425"
+  integrity sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==
+  dependencies:
+    typescript-logic "^0.0.0"
+
+typescript-logic@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-logic/-/typescript-logic-0.0.0.tgz#66ebd82a2548f2b444a43667bec120b496890196"
+  integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==
+
+typescript-tuple@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/typescript-tuple/-/typescript-tuple-2.2.1.tgz#7d9813fb4b355f69ac55032e0363e8bb0f04dad2"
+  integrity sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==
+  dependencies:
+    typescript-compare "^0.0.2"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"