时间戳

首页 > 解决方案 > 如何更新 MobX 中的嵌套存储

reactjs - 如何更新 MobX 中的嵌套存储

问题描述

我有一个用提供者包装的应用程序。在应用程序的更深处，我使用的组件通常是独立的并且有自己的 Provider。当“主”商店更新时，我想将信息传递给内部商店。当我这样做时，我收到来自 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> ) }

你怎么看？想法？

标签： reactjsmobx

解决方案

这是不可能的。

将内部存储视为一些被引用的松散存储。这个商店的道具是可观察的，每个可观察的都是全局跟踪的。因此，每次添加商店时，都会在全球范围内跟踪更多可观察的数据。这本身只是一个内存问题。渲染问题是这个新的 Store it's observables 没有链接到已经存在的 react 组件。因此现有的反应组件不会触发重新渲染。您将不得不强制删除并重新创建所有这些组件以摆脱所有错误的侦听器。

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

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

推荐阅读