全局状态管理和Next.js

btqmn9zl 于 2022-11-23 发布在其他

关注(0)|答案(1)|浏览(295)

因此，我计划克隆Facebook并添加到我的投资组合中，我希望使用react-Next.js、node.js、express.js、typeORM和postgresSQL（所有内容都在typescript中），但我在全局状态管理方面遇到了一个大问题

问题：所以，我在想，我说，好吧，我打算使用redux，我知道如何使用它，我喜欢它，但是，在next.js中实现redux似乎很难，所以，我说，如果我不需要使用全局状态管理呢？如果我只使用SWR挂钩，每当我在前端创建/更新数据时重新验证数据呢？这可能是可以的。但这是个坏主意吗？我不该这么做吗？
我的目标：我需要知道的是，如果我只使用SWR，它是坏的还是应该在尝试我最好的实现redux i next.js？我有这些选择，但我只是不知道该怎么做，用create-react-app设置redux很容易，但在next. js中我就是不明白，所以，如果你能帮助我回答，我会非常感谢你！！

next.js

来源：https://stackoverflow.com/questions/67550248/global-state-management-and-next-js

1条答案

按热度按时间

0g0grzrc1#

swr+contextApi一起用来替换redux。下面是逐步设置它的方法：

创建不同的钩子。例如

export const createFirstHook =
    ({ arg1, arg2 }) =>
    () => {
      //   CONDITIONAL USESWR CALL
      // isValidation is true whenever you are retrievnig a new data
      const { data, isValidating, ...swr } = useSWR(

            // write fetching logic           
      );
      return {
        ...swr,
        isValidating,
        data,
      };
    };

在你的应用程序中，你会有很多钩子，并像这样将它们组合起来。把这个想象成redux中的主要减速器。

import { createFirstHook} from "./useNetwork";

  export const setupHooks = (deps) => {
    return {
      useFirstHook: createFirstHook(deps),
      ...
    };
  };

编写上下文并在返回的对象中包含钩子。

const Web3Context = createContext(null)

  const createWeb3State = ({arg1, arg2}) => {
    return {
      arg1,
      arg2,
      // Passing hooks here  
      hooks: setupHooks({erg1,arg2})
    }
  }

  export default function Web3Provider({children}) {
    const [web3Api, setWeb3Api] = useState(
      // this function will set the hooks
      createWeb3State({
        arg1: null,
        arg2: null,
      })
    )
   // you add more logic
   // eventuallay you return this
    return (
      <Web3Context.Provider value={web3Api}>
        {children}
      </Web3Context.Provider>
    )
  }

这是您访问应用程序其他部分中的提供程序数据的方式。

import { useContext } from "react";

 const context= useContext(Web3Context);

这将使您在需要上下文的地方导入import { useContext } from "react"。

export function useWeb3() {
  return useContext(Web3Context);
}

在next.js中，必须用提供程序 Package _app. js

function MyApp({ Component, pageProps }: AppProps) {
    return (
      <>
        <Web3Provider>
          <Component {...pageProps} />
        </Web3Provider>
      </>
    );
  }

现在你可以在你的应用中的任何地方访问你的上下文和钩子。在这种方法中，每个钩子函数都像reducer一样工作，但是好的一面是你可以在你的应用中的其他地方独立使用这些钩子。

赞(0）回复(0）举报 2022-11-23

我来回答

全局状态管理和Next.js

1条答案

相关问题

热门标签

最新问答