在 Next.js 中使用 Redux 是一种反模式吗? [英] Is using Redux with Next.js an anti-pattern?

问题描述

我正在构建 Next.js 应用程序，它目前正在使用 Redux.在我构建它时，我想知道是否真的有必要使用 Redux，它的使用是否实际上是一种反模式.这是我的推理:

I'm building a Next.js app and it currently is using Redux. As I am building it I am wondering if the use of Redux is really necessary, and if its use is actually an anti-pattern. Here is my reasoning:

为了在 Next.js 中正确初始化 Redux Store，您必须使用 getInitialProps 方法创建一个自定义的 App 组件.通过这样做，您将禁用 Next.js 提供的自动静态优化.

In order to properly initialize the Redux Store in Next.js, you must create a custom App component with a getInitialProps method. By doing this you are disabling the Automatic Static Optimization that Next.js provides.

相比之下，如果我要在客户端包含 Redux，则只有在 App 挂载后，Redux 商店才会在每次服务器端导航后重置.例如，我有一个 Next.js 应用程序，它在客户端初始化 Redux 存储，但是当路由到诸如 pages/projects/[id] 之类的动态路由时，页面是服务器端呈现的，我必须重新获取商店中的任何信息.

By contrast, if I were to include Redux on the client side, only after the App has mounted, then the Redux store will reset after every server side navigation. For instance, I have a Next.js app that initializes the Redux store on the client side, but when routing to a dynamic route such as pages/projects/[id], the page is server side rendered, and I have to re-fetch any information that was in the store.

我的问题是:

1. 在这种情况下，Redux 商店有什么好处?
2. 我是否应该在根 App 组件中初始化商店并放弃自动静态优化?
3. 是否有更好的方法来使用 getStaticProps 和 其他数据获取方法
4. 我错过了什么吗?

1. What are the benefits of a Redux store in this circumstance?
2. Should I initialize the store in the root App component and forego the Automatic Static Optimization?
3. Is there a better way to do to manage state in Next.js 9.3 with getStaticProps and the other data fetching methods
4. Am I missing something?

推荐答案

如果您有一个带有 getInitialProps 的自定义应用程序，那么 AutomaticNext.js 提供的静态优化将被禁用页.

If you have a custom App with getInitialProps then the Automatic Static Optimization that Next.js provides will be disabled for all pages.

没错，如果您遵循这种方法.

True, if you follow this approach.

有更好的方法吗?

是的，您可以创建一个 Redux Provider 作为包装器并包装您需要的组件，redux 上下文将在该组件内自动初始化和提供.

Yes, you can create a Redux Provider as a wrapper and wrap the component you need, the redux context will be automatically initialized and provided within that component.

示例:

const IndexPage = () => {
  // Implementation
  const dispatch = useDispatch()
  // ...
  // ...
  return <Something />;
}

IndexPage.getInitialProps = ({ reduxStore }) => {
  // Implementation
  const { dispatch } = reduxStore;
  // ...
  // ...
}

export default withRedux(IndexPage)

您现在可以仅将 Redux 用于需要状态管理的页面，而无需禁用对整个应用程序的优化.

You have now the possibility to use Redux only for the pages which need state management without disabling the optimization for the entire App.

回答您的问题在 Next.js 中使用 Redux 是否是一种反模式?"

不需要，但需要正确使用.

No, but it needs to be used properly.

有关如何在此处完成的更多信息:https://github.com/vercel/next.js/tree/canary/examples/with-redux

More info on how is done here: https://github.com/vercel/next.js/tree/canary/examples/with-redux

希望能帮到你

这篇关于在 Next.js 中使用 Redux 是一种反模式吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！