解决 Next.js 13 错误：缺少 react-redux 上下文；请将组件包裹在 <Provider> 内-PHP中文网问答

我想使用redux中的数据，但无法解决这个错误。所以，我在next.js 13中有一个应用程序路由器，我想在/settings/account上访问我的页面。这是我的文件结构：

--app 
    --settings 
      layout.jsx
      page.jsx
       --account 
         page.jsx
         layout.jsx

我想在账户页面访问用户数据：

import React from 'react'
import { useSelector } from 'react-redux';

export default function AccountPage() {
    const {info: userInfo} = useSelector(state => state.user);
    const {name, id} = userInfo; 
    console.log(name, id)

  return (
    <div>page</div>
  )
}

但是我得到了错误：Error: could not find react-redux context value; please ensure the component is wrapped in a Provider。我以为使用布局来包装页面会解决这个问题，所以我做了这个：

layout.jsx
"use client"
import { store } from "@/context/store";
import { Provider } from "react-redux";

export default function AccountLayout({ children }) {
    return (
        <Provider store={store}>
            {children}
        </Provider>
    )
  }

不幸的是，这没有帮助。settings/account页面和settings页面的布局是相同的，只是名称不同 - SettingsLayout（我以为根布局会解决这个问题）。至于settings页面，它只包含普通的HTML，没有代码。如何在不包装App组件的情况下解决这个问题？

"use client"; import { PropsWithChildren } from "react"; import { Provider } from "react-redux"; import { store } from "../store/store"; // 请调整路径 export default function ReduxProvider({ children }: PropsWithChildren<any>) { return ( <Provider store={store}> {children} </Provider> ); }

"use client"; import { PropsWithChildren } from "react"; import ReduxProvider from "./redux-provider"; export default function Providers({ children }: PropsWithChildren<any>) { return ( <ReduxProvider> {children} </ReduxProvider> ); }

import React from "react"; import Providers from './provider'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> <Providers> {children} </Providers> </body> </html> ); }

全部回复(1)

P粉5150665182023-08-17 11:47:45 1楼

这是经过测试的方法；

在你的应用文件夹下添加一个名为redux-provider.js的新文件

在你的应用文件夹下添加另一个名为provider.tsx的文件，并实现ReduxProvider

在你的layout.tsx文件（应用文件夹的直接子组件）中实现Providers

现在我们可以从其他页面访问store。

更新

是的。但是！将根组件包装在ReduxProvider中并不意味着所有其他组件都是客户端组件。你仍然可以有服务器组件。如何做到？

在你的应用文件夹下添加一个名为experimental的新文件夹，然后在experimental文件夹下添加一个名为page.tsx的新文件。你可以从另一个文件中导入page.tsx文件的内容。

/experimental/page.tsx

import HomePage from "../index"; // 这是一个在其中使用redux的客户端组件

export default async function Page() { // 这是一个服务器组件
    return <HomePage />;
}

赞 +0

添加回复