Raathigesh / wiretap

:mag: A desktop app for inspecting mobx and mobx state tree apps
https://wiretap.debuggable.io/
MIT License
202 stars 14 forks source link

Not seeing actions for MST Store #3

Open NgoKnows opened 6 years ago

NgoKnows commented 6 years ago

Under the actions pane, I'm seeing This observable does not have any actions associated. These are all singleton MST stores, so they are already instantiated. All of the stores are showing up as expected, just missing actions.

Let me know if I am missing anything.

import UiStore from 'stores/UiStore';
import NavigationStore from 'stores/NavigationStore';
import ReceivingStore from 'routes/receiving/ReceivingStore';
import CarriesStore from 'routes/carries/CarriesStore';

const { wiretap, inspect } = require('mobx-wiretap/mst');

wiretap('My App');

inspect('UiStore', UiStore);
inspect('NavigationStore', NavigationStore);
inspect('ReceivingStore', ReceivingStore);
inspect('CarriesStore', CarriesStore);
Raathigesh commented 6 years ago

This looks fine. Would you please be able to share a sample repo or may be some insight into how the store is structured ?

This is how wiretap detects the actions. https://github.com/Raathigesh/wiretap/blob/master/packages/lib/src/mobxStateTreeTracker.js#L95-L97

I'll also try to replicate the issue.

NgoKnows commented 6 years ago

Here is what one of the stores looks like

import { types } from 'mobx-state-tree';
import debounce from 'lodash-es/debounce';

export const UiStore = types
  .model('UiStore', {
    windowDimensions: types.optional(
      types.model('WindowDimensions', {
        height: types.number,
        width: types.number
      }),
      {
        height: window.innerHeight,
        width: window.innerWidth
      }
    ),
    scrollPosition: window.scrollY
  })
  .views(self => ({
    get isMobileLayout() {
      return self.windowDimensions.width < 900;
    },

    get isDesktopLayout() {
      return self.windowDimensions.width >= 900;
    }
  }))
  .actions(self => ({
    setWindowDimensions() {
      self.windowDimensions = {
        height: window.innerHeight,
        width: window.innerWidth
      };
    },
    setScrollPosition() {
      self.scrollPosition = window.scrollY;
    }
  }))
  .actions(self => ({
    afterCreate() {
      window.addEventListener('resize', debounce(() => self.setWindowDimensions(), 100));
      window.addEventListener('scroll', debounce(() => self.setScrollPosition(), 150));
    }
  }));

// export as singleton
export default UiStore.create();
NgoKnows commented 6 years ago

I'll try digging into it as well when I have a chance.

Raathigesh commented 6 years ago

The store looks fine and it should be working. I'll look into it as well. Would you be able to provide the MST version as well please?

wbercx commented 6 years ago

All I can find so far is that my action does not have a isMobxAction property, which is what isAction() is looking for.

Raathigesh commented 6 years ago

Could you please let me know the Mobx state tree version? There is no public api to get the actions so this is the workaround. I'll look into it.

On Fri., 27 Oct. 2017, 5:07 pm Wesley Bercx, notifications@github.com wrote:

All I can find so far is that my action does not have a isMobxAction property, which is what isAction() is looking for.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/Raathigesh/wiretap/issues/3#issuecomment-339881530, or mute the thread https://github.com/notifications/unsubscribe-auth/AC9tQPeC_63EPy6kJUSPojAngPHLoo0Jks5swXMogaJpZM4QIUnR .

Raathigesh commented 6 years ago

As it turns out isMobxAction() will not work consistently across all the versions. So there is not yet a proper way to identify the associated action of a model. MST does not provide a public API. I can think of an API for wiretap where the user provides the invocable actions as a string array.

inspect("Todo", todo, ['addTodo']);

This is not pretty and I really don't like to do this but it gets the job done.

Looking forward to your feedback on an api like this.

Raathigesh commented 6 years ago

With mobx-wiretap@0.13.0, you could pass in the actions manually as a third parameter to the inspect() method

inspect("Todo", todo, ['addTodo']);

This is a temporary workaround until there is a proper way to detect actions in MST.

robinfehr commented 6 years ago

mobx-state-tree now does expose a getMembers method that could be used to fix that.

HaveF commented 6 years ago

Here I provide a repo based on mweststrate's MST course

https://github.com/HaveF/wiretap-issue

image

silouanwright commented 5 years ago

I may also be getting this issue. All I see with MST, is the initial shape of the store data... but it doesn't update when actions are fired or anything.

Raathigesh commented 5 years ago

I'm no longer maintaining wiretap. Probably I should update the readme to reflect that. If you are interested in taking over the project, please do let me know.