使用动态上下文数据时,如何将旧的 React 上下文类型替换为新的 React 上下文 api?



我有一个应用程序,可以在html页面上呈现多个根。 每个根在网站上呈现一个不同的(或可能相同(的页面或组件。 该应用程序包含一个 redux 存储,因为每个根共享同一个应用程序。 为避免冲突,将为每个根生成一个 redux 存储。

现在 redux 存储具有惰性负载减少器。 在加载代码拆分组件时添加化简器。

为了适应这种情况,在存储中添加了一个函数来调用 replaceReducerfrom redux。

因此,当加载组件并且还需要加载减速器时,问题就来了。 组件需要从 redux 提供程序访问根存储。

这是使用旧 react 上下文 api 中的 contextType 来访问存储来实现的。 包装器组件中的 contextType 拉取存储的当前根实例。

但是使用新的反应上下文 api,这似乎不兼容。 建议创建一个上下文文件并在任何子组件中使用它。 这样做,我需要将存储放入反应上下文提供程序值中。 但这样做意味着反应上下文将只包含存储的 1 个实例。

如何使其像旧的 react contextType 一样工作以相应地访问根级提供程序上下文?

我认为这里有一个误解。

本质上,你想要的是使用新的上下文 API 读取遗留上下文(这是 React Redux 当前提供的,以及你contextTypes读取的内容(。这是行不通的。旧版和新上下文 API 完全不相关(即使它们服务于相同的用例(。

当将来 React Redux 切换到新的上下文 API 时,你应该能够做到这一点。请注意,无论哪种情况,都不鼓励直接将遗留上下文 API 与 React Redux 一起使用,您可能应该改用connect()

也许本文将帮助您迁移到新的上下文 API。 长话短说:您可以使用旧 API 传递数据并使用新 API 读取数据。不过,我不建议在您的特定情况下这样做。

最新更新