JavaScript State Machines and Statecharts

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • xstate

    Actor-based state management & orchestration for complex app logic.

    There's also a pared down, minimal version of xstate: https://github.com/statelyai/xstate/tree/main/packages/xstat...

  • redux-toolkit

    The official, opinionated, batteries-included toolset for efficient Redux development

    Interesting use case, because for a react project with lots of state management, were you not using redux? And if so, were you using Redux Toolkit? https://redux-toolkit.js.org/

    The last major react project I worked on I found that RTK kinda functioned as a state machine definition for the project, and let us work on requests states in our components, i.e. if loading do this, if not yet loaded do that, etc.

    I guess with this state machine framework you'd also be managing DOM state in one spot which could be kind of nice. In the big project we had to consider Formik managed input fields, buttons, modals, etc.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • redux-xstate-poc

    Discontinued Manage your Redux side effects with XState. Use 100% of XState's features.

    Very doable, but not the most ideal syntax, since `createSlice` is focused on "here's an action / thing that happened, here's the reducer that handles that".

    On the flip side, you can also use XState state machines as Redux reducers. A state machine is, after all, a function that takes a current state value + some event, and returns a new state.... exactly the same as a reducer function!

    David and I have been saying for a while that we'd like to have a more official integration between XState and Redux. A while back, Matt Pocock put together an proof of concept for what a `createXStateSlice` might look like [1]. I actually sat down with David a couple weeks ago and we did some further design discussions about the possibility of using the `@xstate/fsm` package (a smaller version of XState's logic) as a starting point, and generating RTK actions based on that. No code yet, but it seems feasible.

    [0] https://dev.to/davidkpiano/redux-is-half-of-a-pattern-1-2-1h...

    [1] https://github.com/mattpocock/redux-xstate-poc

  • restate

    Build reliable, understandable and debuggable backends with state machines

    One quality about state machines that I find overlooked is debuggability. Limiting state updates to transitions makes it so easy to debug weird edge cases and race conditions. This upside is perhaps more relevant on the backend though where state is more long-lived, which is why I've been experimenting with a project for building backends with state machines: https://github.com/fabianlindfors/restate.

  • yieldmachine

    Components for State Machines, using Generator Functions

    I’m curious how you use and compose generator functions?

    I created a JavaScript state machine library using them to define each state. https://github.com/JavaScriptRegenerated/yieldmachine

    I imagine your approach must be different?

  • redux-essentials-example-app

    Example app for the Redux Essentials tutorial

    Hi, I maintain Redux and wrote most of our docs (including our current tutorials).

    Can you give some details on which parts of our docs you feel are "incomprehensible"? I'm curious which specific pages you've been looking at, and for what purpose.

    We've tried to organize the docs using the "Documentation System" approach described at [0]: Tutorials for teaching step-by-step, Explanations and How-To guides for specific topics, and References for API details.

    Generally we want people to go through our "Redux Essentials" tutorial [1] as the primary way to learn how to use Redux correctly. It teaches "modern Redux" patterns with Redux Toolkit as the standard way to write Redux logic (including RTK Query for handling data fetching), and React-Redux hooks in components.

    I'm genuinely interested in feedback on what explanations aren't clear and how we can improve things!

    [0] https://documentation.divio.com/

    [1] https://redux.js.org/tutorials/essentials/part-1-overview-co...

  • documentation-framework

    "The Grand Unified Theory of Documentation" (David Laing) - a popular and transformative documentation authoring framework

    Hi, I maintain Redux and wrote most of our docs (including our current tutorials).

    Can you give some details on which parts of our docs you feel are "incomprehensible"? I'm curious which specific pages you've been looking at, and for what purpose.

    We've tried to organize the docs using the "Documentation System" approach described at [0]: Tutorials for teaching step-by-step, Explanations and How-To guides for specific topics, and References for API details.

    Generally we want people to go through our "Redux Essentials" tutorial [1] as the primary way to learn how to use Redux correctly. It teaches "modern Redux" patterns with Redux Toolkit as the standard way to write Redux logic (including RTK Query for handling data fetching), and React-Redux hooks in components.

    I'm genuinely interested in feedback on what explanations aren't clear and how we can improve things!

    [0] https://documentation.divio.com/

    [1] https://redux.js.org/tutorials/essentials/part-1-overview-co...

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts