statelyai / xstate

Actor-based state management & orchestration for complex app logic.
https://stately.ai/docs
MIT License
27.18k stars 1.26k forks source link

[xstate/inspect] payload of the event is undefined. #1441

Closed AleksejDix closed 4 years ago

AleksejDix commented 4 years ago

Description When xstate inspect is enabled payload of the event is undefined.

  1. take a data machine from https://github.com/cypress-io/cypress-realworld-app/blob/develop/src/machines/dataMachine.ts

  2. create a second machine and extend it with config and pass down any fetchData service

  3. add xstate/inspect to the app

  4. start the app and with inspector

in your app view where you send the event with payload: {id} like send('FETCH', { id: context.root.$route.params.basketId })

Expected Result payload should contain the id

Actual Result payload is undefined

Reproduction we can do a call and i can show it to you.

toggle the comment // { devTools: false } sandbox

If you remove { devTools: true } from the machine hook everything works

Additional context happens with "@vue/composition-api": "^0.3.4", "@xstate/inspect": "^0.1.0", "@xstate/vue": "^0.1.1",

jeffbski commented 4 years ago

I am seeing the same thing. I just discovered last night. In my app, when I add the @xstate/inspect call, the events are ending up being empty so things break. As soon as I remove the inspect call everything works again. It seems to be specifically related to inspect, since devTools: true is fine as long as inspect is not called.

Here's a fork of the your xstate reddit example, using the latest dependencies, and just adding @xstate/inspect with devTools: true. When you select a subreddit, first selection works, then anything after fails. If you turn off devTools: true or remove the inspect call then everything works fine. https://codesandbox.io/s/xstate-react-reddit-example-with-actors-forked-0stml?file=/src/index.js

Here is fork of your xstate todo example with updated dependencies. Just enabling devTools: true (even without inspect) makes it fail. This may be a separate issue since it is failing as soon as devTools: true is enabled. https://codesandbox.io/s/xstate-todomvc-forked-q9hqs?file=/Todos.jsx

davidkpiano commented 4 years ago

Fixed in @xstate/inspect version 0.1.1

jeffbski commented 4 years ago

Thanks @davidkpiano for the quick fix, it works properly now. I am working on a presentation for Connect.tech to explain how to use xstate with React and was hoping to use the inspector. Awesome project!