下一个.js。将全球供应商放在哪里？

Posted 2023-03-06

【中文标题】下一个.js。将全球供应商放在哪里？

【英文标题】：Next.js. Where to put a global provider?

【发布时间】：2020-08-14 12:57:39

【问题描述】：

我正在使用 Next.js，我需要实现 i18n。它需要我添加一些应该包装整个应用程序的全局提供程序。此外，它必须从某些状态管理（例如 Redux）接收更新，以便在活动语言更改时正确地重新呈现整个应用程序。

在标准的 React 应用程序中，我们将 App.js 放入 index.js 中，并将所有逻辑/提供程序保留在此处。

但在 Next 的情况下，我不知道该把这个逻辑放在哪里。我仔细检查了他们的文档，但没有发现任何提及。 仅关于_app.js 和_document.js 但实际上两者都没有可能连接到Redux 等。实际上它们不是为此而设计的。

我只是好奇 Next 是否提供了一些官方的方法来做这件事，还是我应该手动创建一些 HOC 作为 App 并自己包装整个应用程序？

顺便说一句。我几乎不明白 _app 和 _document 之间的区别。因此，我也将不胜感激！

【参考方案1】：

您可以使用next-connect-redux 包。

Github page Example repo

【讨论】：

谢谢米哈伊尔，它很有用，但我想知道把这些东西放在哪里=)

请查看示例存储库。

【参考方案2】：

那么请仔细阅读文档，你可以在第二点here找到Keeping state when navigating pages。 这就是 redux 的用途。

我可以通过_app.js 文件将我的整个应用程序连接到redux 和i18n。在我之前的项目中，我的队友甚至使用_document.js文件来连接i18n。

从他们的文档中可以看出，_app.js 的目的是覆盖和控制页面初始化。因此，您可以在渲染页面之前从 redux 接收更新并将更改放在 IntlProvider 上。

其他解决方案就像您所说的那样，通过创建一些 HOC 来包装您的应用程序。

选择权在你。

【讨论】：

嗨，达里尔，谢谢您的回答。所以 _app.js 或一些 Hoc 之间没有区别吗？在 _app.js 方法的情况下，我想知道 s-s-r。

我不确定它们之间是否有任何区别，我以前从未尝试过使用 HOC，但我想应该没有区别 bcs _app.js 也像页面的父级。 Myb 你也可以做一些基准测试。你说的 s-s-r 是什么意思？你只想在客户端调用 redux store 并更新 i18n？