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

Posted 2023-02-22

【中文标题】如何将 _app.js 包装在多个提供程序中？

【英文标题】：How to wrap _app.js within multiple providers?

【发布时间】：2021-04-18 14:39:57

【问题描述】：

我想知道这是否可能以及如何将我的***页面 _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 已经定义。

【问题讨论】：

您是否尝试过使用 Redux 提供程序包装返回的内容，就像使用 next-auth 提供程序一样？

是的，但它说 Provider 已经定义

谢谢，我试试看

【参考方案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>
    )