如何在多个 provider 中包装 _app.js？

Question

我想知道是否可能以及如何将我的顶层页面_app.js包装在Redux提供程序中，考虑到我已经使用Next-auth提供程序进行了包装，类似于：

import React from "react"
import { Provider } from 'next-auth/client'
import '../public/global.scss'

export default function App ({ Component, pageProps }) {
  return (
      <Provider
        options={{
          clientMaxAge: 0,
          keepAlive: 5 * 60
        }}
        session={pageProps.session} >
        <Component {...pageProps} />
      </Provider>
  )
}

问题在于当我尝试添加Redux的<Provider ..时，它会显示Provider已经被定义。

- m4tt

---

你尝试过是否可以像使用 next-auth provider 一样，将你返回的内容用 Redux provider 包装起来吗？ - juliomalves

是的，但它说提供程序已经定义。 - m4tt

谢谢，我会试一下。 - m4tt

Answer 1

您可以使用 as 重命名 Redux 的 provider 命名导入。

import React from "react"
import { Provider as NextAuthProvider } from 'next-auth/client'
import { Provider as ReduxProvider } from 'react-redux'
import '../public/global.scss'

export default function App ({ Component, pageProps }) {
    return (
        <ReduxProvider>
            <NextAuthProvider
                options={{
                    clientMaxAge: 0,
                    keepAlive: 5 * 60
                }}
                session={pageProps.session} >
                <Component {...pageProps} />
            </NextAuthProvider>
        </ReduxProvider>
    )
}

- juliomalves