rtk_all items works

src/Components/Good.js

@@ -37,12 +37,7 @@ export const AvatarGroupOriented = styled((props) => {
     },
     ".MuiAvatar-root": { /*width: 20, height: 20,*/ marginLeft: 1 }
 }));
-const Good = ({ /*good = {},*/ maxWidth = 'md', showAddToCard = true, addToCart = undefined }) => {
-    const { _id } = useParams();
-    const { isLoading, data } = useGetGoodByIdQuery(_id);
-    let good = isLoading ? { name: 'loading', goods: [] } : data?.GoodFindOne;
-    const dispatch = useDispatch();
-    dispatch(actionSetCurrentGood(_id));
+const Good = ({ good, maxWidth = 'md', showAddToCard = true, actionAddGoodToCart }) => {
     let [currentImageIndex, setCurrentImageIndex] = useState(0);
     let [expanded, setExpanded] = useState(false);
     const handleExpandClick = () => setExpanded(!expanded);
@@ -99,7 +94,7 @@ const Good = ({ /*good = {},*/ maxWidth = 'md', showAddToCard = true, addToCart
                     {
                         showAddToCard && (
                             <Button size='small' color='primary'
-                                onClick={() => addToCart(good)}
+                                onClick={actionAddGoodToCart}
                             >
                                 Add to cart
                             </Button>
@@ -119,7 +114,13 @@ const Good = ({ /*good = {},*/ maxWidth = 'md', showAddToCard = true, addToCart
     )
 }
 
-const CGood = connect(state => ({}),
-    { addToCart: actionAddGoodToCart })(Good);
+const CGood = (maxWidth = 'md', showAddToCard = true) => {
+    const { _id } = useParams();
+    const { isLoading, data } = useGetGoodByIdQuery(_id);
+    let good = isLoading ? { name: 'loading', goods: [] } : data?.GoodFindOne;
+    const dispatch = useDispatch();
+    dispatch(actionSetCurrentGood(_id));
 
+    return <Good good={good} maxWidth={maxWidth} showAddToCard={showAddToCard} actionAddGoodToCart={() => dispatch(actionAddGoodToCart(good))} />
+}
 export { CGood };

src/Components/GoodItem.js

@@ -6,10 +6,10 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { AvatarAnimated } from './AvatarAnimated';
 import { MyLink } from './MyLink';
 import { AvatarGroupOriented, ExpandMore } from './Good';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { actionAddGoodToCart } from '../reducers';
 
-export const GoodItem = ({ good = {}, maxWidth = 'md', showAddToCard = true, addToCart = undefined }) => {
+export const GoodItem = ({ good, maxWidth = 'md', showAddToCard = true, actionAddGoodToCart }) => {
     let [currentImageIndex, setCurrentImageIndex] = useState(0);
     let [expanded, setExpanded] = useState(false);
     const handleExpandClick = () => setExpanded(!expanded);
@@ -64,7 +64,7 @@ export const GoodItem = ({ good = {}, maxWidth = 'md', showAddToCard = true, add
                     </ExpandMore>
                     {showAddToCard && (
                         <Button size='small' color='primary'
-                            onClick={() => addToCart(good)}
+                            onClick={actionAddGoodToCart}
                         >
                             Add to cart
                         </Button>
@@ -83,6 +83,8 @@ export const GoodItem = ({ good = {}, maxWidth = 'md', showAddToCard = true, add
     );
 };
 
-const CGoodItem = connect(state => ({ /*good: getCurrentGood(state)*/ }),
-    { addToCart: actionAddGoodToCart })(GoodItem);
+const CGoodItem = ({ good, maxWidth = 'md', showAddToCard = true }) => {
+    const dispatch = useDispatch();
+    return <GoodItem good={good} maxWidth={maxWidth} showAddToCard={showAddToCard} actionAddGoodToCart={() => dispatch(actionAddGoodToCart(good))} />
+}
 export { CGoodItem };