我在建下一个.js应用程序,目前正在使用Redux.在构建它的过程中,我想知道使用Redux是否真的有必要,以及它的使用是否真的是一种反模式.我的理由如下:

以便在下一步中正确初始化Redux存储.js,您必须使用getInitialProps方法创建自定义App组件.通过这样做,你将禁用下一个Automatic Static Optimization.js提供.

相比之下,如果我只在安装应用程序后才在客户端包含Redux,那么每次服务器端导航后,Reduxstore 都会重置.例如,我有一个下一个.在客户端初始化Redux存储的js应用程序,但当路由到动态路由(如pages/projects/[id])时,页面是服务器端呈现的,我必须重新获取存储中的任何信息.

我的问题是:

  1. 在这种情况下,Reduxstore 有什么好处?
  2. 我应该在root App组件中初始化存储并放弃自动静态优化吗?
  3. 在下一步中,有没有更好的方法来管理状态.js 9.3与getStaticPropsother data fetching methods
  4. 我错过什么了吗?

推荐答案

如果你有一个带有getInitialProps的自定义应用程序,那么

没错,如果你遵循这种方法.

有更好的办法吗?

是的,您可以创建一个Redux提供程序作为包装器,并包装您需要的组件,Redux上下文将自动初始化并在该组件中提供.

例子:

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

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

export default withRedux(IndexPage)

现在,您可以只对需要状态管理的页面使用Redux,而不必禁用整个应用程序的优化.

回答你的问题"Is using Redux with Next.js an anti-pattern?"

没有,但需要正确使用.

更多信息请点击这里:https://github.com/vercel/next.js/tree/canary/examples/with-redux

我希望这有帮助

Reactjs相关问答推荐

我可以使用全局变量而不是React.上下文来在这里传递常数props 吗?

更新数据时有关CQR和更新UI的问题

是否将样式应用于父悬停(框架运动)上的子元素?

下拉Tailwind CSS菜单与怪异beviour

同一文件中前端和后端的Nginx配置

使用VITE的Reaction应用程序的配置是否正确?

如何动态地改变<; Select >;React和Tailwind元素?

使用 React + Vite 范围化 CSS

如何修复ReferenceError:在构建过程中未定义导航器

PWA:注册事件侦听器不会被触发

如何在 ChartJS 中创建此图表?在 NEXTjs 和 TSX 中

每次状态更改时都会提交react 表单

使用新数据更新时,React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

如何在 JS 中绘制具有不同笔画宽度的样条线

React - 添加了输入数据但不显示

在准备回调中使用状态属性(Redux 工具包)

使用 React Router v6 监听来自不同组件的组件状态变化

React Native map 中的初始zoom 级别

Mui CardMedia 的图片组件

调用函数以获取数据并在数据到达时导航到链接