我的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设置回了错误。
这是应该如何工作的吗?
我应该如何管理诸如此类的全局状态,并使其在页面加载期间保持不变?
谢谢。
答案 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