为什么我没有在我的应用程序中获得状态

我是 redux 的新手，我正在尝试将一个项目添加到购物篮中，但我得到了，TypeError: Cannot read properties of undefined (reading 'getState')。为什么我无法获得状态是我需要做的事情我没有做，请问我做错了什么。我正在使用 useDispatch 挂钩来读取存储并调度操作

嘿是我的代码

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;
export const selectItems = (state) => state.basket.items;
export default basketSlice.reducer;



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

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

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

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <Provider store={store}>
      <SessionProvider session={session}>
        <Component {...pageProps} />
      </SessionProvider>
    </Provider>  
  )
}

import { useDispatch } from 'react-redux'
import {addToBasket} from "../slices/basketSlice"

const Product = ({id, title, description, price, image, category }) => {

  const dispatch = useDispatch();

      const addItemToBasket = () => {
          const product = {
            id,
            title, 
            description, 
            price, 
            image, 
            category 
          }

          dispatch(addToBasket(product))
      }

  return (
    <div className="relative flex flex-col m-10 p-10 bg-white rounded-3xl">
        <button onClick={addItemToBasket} className=" button">Add to basket</button>
    </div>
  )
}

export default Product;