{"action":"created","issue":{"url":"https://api.github.com/repos/davidkpiano/xstate/issues/123","repository_url":"https://api.github.com/repos/davidkpiano/xstate","labels_url":"https://api.github.com/repos/davidkpiano/xstate/issues/123/labels{/name}","comments_url":"https://api.github.com/repos/davidkpiano/xstate/issues/123/comments","events_url":"https://api.github.com/repos/davidkpiano/xstate/issues/123/events","html_url":"https://github.com/davidkpiano/xstate/issues/123","id":328902064,"node_id":"MDU6SXNzdWUzMjg5MDIwNjQ=","number":123,"title":"Question on extracting state machine by key","user":{"login":"ShMcK","id":4660659,"node_id":"MDQ6VXNlcjQ2NjA2NTk=","avatar_url":"https://avatars0.githubusercontent.com/u/4660659?v=4","gravatar_id":"","url":"https://api.github.com/users/ShMcK","html_url":"https://github.com/ShMcK","followers_url":"https://api.github.com/users/ShMcK/followers","following_url":"https://api.github.com/users/ShMcK/following{/other_user}","gists_url":"https://api.github.com/users/ShMcK/gists{/gist_id}","starred_url":"https://api.github.com/users/ShMcK/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ShMcK/subscriptions","organizations_url":"https://api.github.com/users/ShMcK/orgs","repos_url":"https://api.github.com/users/ShMcK/repos","events_url":"https://api.github.com/users/ShMcK/events{/privacy}","received_events_url":"https://api.github.com/users/ShMcK/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-04T04:10:18Z","updated_at":"2018-06-04T13:14:45Z","closed_at":null,"author_association":"NONE","body":"**Feature/Question**\r\n\r\nFeel no pressure to respond to these ramblings :)\r\n\r\nI've been considering making a large statechart that governs an entire project. This would provide an overall map of the project for developing/debugging purposes, and ensure everything works together.\r\n\r\nI had the idea of targeting smaller chunks of the state for components, providing the component a state scoped and governed by a given xState \"key\". I assumed this was how \"channel\"s work in React-Automata, but that doesn't seem to be the case.\r\n\r\nBest practices seem to suggest that developers should avoid passing the actual named state into components, as it couples the component to the state machine. I don't see a problem with passing state around as a prop.\r\n\r\n**Am I way off the mark of how xState should work with components?**\r\n- Is it more recommended to have many small disconnected states, or a single large state?\r\n- Is there any easy way to access a nested state machine using a given key? Something like a `getStateMachineByKey('someKey')`?\r\n- Are there any recommended alternatives to \"react-automata\" to explore?"},"comment":{"url":"https://api.github.com/repos/davidkpiano/xstate/issues/comments/394350078","html_url":"https://github.com/davidkpiano/xstate/issues/123#issuecomment-394350078","issue_url":"https://api.github.com/repos/davidkpiano/xstate/issues/123","id":394350078,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NDM1MDA3OA==","user":{"login":"davidkpiano","id":1093738,"node_id":"MDQ6VXNlcjEwOTM3Mzg=","avatar_url":"https://avatars2.githubusercontent.com/u/1093738?v=4","gravatar_id":"","url":"https://api.github.com/users/davidkpiano","html_url":"https://github.com/davidkpiano","followers_url":"https://api.github.com/users/davidkpiano/followers","following_url":"https://api.github.com/users/davidkpiano/following{/other_user}","gists_url":"https://api.github.com/users/davidkpiano/gists{/gist_id}","starred_url":"https://api.github.com/users/davidkpiano/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidkpiano/subscriptions","organizations_url":"https://api.github.com/users/davidkpiano/orgs","repos_url":"https://api.github.com/users/davidkpiano/repos","events_url":"https://api.github.com/users/davidkpiano/events{/privacy}","received_events_url":"https://api.github.com/users/davidkpiano/received_events","type":"User","site_admin":false},"created_at":"2018-06-04T13:14:45Z","updated_at":"2018-06-04T13:14:45Z","author_association":"OWNER","body":"If you think about how things work in real life (e.g., electronics) it's a bunch of isolated systems communicating with each other.\r\n\r\nWith that said, statecharts can also communicate with each other. One way this can be exhibited is by having components with internal statecharts _send_ their state (similar to how `dispatch` works in Redux, but `send` is the official term).\r\n\r\nFor example, in React, this can look like:\r\n\r\n```jsx\r\n<Toggle\r\n  onChange={value => this.handleToggleChange(value)}\r\n/>\r\n```\r\n\r\nWhere `<Toggle />` might have an internal statechart that looks like:\r\n\r\n```js\r\nconst toggleMachine = Machine({\r\n  initial: 'active',\r\n  states: {\r\n    active: { on: { TOGGLE: 'inactive' } },\r\n    inactive: { on: { TOGGLE: 'active' } }\r\n  }\r\n});\r\n\r\n// ...\r\n// send method on component\r\nsend(event) {\r\n  const nextState = // get next state from toggleMachine.transition(...)\r\n\r\n  // send the next state\r\n  this.props.onChange(nextState.value);\r\n}\r\n```\r\n\r\nThis will send `'active'` or `'inactive'` to the listener (if you really want, you can map these to `true` or `false` but this doesn't scale if you have more than 2 possible toggle values).\r\n\r\nYou might be thinking, \"well this looks like how I've already been doing things in React\" and you'd be absolutely correct 😉 It's essentially the same thing, except explicitly modeled."}}
{"actor":{"display_login":"davidkpiano"}}