javascript - 如何将 _app.js 包装在多个提供程序中?
问题描述
我想知道是否有可能以及如何将我的顶级页面包装_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
已经定义了。
解决方案
您可以使用 重命名名为 import 的 redux 提供程序as
。
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>
)
}
推荐阅读
- pine-script - 修改变量时的 Pine 脚本语法错误
- macos - load-spark-env.sh,spark-submit:没有这样的文件或目录
- python - 使用numpy数组Python的内存错误
- r - r/ggplot:计算组内的条形图份额
- android - 手写笔输入在 Unity android 上不起作用
- javascript - 即使在重新渲染时,函数也没有收到更新的 redux 状态
- matplotlib - 在 sphinx 中使用 plot 指令时指定标题时出错
- python - 尝试将列表中仅包含一个 int 的列表转换为列表中仅包含一个 int
- reactjs - 将鼠标悬停在外部元素上时 React Leaflet change maker
- python-3.x - 我想知道使用地图的字母?