如何在MobX中更新嵌套存储

Question

我有一个用提供商包装的应用程序。 在应用程序中，我使用的组件通常是独立的并且拥有自己的提供程序。 当＆＃34; Master＆＃34;商店得到更新，我想将信息传递给内部商店。 当我这样做时，我收到来自mobx的警告 - Mobx Provider: Provider store 'internalStore' has changed. Please avoid replacing stores as the change might not propagate to all children。

我能想到两个解决方案 -  1.将商店（internalStore）存储在RootStore中（双关语）  2.向internalStore添加更新方法

应用

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

内部组件 -

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

你怎么看？想法？

Answer 1

这是不可能的。

将内部商店视为一个松散的商店。这个商店的道具是可观察的，每个可观察的都是全球跟踪的。因此，每次添加商店时，都会有更多可观察的全局跟踪。这本身只是一个记忆问题。渲染问题是这个新的Store it itservables没有链接到已经存在的反应组件。因此，现有的反应组分不会触发重新渲染。您必须强制删除并重新创建所有这些组件才能摆脱所有错误的侦听器。

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

除此之外，尝试保留所有商店的单身人士。也许这已经解决了你的问题（只要不重新创建商店，例如：通过HMR或类似的东西，你应该没问题。）