Derived values from other store

[juanmavillarrazadb]

Hi everyone, we have the following issue in our project, what we are trying to achieve is to use the derived values or views consuming the information from an other store, as we have the store design and definition based on the business logic.

So we have the following files:

ROOT STORE

import { createContext, useContext } from 'react';
import {
  types,
  Instance,
  SnapshotOut,
  SnapshotIn,
  getSnapshot,
  applySnapshot
} from 'mobx-state-tree';

import { UserStore, UserStoreInstance } from './userStore';
import { AssetsStore, AssetsStoreInstance } from './assets';

export const RootModel = types.model({
  assets: AssetsStore,
  user: UserStore
});

export const mobxRootState = RootModel.create({
  assets: AssetsStoreInstance,
  user: UserStoreInstance,
});

const RootContext = createContext<IRootModel>({} as IRootModel);
export const MobxProvider = RootContext.Provider;
export function useMst(): Instance<typeof RootModel> {
  const state = useContext(RootContext);
  if (state === null) {
    throw new Error('state cannot be null, please add a context provider');
  }
  return state;
}

ASSET STORE

import { types, Instance, flow } from 'mobx-state-tree'

const mockedData = [{
  id: 'btc',
  value: '40000'
}, {
  id: 'eth',
  value: '3000'
}, {
  id: 'bnb',
  value: '500'
}]

const Asset = types.model({
  id: types.identifier,
  value: types.string
})

export const AssetsStore = types
  .model('AssetsStore', {
    assets: types.array(Asset),
    fetching: false,
  })
  .actions((self) => {
    const load = flow(function* () {
      self.fetching = true
      yield new Promise((done) => setTimeout(() => done(undefined), 1500))
      self.assets.replace(mockedData)
      self.fetching = false
    })

    function getById(id: string): IAsset | undefined {
      return self.assets.find(i => i.id === id);
    }

    return {
      load,
      getById
    }
  })

export const AssetsStoreInstance = AssetsStore.create()

USER STORE (this is the one with the view)

import { types, Instance } from 'mobx-state-tree'

import { AssetsStoreInstance } from './assets';

export const UserStore = types
  .model('UserStore', {
    name: '',
    lastname: '',
    assetId: 'btc'
  })
  .views(self => {
    return {
      get assetValue() {
        const asset = AssetsStoreInstance.getById(self.assetId);

        if (asset) {
          return JSON.stringify(asset)
        }

        return 'No Data'
      }
    }
  })
  .actions((self) => {
    function setName(name: string) {
      self.name = name
    }

    function setLastname(lastname: string) {
      self.lastname = lastname
    }

    return {
      setName,
      setLastname,
    }
  })

export const UserStoreInstance = UserStore.create()

THE UI (that renders the computed value or view)

import React from 'react'
import { observer } from 'mobx-react'
import { useMst } from 'stores'

import { UserStoreInstance } from 'stores/userStore'

const Home: React.FC = () => {
  const state = useMst()

  return (
      <div>
        <button onClick={state.assets.load}>
          load
        </button>
        <div>
          {state.user.assetValue}
        </div>
      </div>
  )
}

export default observer(Home)

No matter how many time I click on the load button that replace the array value with mocked data I always get the same output on the render "No Data".

We try also to import directly the UserStoreInstance and the same; and other option was to consume the getById through getRoot or getParent and change a little bit the strategy for the creation of the instance but we end up with the same behavior.

Seems to me that something with the observable is broken maybe, or there's something I'm missing.

A hack that I found out is the following:

get assetValue() {
   console.log('> AssetsStoreInstance: ', AssetsStoreInstance.assets.length)
   const asset = AssetsStoreInstance.getById(self.assetId);

    if (asset) {
      return JSON.stringify(asset)
    }

   return 'No Data'
}

Calling any method of the store data seems to wake up the observable or getSnapshot(AssetsStoreInstance) also works but I don't feel comfortable with any of both.

[EmilTholin]

Hi @juanmavillarrazadb!

Values returned from an action will not be observed. You could instead have the AssetsStore action getById be returned from a views block and it will be observed:

export const AssetsStore = types
  .model("AssetsStore", {
    assets: types.array(Asset),
    fetching: false
  })
  .views((self) => ({
    getById(id: string): IAsset | undefined {
      return self.assets.find((i) => i.id === id);
    }
  }))
  // ...

[EmilTholin]

(Try to include a minimal reproducible example of your code in the future, e.g. a CodeSandbox link. That will increase the likelihood of someone taking the time to try and help)

[juanmavillarrazadb]

Thank you @EmilTholin very much for the response, definitely moving the action to a view is the fix of this issue, anyway I will add a codesanbox for anyone to reproduce the same behavior