将 Redux 与 Next.js 一起使用是一种反模式吗? [英] 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 组件中初始化 store 并放弃自动静态优化吗?
3. 有没有更好的方法来管理 Next.js 9.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 仅用于需要状态管理的页面，而无需禁用整个 App 的优化.

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

回答您的问题将 Redux 与 Next.js 一起使用是一种反模式吗?"

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

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

希望对你有帮助

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