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

Question

我是 redux 的新手，我试图将一个项目添加到购物篮但是我得到了，类型错误：无法读取未定义的属性（读取 '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;

Answer 1

要么 return 来自 action reducer 的新状态：

        addToBasket: (state, action) => {
            return { ...state, items: [...state.items, action.payload] }
        },

或修改现有状态而不替换它。并且不要 return 任何东西：

        addToBasket: (state, action) => {
          state.items.push(action.payload)
        },

此外，在您的示例中提供操作的类型信息：

action: PayloadAction<type_of_item>

Answer 2

看起来 <Provider /> 组件中的状态设置不正确。您的 store 是命名导出，但它被导入到 _app.js 中，就好像它是 default 导出一样（没有花括号）。请尝试使用 import { store } from "../some_path_to_store"。

这里有一个工作示例来结束我们在评论部分的讨论： https://codesandbox.io/s/crazy-fire-o3tr54

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

why am i not getting the state in my application

redux

next.js

redux-toolkit