Redux Toolkit整合Next.js应用报错：TypeError: 无法读取undefined的'getState'属性

我正在Next.js应用中用Redux Toolkit实现购物车功能，需要全局管理购物车商品数量。Redux Devtools扩展显示购物车状态为2（符合预期），但左侧出现报错。以下是我的代码：

store.js #

import {configureStore } from '@reduxjs/toolkit';
import cartReducer from './slices/cart'

export default configureStore({
 reducer: {
    cart: cartReducer
 }
})

cart.js #

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  cart: 2,
}

export const counterSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    increment: (state) => {
      state.cart += 1
    },

    decrement: (state) => {
      state.cart -= 1
    },

    incrementByAmount: (state, action) => {
      state.cart += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

_app.js #

import Layout from '@/components/Layout'
import '@/styles/globals.css'
import {useState} from 'react';
import {store } from '../store';
import { Provider } from 'react-redux';

export default function App({ Component, pageProps }) {

  return(

    <Provider store={store}>
    
        <Layout>

            <Component {...pageProps} />


        </Layout>

    </Provider>
  )
 

}

问题原因及修复 #

报错的核心是_app.js里的store导入方式错误：store.js用的是默认导出，但_app.js却用了解构导入，导致传入Provider的store是undefined，触发Devtools报错。

只需修改_app.js的导入语句：

// 替换原导入代码
import store from '../store';

修改后就能正确传入store实例，Devtools的报错会消失，购物车状态也能正常维持。

内容的提问来源于stack exchange，提问作者CoderCat