不明白如何在NextJS中使用Redux 13.“(0，_react. react Context)is not a function”错误

mlmc2os5 于 2023-11-18 发布在 React

关注(0)|答案(1)|浏览(118)

我的根布局中有这样的结构

export default function RootLayout({ children }) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchProducts());
  }, [dispatch])

  return (
    <Provider store={store}>
      <html lang="en">
        <body>
          <header>
            <SearchBar />
            <Logo />
            <Menu />
          </header>
          <main>
            {children}
          </main>
          <footer>
            <Bottom />
          </footer>
        </body>
      </html>
    </Provider>
  )
}

字符串
问题是，我只想在和组件中使用Redux，所以这些是我需要的唯一客户端组件。但它们不是彼此的子/父。在这种情况下我应该怎么做？
我可以为每个组件创建两个不同的提供程序吗？我认为如果我在应用程序中只使用客户端组件，这是没有意义的。

next.js

来源：https://stackoverflow.com/questions/77429971/dont-understand-how-to-use-redux-in-nextjs-13-the-0-react-createcontext

1条答案

按热度按时间

brjng4g31#

RootLayout是一个服务器组件，这意味着你不能在其中使用钩子。
你现在有几个选择。
1.使用SSR获取产品并将数据传递给需要它的组件。理想情况下，您希望在需要数据的组件附近执行此操作。如果您有产品页面，则可以在此处执行此操作。
1.按原样获取产品，但在需要数据的组件中进行，并使用use client将该组件设置为客户端组件
例如1，它可能看起来像这样。

export default async function Page() {
    const products = await fetchProducts()
    ...

    return (
        <>
            ....
            <div>
            {products.map((product) => (
              <Product key={product.id} product={product} />
            ))}
            </div>
            ....
        </>

    )

}

字符串
对于选项2，您只需要将此钩子移动到客户端组件中

'use client' # this is needed to ensure it runs as a client component.

export async function Products(props: Props) {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(fetchProducts());
    }, [dispatch])
    ....
}

型

赞(0）回复(0）举报 2023-11-18

我来回答

不明白如何在NextJS中使用Redux 13.“(0，_react. react Context)is not a function”错误

1条答案

相关问题

热门标签

最新问答