rtk_guery_goodsList2

src/App.js

@@ -34,11 +34,11 @@ export const history = createBrowserHistory();
 const rootReducer = combineReducers({
   [authReducerPath]: persistReducer({ key: authReducerPath, storage }, authReducer),
   [authApiReducerPath]: authApiReducer,
+  [categoryApi.reducerPath]: persistReducer({ key: categoryApi.reducerPath, storage }, categoryApi.reducer),
+  [goodsApi.reducerPath]: persistReducer({ key: goodsApi.reducerPath, storage }, goodsApi.reducer),
   promise: promiseReducer,
   frontend: frontEndReducer,
-  [categoryApi.reducerPath]: categoryApi.reducer,
   orders: ordersReducer,
-  [goodsApi.reducerPath]: goodsApi.reducer,
   cart: cartReducer,
   cartData: cartGoodsReducer
 });

src/Components/Pagination.js

@@ -4,20 +4,17 @@ import { connect, useDispatch, useSelector } from 'react-redux';
 import { actionFindOrders } from '../reducers';
 import { actionSetGoodsPaging, actionSetOrdersPaging, getGoodsCount } from '../reducers';
 
-const Pagination = ({ allEntitiesCount, changePage, changePageFE, changeRowsPerPage, changeRowsPerPageFE }) => {
+const Pagination = ({ allEntitiesCount, fromPage, pageSize, changePage, changePageFE, changeRowsPerPage, changeRowsPerPageFE }) => {
     allEntitiesCount = allEntitiesCount ?? 0;
-    const [page, setPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(5);
+    //const [rowsPerPage, setRowsPerPage] = useState(5);
     const handleChangePage = (event, newPage) => {
-        setPage(newPage);
         if (changePage)
-            changePage(newPage, rowsPerPage);
-        changePageFE(newPage, rowsPerPage);
+            changePage(newPage);
+        changePageFE(newPage);
     };
     const handleChangeRowsPerPage = (event) => {
         let newPageSize = parseInt(event.target.value, 10);
-        setRowsPerPage(newPageSize);
-        setPage(0);
+        //setRowsPerPage(newPageSize);
         if (changeRowsPerPage)
             changeRowsPerPage(newPageSize);
         changeRowsPerPageFE(newPageSize);
@@ -27,8 +24,8 @@ const Pagination = ({ allEntitiesCount, changePage, changePageFE, changeRowsPerP
             rowsPerPageOptions={[5, 10, 25]}
             component="div"
             count={allEntitiesCount}
-            rowsPerPage={rowsPerPage}
-            page={page}
+            rowsPerPage={pageSize}
+            page={fromPage}
             onPageChange={handleChangePage}
             onRowsPerPageChange={handleChangeRowsPerPage}
         />
@@ -53,9 +50,11 @@ export const CGoodsPagination = () => {
     let state = useSelector(state => state);
     let allEntitiesCount = getGoodsCount(state);
     let dispatch = useDispatch();
-    let changePageFE = (fromPage, pageSize) => dispatch(actionSetGoodsPaging({ fromPage, pageSize }));
+    let changePageFE = (fromPage) => dispatch(actionSetGoodsPaging({ fromPage }));
     let changeRowsPerPageFE = pageSize => dispatch(actionSetGoodsPaging({ fromPage: 0, pageSize }));
-    return <Pagination allEntitiesCount={allEntitiesCount} changePageFE={changePageFE} changeRowsPerPageFE={changeRowsPerPageFE} />
+    let fromPage = state.frontend.goodsPaging.fromPage;
+    const pageSize = state.frontend.goodsPaging.pageSize;
+    return <Pagination allEntitiesCount={allEntitiesCount} fromPage={fromPage} pageSize={pageSize} changePageFE={changePageFE} changeRowsPerPageFE={changeRowsPerPageFE} />
 }
 
 /*export const CGoodsPagination = connect(

src/reducers/BAK/ordersReducer.js

@@ -0,0 +1,38 @@
+import { gqlFindOrders, gqlOrderFindOne, gqlOrdersCount, gqlAddOrder } from "../gql/gqlOrders";
+import { actionClearCart } from "./cartReducer";
+
+import { actionPromiseGeneric, createPromiseReducerSlice } from "./promiseReducer";
+
+const actionFindOrders = (fromPage = 0, pageSize = undefined, query = null) =>
+    actionPromiseOrders('orders', gqlFindOrders(fromPage, pageSize, query));
+
+const actionOrdersCount = (query = null) =>
+    actionPromiseOrders('ordersCount', gqlOrdersCount(query));
+
+const currentOrder = 'currentOrder';
+const actionOrderFindOne = (id) =>
+    actionPromiseOrders(currentOrder, gqlOrderFindOne(id));
+const getCurrentOrder = state => (
+    state.orders[currentOrder]?.payload
+)
+const actionPlaceOrder = () => {
+    return async (dispatch, getState) => {
+        let state = getState();
+        if (state.cart.goods.length > 0) {
+            let order = [];
+            for (let good of Object.values(state.cart.goods)) {
+                order.push({ good: { _id: good._id }, count: good.count });
+            }
+            dispatch(actionPromiseOrders('placedOrderInfo', gqlAddOrder(order)));
+            dispatch(actionClearCart());
+        }
+    }
+}
+
+
+const ordersReducerSlice = createPromiseReducerSlice('orders');
+const actionPromiseOrders = (name, promise) =>
+    actionPromiseGeneric(ordersReducerSlice, name, promise);
+
+let ordersReducer = ordersReducerSlice.reducer;
+export { ordersReducer, actionOrdersCount, actionFindOrders, actionOrderFindOne, actionPlaceOrder, getCurrentOrder }

src/reducers/categoryReducer.js

@@ -44,6 +44,7 @@ export const categoryApi = createApi({
                     `,
                 variables: { q: JSON.stringify([{ _id }]) }
             }),
+            invalidatesTags: (result, error, arg) => ([{type: 'GoodsCount', id: arg._id}])
         }),
     }),
 })

src/reducers/frontEndReducer.js

@@ -1,4 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit"
+import { categoryApi } from "./categoryReducer";
 import { goodsApi } from "./goodsReducer";
 
 const frontEndReducerSlice = createSlice({ //promiseReducer
@@ -22,7 +23,10 @@ const frontEndReducerSlice = createSlice({ //promiseReducer
             return state;
         },
         setGoodsPaging(state, action) {
-            state.goodsPaging = { fromPage: action.payload.page.fromPage, pageSize: action.payload.page.pageSize };
+            let {fromPage, pageSize} = action.payload.page;
+            fromPage = fromPage ?? state.goodsPaging?.fromPage;
+            pageSize = pageSize ?? state.goodsPaging?.pageSize;
+            state.goodsPaging = { fromPage, pageSize };
             return state;
         },
         setGoodsSearch(state, action) {
@@ -38,11 +42,16 @@ const frontEndReducerSlice = createSlice({ //promiseReducer
             return state;
         },
     },
-    extraReducers: builder =>
+    extraReducers: builder => {
         builder.addMatcher(goodsApi.endpoints.getGoodsCount.matchFulfilled,
             (state, { payload }) => {
                 state.goods = { goodsCount: { payload: payload.GoodCount } }
-            })
+            });
+        builder.addMatcher(categoryApi.endpoints.getCategoryById.matchFulfilled,
+            (state, { payload }) => {
+                state.goodsPaging.fromPage = 0;
+            });
+    }
 
 })
 
@@ -62,7 +71,6 @@ let actionSetOrderSearch = (searchStr) =>
         dispatch(frontEndReducerSlice.actions.setOrdersSearch({ searchStr }))
     }
 
-
 let actionSetCurrentCategory = (_id) =>
     async dispatch => {
         dispatch(frontEndReducerSlice.actions.setCurrentCategory({ _id }))

src/reducers/goodsReducer.js

@@ -13,7 +13,7 @@ export const prepareHeaders = (headers, { getState }) => {
 }
 const getGoodsSearchParams = (searchStr, queryExt) => (
     {
-        searchStr: searchStr, 
+        searchStr: searchStr,
         searchFieldNames: ["name", "description"],
         queryExt
     });
@@ -54,6 +54,7 @@ export const goodsApi = createApi({
                     variables: params
                 }
             },
+            providesTags: (result, error, id) => ([{ type: 'GoodsCount', id }]),
         }),
         getGoodById: builder.query({
             query: (_id) => {