I’m trying to make a project with React, I don’t have much knowledge, so I’m sorry, I’m getting this error and I couldn’t solve it. Thank you for your help.
could not find react-redux context value; please ensure the component is wrapped in a
app.js
function App() {
return (
<div className="App">
<Routes>
<Route path='/*' element={<CostumerRouters/>}></Route>
</Routes>
</div>
);
}
export default App;
index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>
);reportWebVitals();
store.js
import { legacy_createStore, applyMiddleware, combineReducers } from "redux";
import { thunk } from "redux-thunk";
import { authReducer } from "./Auth/Reducer";
import { customerProductReducer } from "./Product/Reducer";
import { cartReducer } from "./Cart/Reducer";
import { orderReducer } from "./Order/Reducer";
const rootReducers = combineReducers({
auth:authReducer,
products:customerProductReducer,
cart:cartReducer,
order: orderReducer,
})
export const store = legacy_createStore(rootReducers,applyMiddleware(thunk))
end product.jsx
import { Fragment, useEffect, useState } from 'react'
import { Dialog, Disclosure, Menu, Transition } from '@headlessui/react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import { ChevronDownIcon, FunnelIcon, MinusIcon, PlusIcon, Squares2X2Icon } from '@heroicons/react/20/solid'
import { products } from './Products'
import ProductCard from './ProductCard'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { findProducts } from '../../State/Product/Action'
import { Pagination } from '@mui/material'
import { store } from '../../State/store'
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Product() {
const dispatch = useDispatch()
const { products } = useSelector(state => state.products);
const { product } = products; // Eğer 'product' direkt store üzerinde ise böylece kullanabilirsiniz
const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
const location = useLocation()
const navigate = useNavigate()
const param = useParams()
const decodeQueryString = decodeURIComponent(location.search);
const searchParams = new URLSearchParams(decodeQueryString);
const colorValue = searchParams.get("color")
const sizeValue = searchParams.get("size")
const priceValue = searchParams.get("price")
const discount = searchParams.get("discount")
const sortValue = searchParams.get("sort")
const pageNumber = searchParams.get("page") || 1;
const stock = searchParams.get("stock")
const handlePaginationChange = (value) => {
const searchParams = new URLSearchParams(location.search)
searchParams.set("page", value);
const query = searchParams.toString();
navigate({ search: `?${query}` })
}
const handleFilter = (value, sectionId) => {
const searchParams = new URLSearchParams(location.search)
let filterValue = searchParams.getAll(sectionId)
if (filterValue.length > 0 && filterValue[0].split(",").includes(value)) {
filterValue = filterValue[0].split(",").filter((item) => item !== value)
if (filterValue.length === 0) {
searchParams.delete(sectionId)
}
}
else {
filterValue.push(value)
}
if (filterValue.length > 0) {
searchParams.set(sectionId, filterValue.join(","))
}
const query = searchParams.toString()
navigate({ search: `?${query}` });
}
useEffect(() => {
const [minPrice, maxPrice] = priceValue === null ? [0, 10000] : priceValue.split("-").map(Number);
const data = {
category: param.levelThree,
colors: colorValue || [],
sizes: sizeValue || [],
minPrice,
maxPrice,
minDiscount: discount || 0,
sort: sortValue || "price_low",
pageNumber: pageNumber - 1,
pageSize: 10,
stock: stock
};
dispatch(findProducts(data));
}, [dispatch, param.levelThree, colorValue, sizeValue, priceValue, discount, sortValue, pageNumber, stock]);
}
Despite my research, I couldn’t find any method.
I have to do frontend for my backend project, so I don’t have much knowledge, I’m just learning. Can you please show me a solution in a way that I can understand?