i was devide the data and state of the application into slice,i used the sliceReducer in this project because it have so many component and have a lot of products categories to buy so when i try to make the first components which is about mechanics product this error always display “×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.”
so this mecanicsSliceProducts:
import {createSlice} from '@reduxjs/toolkit';
const mecanicsProducts = [{name:"aprilia404", description: "Aprilia404 cylindres en V longitudinal de 65° 4 temps,refroidissement au liquide distribution bi-arbre à cames (DOHC) quatre soupapes par cylindre ", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/aprilia404', number: 12 ,moteur:"4 cylindres", vitesseMax: "140km/h", reservoir: '55l', price: 3000, quantity: 0, id: 0},
{name: "Aprilia Dosudoro", description:"L’Aprilia Dorsoduro est la moto fun par excellence.Née d'une intuition brillante d’Aprilia, elle a été créée dans le seul but de donner autant de plaisir que possible ", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/apriliascooter', number: 8 ,moteur:"bicylindre", vitesseMax:"260km/h", reservoir: "12l" ,price: 12500, quantity: 0, id:1},
{name: 'Aprilia Sr 50', description:"Estampillée du numéro 3 et peinte aux couleurs de l’Aprilia Alitalia Racing Team, l’engin ne devrait pas passer inaperçu.", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/aprilia sr 50', number: 12, moteur:"monocylindre", vitesseMax: '100km/h',reservoir: '7l', price: 4000, quantity: 0, id:2},
{name: "Ducati monter", description: "Ducati Monster est une gamme de motos du constructeur italien Ducati de type roadster lancée en 1992", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/ducati monster 110s2009 modele3d', number: 12, moteur: "2 cylindres", vitesseMax: '260km/h', reservoir: "14l" ,price: 14500, quantity: 0, id: 3},
{name: "Honda cbr 600", description:"La Honda CBR600RR est une moto de 599 cm³, de la famille des CBR introduite par Honda en 2003", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/honda 623 cbr bike', number: 5, vitesseMax: '260km/h', moteur: "4 cylindres, 4temps, refroidissement liquide", reservoir:"18.1l", price: 23400, quantity: 0, id:4},
{name: "Forza ftm", description: "Cyclomoteur FORZA-FTM ,Cylindrage 110CC , Charge utile : 110 Kg , Vitesse Max : 160 Km/h , Réservoir : 4.5Litres.", img: 'C:/Users/ADMIN/Desktop/Bike project/banner/forzaftm', number: 15, moteur: "monocylindre", vitesseMax: "160km/h", price: 2400, quantity: 0, id: 5}];
export const mecanicSliceProducts = createSlice({
name: 'mecanicsProducts',
initialState: mecanicsProducts,
reducers: {
changeQuantity: (state, action) => {
let {name, newQuantity} = action.payload;
let findProductName = state.find(product => product.name === name);
if (findProductName) {
findProductName.quantity = newQuantity;
}
return state;
},
buyProduct: (state, action) => {
const purchasedProduct = state.find(product=> product.id === action.payload.id);
if(purchasedProduct) {
purchasedProduct.quantity += 1;
purchasedProduct.number = purchasedProduct.number - purchasedProduct.quantity;
}
return [...state, purchasedProduct]
}
}
});
export const selectPurchasedProducts = (state) => {
return state.mecanicsProducts.filter(product => product.quantity !== 0).map(product => product.id)
};
export const selectmecanicsProductsToDisplay = (state) => {
return state.mecanicsProducts.map(product => ({
name: product.name,
img: product.img,
price: product.price,
id: product.id
}))
};
console.log(selectmecanicsProductsToDisplay)
export const {changeQuantity, buyProduct} = mecanicSliceProducts.actions;
export default mecanicSliceProducts.reducer;
this is the mecanicsProduct.js file:
import React from 'react';
import { selectmecanicsProductsToDisplay } from './mecanicSliceProducts';
import {useSelector} from 'react-redux';
import { Product } from '../Product.js'
export const MecanicProducts = () => {
const mecanicsProducts = useSelector(selectmecanicsProductsToDisplay);
console.log(mecanicsProducts);
return (
<div className="mecanics" >
<h2> Motors selections</h2>
{mecanicsProducts.map(product => <Product product={product} key={product.id} />
)}
</div>
)
}
this is the store.js file :
import { configureStore } from '@reduxjs/toolkit';
import mecanicSliceProductsReducer from '../../features/mecanicsProducts/mecanicSliceProducts';
export const store = configureStore({
reducer: {
mecanicsProducts: mecanicSliceProductsReducer,
}
})
this is the index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { App } from './App';
import { Provider } from 'react-redux';
import { store } from './components/App/store.js';
ReactDOM.render(
<Provider store={store} >
<App />
</Provider >,
document.getElementById('root')
);
this is the App.js file :
import React from 'react';
import { Navbar } from './components/Navbar/Navbar';
import {MecanicProducts} from './features/mecanicsProducts/mecanicsProducts'
export function App() {
return (
<div className="App">
<Navbar />
<MecanicProducts />
</div>
);
}
