如何将 _app.js 包装在多个提供者中？

Question

我想知道这是否可能以及如何在 Redux 提供程序中包装我的顶级页面 _app.js 考虑到我已经使用 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 已经定义。

Answer 1

您可以使用 as 重命名名为 import 的 redux 提供程序。

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>
    )
}

如何将 _app.js 包装在多个提供者中？

How to wrap _app.js within multiple providers?

javascript

reactjs

redux

next.js

next-auth