rtk_orders yepp

src/App.js

@@ -13,6 +13,8 @@ import { CRootCats } from './Components';
 
 import './App.css';
 import { CCategory } from './Components/Category';
+import { categoryReducer } from './reducers/categoryReducer';
+import { ordersReducer } from './reducers/ordersReducer';
 
 export const history = createBrowserHistory();
 //export const store = createStore(combineReducers({ promise: promiseReducer, auth: authReducer, frontend: frontEndReducer }), applyMiddleware(thunk));
@@ -20,7 +22,9 @@ export const store = configureStore({
   reducer: {
     auth: authReducer,
     promise: promiseReducer,
-    frontend: frontEndReducer
+    frontend: frontEndReducer,
+    category: categoryReducer,
+    orders: ordersReducer
   }
 });
 store.subscribe(() => console.log(store.getState()))

src/Components/Category.js

@@ -7,10 +7,9 @@ import { useParams } from "react-router-dom"
 import { MyLink } from "."
 import { actionCategoryFindOne } from "../reducers"
 import { GoodsList } from "./GoodsList"
-import { Pagination } from "./Pagination"
 import { CatsList } from "./RootCats"
 
-const CSubCategories = connect(state => ({ cats: state.promise.catFindOne?.payload?.subCategories }),
+const CSubCategories = connect(state => ({ cats: state.category.catFindOne?.payload?.subCategories }),
     { loadData: actionCategoryFindOne })(CatsList);
 
 const Category = (props) => {
@@ -18,7 +17,7 @@ const Category = (props) => {
     const { _id } = useParams();
     useEffect(() => {
         loadData(_id)
-    }, [_id]);
+    }, [_id, loadData]);
     let csubCats = false;
     return (
         <>
@@ -64,7 +63,7 @@ const Category = (props) => {
     )
 }
 
-const CCategory = connect(state => ({ cat: state.promise.catFindOne?.payload }),
+const CCategory = connect(state => ({ cat: state.category.catFindOne?.payload }),
     { loadData: actionCategoryFindOne })(Category);
 
 export { CCategory };

src/Components/OrderList.js

@@ -193,7 +193,7 @@ const COrdersList = connect(
     state => {
         return (
             {
-                orders: state.promise.orders?.payload,
+                orders: state.orders?.orders?.payload,
                 searchStr: state.frontend.ordersSearchStr,
                 fromPage: state.frontend.ordersPaging.fromPage,
                 pageSize: state.frontend.ordersPaging.pageSize,

src/Components/Pagination.js

@@ -36,7 +36,7 @@ const Pagination = ({ allEntitiesCount, changePage, changePageFE, changeRowsPerP
 export const COrdersPagination = connect(
     state => (
         {
-            allEntitiesCount: state.promise.ordersCount?.payload,
+            allEntitiesCount: state.orders.ordersCount?.payload,
         }),
     {
         changePageFE: (fromPage, pageSize) => actionSetOrdersPaging({ fromPage, pageSize }),

src/Components/RootCats.js

@@ -1,7 +1,6 @@
 import { List, ListItem, ListItemButton, ListItemText } from "@mui/material";
 import { connect } from "react-redux";
 import { MyLink } from ".";
-import { actionCategoryFindOne } from "../reducers";
 
 export const CatsList = ({ cats = [] }) => {
     return (
@@ -12,7 +11,9 @@ export const CatsList = ({ cats = [] }) => {
         </List>
     )
 };
-const CRootCats = connect(state => ({ cats: state.promise.rootCats?.payload }))(CatsList)
+const CRootCats = connect(state => {
+    let a = '';
+    return { cats: state.category.rootCats?.payload }})(CatsList)
 
 const CatItem = ({ cat }) => {
     return (

src/reducers/categoryReducer.js

@@ -1,9 +1,46 @@
+/*import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { store } from '../App';*/
 import { gqlCategoryFindOne, gqlRootCats } from '../jql/gqlCategories';
-import { actionPromise } from './promiseReducer';
-const actionRootCats = () =>
-    actionPromise('rootCats', gqlRootCats());
+import { createPromiseReducerSlice, actionPromiseGeneric } from './promiseReducer';
+
 
+const actionRootCats = () =>
+    actionPromiseCategory('rootCats', gqlRootCats());
 const actionCategoryFindOne = (id) =>
-    actionPromise('catFindOne', gqlCategoryFindOne(id));
+    actionPromiseCategory('catFindOne', gqlCategoryFindOne(id));
+
+const categoryReducerSlice = createPromiseReducerSlice('category');
+const actionPromiseCategory = (name, promise) =>
+    actionPromiseGeneric(categoryReducerSlice, name, promise);
+
+/*const actionCategoryFindOneThunk = createAsyncThunk('category', id => gqlCategoryFindOne(id));
+const actionCategoryFindOne = id => dispatch =>
+    dispatch(actionCategoryFindOneThunk(id));
+
+const actionRootCats = createAsyncThunk('category', () => gqlRootCats());
+
+const categorySlice = createSlice({
+    name: 'category',
+    initialState: {},
+    reducers: {
+        pending(state, payload) { //if (type === 'promise/pending')
+            //state.rootCats = { status: 'PENDING' }
+        },
+        fulfilled(state, { payload }) { //if (type === 'promise/fulfilled')
+            if (payload?.data?.CategoryFind)
+                state.rootCats = { status: 'FULFILLED', payload: payload?.data?.CategoryFind }
+            if (payload?.data?.CategoryFindOne)
+                state.catFindOne = { status: 'FULFILLED', payload: payload?.data?.CategoryFindOne }
+        },
+        rejected(state, errorData) { //if (type === 'promise/rejected')
+            let { error } = errorData;
+            state.rootCats = { status: 'REJECTED', error }
+        },
+    }
+})
+
+let categoryReducer = categorySlice.reducer;
+*/
 
-export { actionRootCats, actionCategoryFindOne }
+let categoryReducer = categoryReducerSlice.reducer;
+export { categoryReducer, actionRootCats, actionCategoryFindOne }

src/reducers/frontEndReducer.js

@@ -1,5 +1,4 @@
 import { createSlice } from "@reduxjs/toolkit"
-import {store} from "../App";
 
 const frontEndReducerSlice = createSlice({ //promiseReducer
     name: 'frontend', //префикс типа наподобие AUTH_
@@ -10,44 +9,31 @@ const frontEndReducerSlice = createSlice({ //promiseReducer
             return state;
         },
         setOrdersPaging(state, action) {
-            state.ordersPaging = { fromPage: action.page.fromPage, pageSize: action.page.pageSize };
+            state.ordersPaging = { fromPage: action.payload.page.fromPage, pageSize: action.payload.page.pageSize };
             return state;
         },
         setOrdersSearch(state, action) {
-            state.ordersSearchStr = action.searchStr;
+            state.ordersSearchStr = action.payload.searchStr;
             return state;
         }
     }
 })
 
 let frontEndReducer = frontEndReducerSlice.reducer;
-let actionSetSidebar = open => 
+let actionSetSidebar = open =>
     async dispatch => {
         dispatch(frontEndReducerSlice.actions.setSidebar({ open }))
     }
 
-let actionSetOrdersPaging = frontEndReducerSlice.actions.setOrdersPaging;
-let actionSetOrderSearch = frontEndReducerSlice.actions.setOrdersSearch;
-export { frontEndReducer, actionSetSidebar, actionSetOrdersPaging, actionSetOrderSearch };
-
+let actionSetOrdersPaging = ({ fromPage, pageSize }) =>
+    async dispatch => {
+        dispatch(frontEndReducerSlice.actions.setOrdersPaging({ page: { fromPage, pageSize } }))
+    }
 
-/*
-export function frontEndReducer(state = { sidebar: {}, ordersPaging: { fromPage: 0, pageSize: 5 } }, action) {                   // диспетчер обработки login
-    if (action) {
-        if (action.type === 'SET_SIDE_BAR') {
-            return { ...state, sidebar: { opened: action.open } };
-        }
-        if (action.type === 'SET_ORDERS_PAGING') {
-            return { ...state, ordersPaging: { fromPage: action.page.fromPage, pageSize: action.page.pageSize } };
-        }
-        if (action.type === 'SET_ORDERS_SEARCH') {
-            return { ...state, ordersSearchStr: action.searchStr };
-        }
+let actionSetOrderSearch = ({ searchStr }) =>
+    async dispatch => {
+        dispatch(frontEndReducerSlice.actions.setOrdersPaging({ searchStr }))
     }
-    return state;
-}
-export const actionSetSidebar = open => ({ type: 'SET_SIDE_BAR', open });
 
-export const actionSetOrdersPaging = (page = { fromPage: 0, pageSize: 5 }) => ({ type: 'SET_ORDERS_PAGING', page });
-export const actionSetOrderSearch = searchStr => ({ type: 'SET_ORDERS_SEARCH', searchStr });
-*/
+
+export { frontEndReducer, actionSetSidebar, actionSetOrdersPaging, actionSetOrderSearch };

src/reducers/ordersReducer.js

@@ -1,8 +1,15 @@
 import { gqlFindOrders, gqlOrdersCount } from "../jql/gqlOrders";
-import { actionPromise } from "./promiseReducer";
+import { actionPromiseGeneric, createPromiseReducerSlice } from "./promiseReducer";
 
-export const actionFindOrders = (fromPage = 0, pageSize = undefined, query = null) =>
-    actionPromise('orders', gqlFindOrders(fromPage, pageSize, query));
+const actionFindOrders = (fromPage = 0, pageSize = undefined, query = null) =>
+    actionPromiseOrders('orders', gqlFindOrders(fromPage, pageSize, query));
 
-export const actionOrdersCount = (query = null) =>
-    actionPromise('ordersCount', gqlOrdersCount(query));
+const actionOrdersCount = (query = null) =>
+    actionPromiseOrders('ordersCount', gqlOrdersCount(query));
+
+const ordersReducerSlice = createPromiseReducerSlice('orders');
+const actionPromiseOrders = (name, promise) =>
+    actionPromiseGeneric(ordersReducerSlice, name, promise);
+
+let ordersReducer = ordersReducerSlice.reducer;
+export { ordersReducer, actionOrdersCount, actionFindOrders }

src/reducers/promiseReducer.js

@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit"
 
-const promiseReducerSlice = createSlice({ //promiseReducer
-    name: 'promise', //префикс типа наподобие AUTH_
+const createPromiseReducerSlice = name => createSlice({ //promiseReducer
+    name: name, //префикс типа наподобие AUTH_
     initialState: {}, //state={} в параметрах
     reducers: {
         pending(state, { payload: { name } }) { //if (type === 'promise/pending')
@@ -14,9 +14,11 @@ const promiseReducerSlice = createSlice({ //promiseReducer
             state[name] = { status: 'REJECTED', error }
         },
     }
-})
+});
 
-const actionPromise = (name, promise) =>
+const promiseReducerSlice = createPromiseReducerSlice('promise');
+
+const actionPromiseGeneric = (promiseReducerSlice, name, promise) =>
     async dispatch => {
         try {
             dispatch(promiseReducerSlice.actions.pending({ name }))
@@ -31,12 +33,15 @@ const actionPromise = (name, promise) =>
         }
     }
 
+const actionPromise = (name, promise) => 
+    actionPromiseGeneric(promiseReducerSlice, name, promise);
+
 
 let promiseReducer = promiseReducerSlice.reducer;
 let actionPending = promiseReducerSlice.actions.pending;
 let actionFulfilled = promiseReducerSlice.actions.fulfilled;
 let actionRejected = promiseReducerSlice.actions.rejected;
-export { promiseReducer, actionPending, actionFulfilled, actionRejected, actionPromise };
+export { promiseReducer, actionPending, actionFulfilled, actionRejected, actionPromise, createPromiseReducerSlice, actionPromiseGeneric };
 
 /*export function promiseReducer(state = {}, action) {                   // диспетчер обработки
     if (action) {