menu

Statecharts

Statecharts are a precise, visual way of modeling the behaviour of complex reactive systems. They describe how things work, and can help you get your code doing exactly what you want.

Channels
Team
Posts
Members
Info

How to mock state.matches()

I have a react component that renders an edit button if the state is 'editable'. I have setup a test, with react-testing-library and jest' to see if the edit button renders in the 'editable' state. I keep getting the error TypeError: Cannot read property 'extend' of undefined. …

thumbsup
0
message-simple
1

Implementing a "standard" application using statecharts

I've been hacking around using statecharts (xstate specifically) for writing entire applications and was wondering if ya'll would be interested in giving some feedback on some of the concepts and tools I've been applying. So I have an app machine where "routable" events are…

thumbsup
0
message-simple
0

Initialising a state machine in a specific state in xState and React

I have a form and I want to load it up in the state it was last used in. I can store the last used state in a database. I'm using @xstate/react, is there a way to pass in a state to useMachine(stateMachine); for it to initialise in ? Has anyone found a way to do this?

thumbsup
1
message-simple
3

Looking for examples or tutorials using XState with vanilla javascript.

Hi all - I recently discovered statecharts via Ian Horrock's book and find them very compelling. I'm a hobbyist developer and haven't taken the dive into frameworks like React and Vue yet. I'm working on a website that's simply plain old HTML, CSS and Javascript and would like…

thumbsup
0
message-simple
3

How to model a simple switch case statement like below?

case 'APPLE' check and case 'ORANGE' check need not be done sequentially. But default state is chosen, only when neither are evaluated to true

thumbsup
1
message-simple
3

When to use Context?

XState is an awesome library and I'm loving it. I'm building a React App that will prompt users for information in a wizard-style. After all conditions are met, the app will render an invoice using React Components. Before reading the docs, I wasn't sure where this captured…

thumbsup
4
message-simple
37

Using "assign" with non-flat context

I have a context that is not flat. For example: How do I set data.count using the assign syntax? The example shows how to handle a flat context: but I need something like:

thumbsup
0
message-simple
13

Typestate Guard

Playground What is Typestate? Typestate programming is a pattern for enforcing run-time order of operations at compile-time. In State Machine term, this make it impossible for sending an event that doesn't transition to any state when specific state is active. Most of the time…

thumbsup
2
message-simple
0

Using xstate with React and Redux

I'm thinking about the architecture for a new React/Redux-based project. I'd love to use statecharts (with xstate) to help orchestrate matters. I've used `redux-saga` in the past, and like it, but prefer the declarative, explicit, easily visualised nature of statecharts. At a…

thumbsup
1
message-simple
18