NextJS 中的 State 管理

Question

我已经在互联网上四处寻找解决方案，但我仍然没有找到一个有效的解决方案。 我试过以下 state 管理工具：

• 使用上下文
• Redux
• 祖斯坦
• 畏缩

当我单击一个简单的按钮时，我希望我的 NextJS 站点更新每个页面上的值。 现在我正在使用 Recoil，因为我发现它是迄今为止最简单的 state 管理工具之一。

这是我的_app.js

function MyApp({ Component, pageProps }) {
  return (
    <RecoilRoot>
      < Component {...pageProps} />
    </RecoilRoot>
  )
}

这是index.js ：

export default function Home() {
  const [city, setCity] = useRecoilState(cityState)
  return (
    <>
      <h1>{city}</h1>
      <button onClick={() => setCity("paris")}>click</button>
    </>
   );
}

这是第 2 页

export default function SecondPage() {
  const [city, setCity] = useRecoilState(cityState)
  return (
    <>
      <h1>{city}</h1>
    </>
   );
}

./state/state.js

export const cityState = atom({
    key: "cityState",
    default: "moscow"
})

当我单击index.js上的更改按钮时，我只是希望它更改SecondPage以及我引用存储在state.js中的 state 的所有页面。 现在它在index.js上发生了变化，但SecondPage保持为“莫斯科”。 我希望它在单击索引上的按钮时更新。

Answer 1

我不知道您的代码结构如何，但我认为您最简单的选择是 React Context API。 让我们给你一个更好的解释的例子；

您的上下文脚本：

 import React, { createContext, useState } from "react";

export const GlobalContext = createContext(); // you can set a default value inside createContext if you want


export default function ContextProvider({ children }) {
  const [city, setCity] = useState("moscow")

  return (
    <GlobalContext.Provider
      value={[city, setCity]}>
      {children}
    </GlobalContext.Provider>
  );
}

您的_app.js文件：

import ContextProvider from "your_directory"

function MyApp({ Component, pageProps }) {
  return (
    <ContextProvider>
      < Component {...pageProps} />
    </ContextProvider>
  )
}

index.js文件：

    import ContextProvider, {GlobalContext} from 'your directory'

export default function Home() {
  const [city, setCity] = useContext(GlobalContext)
  return (
    <>
      <h1>{city}</h1>
      <button onClick={() => setCity("paris")}>click</button>
    </>
   );
}

您的第 2 页脚本：

import ContextProvider, {GlobalContext} from 'your directory'

export default function SecondPage() {
  const [city] = useContext(GlobalContext)

  return (
    <>
      <h1>{city}</h1>
    </>
   );
}