React Native managing multiple screens with same store

[murat-mehmet]

In React Native we are using a mobX store to keep product detail data. However the product detail page can be navigated multiple times by clicking another product under Similar Products tab. So in general I need to open the same 'product detail' screen multiple times with different data. I looked very hardly to find an appropriate way of doing this with mobX. There are many nested components on the page so I don't want to pass the navigated product data to every component, there will be no point in using mobx.

One idea is to use a nested Provider in this page and create and pass a new store to this provider, so every product detail page will share same logic and will be provided separate stores. When testing this seems to work great but while developing on this page, hot-reloading keeps complaining about 'The set of provided stores has changed'.

So am I on right track? Is there any other way of doing this more clear? Is it ok to override Provider store with same key in sub-screens like this?

[mweststrate]

Sounds fine to mee. Note that you don't need to use mobx's Provider anymore as it is deprecated, since React's createContext provides largely the same functionality.

…

On Wed, Aug 4, 2021 at 5:30 PM Murat ***@***.***> wrote: In React Native we are using a mobX store to keep product detail data. However the product detail page can be navigated multiple times by clicking another product under Similar Products tab. So in general I need to open the same 'product detail' screen multiple times with different data. I looked very hardly to find an appropriate way of doing this with mobX. There are many nested components on the page so I don't want to pass the navigated product data to every component, there will be no point in using mobx. One idea is to use a nested Provider in this page and create and pass a new store to this provider, so every product detail page will share same logic and will be provided separate stores. When testing this seems to work great but while developing on this page, hot-reloading keeps complaining about 'The set of provided stores has changed'. So am I on right track? Is there any other way of doing this more clear? Is it ok to override Provider store with same key in sub-screens like this? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3054>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBG7O5NMXYOY63M5LCDT3FMKDANCNFSM5BRNAJOA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[murat-mehmet]

Ok thanks for the response. This is the decorator I prepared for such screens.

const overrideStore = (...storeKeys) => (WrappedComponent) => {
  return function (props) {
    let overrides = {};
    const stores = React.useContext(MobXProviderContext)
    storeKeys.forEach(storeKey => {
      if (!stores[storeKey])
        throw new Error(`'${storeKey}' store does not exist`)
      const StoreType = stores[storeKey].constructor;
      overrides[storeKey] = new StoreType(stores);
    })
    return (
        <Provider {...overrides}>
          <WrappedComponent {...props} />
        </Provider>
    )
  };
}

usage:

@overrideStore('product')
@inject('product')
@observer
class ProductDetail extends Component {
...