Next.js应用似乎并未保留_app.js

时间:2020-10-24 17:33:13

标签: reactjs next.js

我的next.js应用程序设置了全局上下文/提供者协议:

_app.js

import {useState} from "react"
import GlobalContext from "components/GlobalContext"

function MyApp({ Component, pageProps }) {
    const [isLoggedIn, setIsLoggedIn] = useState(null)

    let contextValues = {
        isLoggedIn, setIsLoggedIn
    }

    return (
        <GlobalContext.Provider value={contextValues}>
            <Component {...pageProps} />
        </GlobalContext.Provider>
    )
}

export default MyApp

components/GlobalContext.js

const { createContext } = require("react")

const GlobalContext = createContext()
export default GlobalContext

当我在应用程序的其他位置调用setIsLoggedIn(true)时...似乎设置正确,但是当我导航到另一个页面时,似乎此全局状态被炸开了,并且isLoggedIn设置回了错误。

这是应该如何工作的吗?

我应该如何管理诸如此类的全局状态,并使其在页面加载期间保持不变?

谢谢。

1 个答案:

答案 0 :(得分:0)

据我了解,每次您转到不同的页面时,都会运行功能MyApp,因此会创建组件状态的新“实例”。

要重用该状态,必须将其存储在全局状态中。我使用外部redux存储,并从myapp调用它。该存储区是一个全局变量,如果存在则可以重用。一种“单一”模式。

let store: Store<StoreState, Action>;

const initStore = () => {
  if (!store) {
    store = createStore(reducer, initialState);
  }
  return store;
};
export const useStore = () => initStore();

他们来自MyApp

import { useStore } from '../store';
import { Provider } from 'react-redux';

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const store = useStore();
    return (
      <Provider store={store}>
         <Component {...pageProps} />
      </Provider>
    );
  }
}

您可能无需重新安装也可以执行相同操作。关键是保持状态为全局变量。

但是,这仅在客户端导航中有效。如果使用服务器端检索页面,则会丢失状态,因此需要使用会话或cookie。

您还可以从nextjs检查此示例:

https://github.com/vercel/next.js/tree/canary/examples/with-redux