Next.js 14 集成Redux 5报错TypeError: store.getState is not a function如何解决？

我在使用Next.js 14结合Redux实现购物车存储功能时遇到了如下错误：

按照Redux官方Next.js文档编写的代码但未达到预期效果，请问该如何修复？我哪里出错了？

我的代码文件： #

/store/index.js

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

export const makeStore = () => {
    return configureStore({
        reducer: {
            cart: cartReducer
        }
    })
}

/app/StoreProvider.js

"use client"
import { useRef } from 'react'
import { Provider } from 'react-redux'
import { makeStore } from '../store'
// import { cartSlice } from '../store/cartSlice'

export function StoreProvider({ children }) {
    const storeRef = useRef()
    if (!storeRef.current) {
        // Create the store instance the first time this renders
        storeRef.current = makeStore()
    }

    return <Provider store={storeRef}>{children}</Provider>
}

/app/layout.js

import { Inter } from "next/font/google";
import "./globals.css";
import { StoreProvider } from "./StoreProvider.js";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
    title: "Shopping App",
    description: "Test Data Pro",
};

export default function RootLayout({ children }) {
    return (
        <StoreProvider>
            <html lang="en">
                <body className={inter.className}>{children}</body>
            </html>
        </StoreProvider>
    );
}

你的代码存在两个关键错误，修正后即可解决问题：

1. 修正StoreProvider的Store传递 #

在StoreProvider组件中，你传递给Provider的是Ref对象本身，而不是Ref存储的实际Store实例。需要把store={storeRef}改为store={storeRef.current}：

修正后的/app/StoreProvider.js：

"use client"
import { useRef } from 'react'
import { Provider } from 'react-redux'
import { makeStore } from '../store'

export function StoreProvider({ children }) {
    const storeRef = useRef()
    if (!storeRef.current) {
        storeRef.current = makeStore()
    }

    return <Provider store={storeRef.current}>{children}</Provider>
}

2. 调整RootLayout的结构 #

Next.js 14要求RootLayout的顶层元素必须是<html>，你原来的代码把StoreProvider放在了<html>外面，违反了布局规则。需要将StoreProvider移到<body>内部：

修正后的/app/layout.js：

import { Inter } from "next/font/google";
import "./globals.css";
import { StoreProvider } from "./StoreProvider.js";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
    title: "Shopping App",
    description: "Test Data Pro",
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <StoreProvider>{children}</StoreProvider>
            </body>
        </html>
    );
}

错误原因说明 #

• 第一个错误：React-Redux的Provider组件需要接收有效的Redux Store实例，而你传递的是useRef返回的Ref对象，并非实际的Store，导致无法建立Redux上下文。
• 第二个错误：Next.js的RootLayout有严格的结构要求，顶层必须是<html>标签，否则会触发框架内部的校验错误，同时可能影响组件的渲染上下文。

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