Next js：next auth provider + redux provider

Posted 2023-02-22

【中文标题】Next js：next auth provider + redux provider

【英文标题】：Next js: next auth provider + redux provider

【发布时间】：2021-05-23 00:33:15

【问题描述】：

在我的 Next js 项目中，我使用了 Next auth，即 import Provider from 'next-auth/client'，并将 <Component /> 包装在 _app.js 中。

但是同时，我想在项目中添加redux。它会import Provider from 'react-redux'，还需要将<Component /> 包裹在_app.js 中。

所以在这种情况下，他们使用相同的Provider，我尝试过导入破坏，但它给了我一个语法错误Syntax error: ES2015 named imports do not destructure. Use another statement for destructuring after the import.。那我该怎么办呢？

import  Provider  from "next-auth/client";  
function MyApp( Component, pageProps ) 
  return (
    <>
        <Provider
          options=     
            clientMaxAge: 0,
            keepAlive: 0,
          
          session=pageProps.session
        >
          <Component ...pageProps />
        </Provider>
    </>
  );

【参考方案1】：

您可以重命名解构的导入。所以你的代码可能看起来像这样：

import  Provider  from "next-auth/client";
import  Provider as ReduxProvider  from "react-redux";

function MyApp( Component, pageProps ) 
  return (
    <ReduxProvider /* whatever props go here */>
        <Provider
          options=     
            clientMaxAge: 0,
            keepAlive: 0,
          
          session=pageProps.session
        >
          <Component ...pageProps />
        </Provider>
    </>
  );

【讨论】：

组件的包装顺序重要吗？会话提供者不应该在 redux 提供者之上吗？