错误：找不到 react-redux 上下文值； 请确保组件被包裹在一个<Provider>在使用 useselector 时

Question

1.header.js

import Image from "next/image";
import { 
MenuIcon,
SearchIcon,
ShoppingCartIcon,
} from "@heroicons/react/outline";
import { signIn, signOut, useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useSelector } from "react-redux";
import { selectItems } from "../slices/basketSlice";
import { Provider } from "react-redux";

function Header() {
const { data: session } = useSession();
const router = useRouter();
const items= useSelector(selectItems);

 return (
<header>
   <div className="flex items-center bg-amazon_blue p-1 flex-grow py-2">
     <div className="mt-2 flex items-center flex-grow sm:flex-grow-0">
      <Image
      onClick={() => router.push("/")} 
        src='https://links.papareact.com/f90'
        width={150}
        height={40}
        objectFit="contain"
        className="cursor-pointer"
      />
     </div>
     {/*search bar*/}
     <div className="hidden sm:flex items-center h-10 rounded-md flex-grow cursor-pointer bg-yellow-400 hover:bg-yellow-500">
       <input className="p-2 h-full w-6 flex-grow flex-shrink rounded-l-md focus:outline-none px-4" type="text" />
       <SearchIcon className="h-12 p-4"/>
     </div>
     <div className="text-white flex items-center text-xs space-x-6 mx-6 whitespace-nowrap">
       <div onClick={session ? signIn:signOut} className="link">
         <p className="hover:underline">{session ? session.user.name:"signin"}</p>
         <p  className="font-extrabold md:text-sm">Acount & lists</p>
       </div>

       <div className=" link">
         <p>Returns</p>
         <p className="font-extrabold md:text-sm">& orders</p>
       </div>
       
       <div onClick={() => router.push("/checkout")} className=" link relative flex items-center">
         <span className="absolute top-0 right-0 md:right-10 h-4 w-4 bg-yellow-400 rounded-full text-center text-black font-bold">
           {items.length}
         </span>

       <ShoppingCartIcon className="h-10 "/>
       <p className="hidden md:inline font-extrabold md:text-sm mt-2">Bascket</p>
       </div>
     </div>
  </div>
     {/*bottom nav*/}
  <div className="flex items-center space-x-3 p-2 pl-6 bg-amazon_blue-light text-white text-sm">
    <p  className="link flex items-center ">
      <MenuIcon className="h-6 mr-5"/>
      all</p>
      <p className="link">featured </p>
      <p className="link">new arrival </p>
      <p className="link">catalog </p>
      <p className="link hidden lg-inline-flex">electronics </p>
  </div>
</header>
   );
}

export default Header;

2. bascketslice.js

'''

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: [],
};

export const basketSlice = createSlice({
  name: "basket",
  initialState,
  reducers: {
    addToBasket: (state, action) => {
      state.items = [...state.items, action.payload]
    },
    removeFromBasket: (state, action) => {},
  },
});

export const { addToBasket, removeFromBasket } = basketSlice.actions;

// Selectors - This is how we pull information from the Global store slice
export const selectItems = (state) => state.basket.items;

export default basketSlice.reducer;

'''

3. product.js

   '''

   import Image from "next/image"; import {useState} from "react"; import{ StarIcon} from"@heroicons/react/solid"; import Currency from "react-currency-format"; import { useDispatch } from "react-redux"; import {addToBasket} from "../slices/basketSlice";

   const MAX_RATING =5; const MIN_RATING =1;

    function Product({id, title, price, description, category,image}) { const dispatch = useDispatch(); const{rating}= useState( Math.floor(Math.random() * (MAX_RATING - MIN_RATING +1)) + MIN_RATING ); const addItemToBascket = () => { const product = {id, title, price, description, category,image}; // sending the product as an action to bascket slice dispatch(addToBasket(product)) };

   return ( {category}

    <Image src={image} height={200} width={200} objectFit="contain" /> <h4 className="flex">{title}</h4> <div className="flex"> {Array(rating) .fill() .map((_, i)=>( <StarIcon className="h-5 text-yellow-500"/> ))} </div> <p className="text-xs my-2 line-clamp-2">{description}</p> <div className="mb-5"> <Currency quantity={price}/> </div> <button onClick={addItemToBascket} className=" mt-auto button">Add to Basket</button> </div>

   ); }

   export default Product '''

store.js

import { configureStore } from "@reduxjs/toolkit";
import basketReducer from "../slices/basketSlice";

export const store = configureStore({
  reducer: {
    basket: basketReducer,
  },
});

_app.js

import { Provider } from 'react-redux'
import { store } from '../app/store'
import '../styles/globals.css'
import { SessionProvider } from "next-auth/react"

const MyApp = ({ Component, pageProps: {session,...pageProps} }) => {
  return (
    <SessionProvider session={session}>
        <Component {...pageProps} />
    </SessionProvider>
  );
};

export default MyApp

how do i use provider in the code

my repository :- https://github.com/Shadow2389/nmz-2.git

Answer 1

It seems we're both fans of Sonny. Your problem there is that you need to wrap up your App.js in

<Provider>
 <SessionProvider session={session}>
        <Component {...pageProps} />
    </SessionProvider>
</Provider>

But then you'll most likely have a "Hydration error", if so, just remove the "Math.floor(Math.random() * (MAX_RATING - MIN_RATING +1)) + MIN_RATING"

Apparently with the new updates we can no longer use the useState() hook as we used to, so you have 3 options: 1.- Remove the "Math.floor(Math.random() * (MAX_RATING - MIN_RATING +1)) + MIN_RATING" 2.- Set a fixed rating for all products 3.- Set a number for your API (which you cannot, since you are using FakeStoreAPI)

This is due to basic rules of Hooks, since a Random number is "umpredictable", but now I don't know why it has that problem (although you're setting a min and a max)