如何在 MobX 中更新嵌套存储



>我有一个用提供程序包装的应用程序。 在应用程序的更深处,我正在使用一个组件,该组件通常是独立的,并且有自己的提供程序。 当"主"商店更新时,我想将信息传递给内部商店。 当我这样做时,我收到了来自 mobx 的警告,说 -Mobx Provider: Provider store 'internalStore' has changed. Please avoid replacing stores as the change might not propagate to all children.

我能想到两个解决方案—— 1. 将存储(内部存储(存储在根存储中(双关语( 2. 将更新方法添加到内部存储

应用程序

const App = (props) => { return ( <Provider store={store}> App... </Provider> ) }

内部组件 -

const Internal = (props) => { return ( <Provider store={internalStore}> <ReusedCompoenent /> </Provider> ) }

你觉得怎么样?想法?

这是不可能的。

将内部商店视为某个被引用的松散商店。此商店上的道具是可观察的,并且每个可观察物都在全球范围内跟踪。因此,每次添加商店时,全球都会跟踪更多可观察的内容。这本身只是一个内存问题。渲染问题是这个新的存储它的可观察量没有链接到已经存在的反应组件。因此,现有的 React 组件不会触发重新渲染。您必须强制删除并重新创建所有这些组件,以摆脱所有错误的侦听器。

但是,如果您想在组件中使用 mobx 状态,我建议您使用以下方法:https://alexhisen.gitbooks.io/mobx-recipes/content/use-observables-instead-of-state-in-react-components.html

除此之外,尝试保持所有商店的单例。 也许这已经解决了您的问题(只要不重新创建商店,例如:通过 HMR 或类似的东西,您应该没问题(。

最新更新