infinite-react

Declarative application state

Rock solid trivial to use state machine for react

With infinite-react you can control what components react will render in an state driven fashion. infinte-react works similar to react router but instead of conditionally render based on the url path it does it driven by a state machine that you can define declaratively. Let see it with an example:

import React from 'react';
import { StateMachine, State, Transition, useBus, useEvent } from 'infinite-react'

export class Example extends React.Component {
    render() {
        return (
            <div>
                <h1>State Machine controlled component:</h1>
                <StateMachine initial="login" bus={useBus()}>
                    <State name="login">
                        <Transition event="login.success" state="mainpage"/>

						<!-- This will be rendered ehen the state machine reaches the 'login' state -->
                        <h2><p>Inside Login State</p></h2>                        
                        <button className="btn btn-primary" onClick={(e)=>useEvent('login.success')}>Simulate login.success</button>
                    </State>

                    <State name="mainpage">
                        <Transition event="login.expired"    state="login"/>
                        <Transition event="detail.selected"  state="detail"/>

						<!-- This will be rendered ehen the state machine reaches the 'mainpage' state -->
                        <h2><p>Inside Main page</p></h2>   
                        <button className="btn btn-primary" onClick={(e) => useEvent('login.expired')}>Simulate login.expired</button>
                        <button className="btn btn-primary" onClick={(e) => useEvent('detail.selected')}>Simulate detail.selected</button>
                    </State>

                    <State name="detail">
                        <Transition event="login.expired"   state="login"/>
                        <Transition event="navigation.Main" state="mainpage"/>

						<!-- This will be rendered ehen the state machine reaches the 'detail' state -->
                        <h2><p>Inside Detail</p></h2>   
                        <button className="btn btn-primary" onClick={(e) => useEvent('login.expired')}>Simulate login.expired</button>
                        <button className="btn btn-primary" onClick={(e) => useEvent('navigation.Main')}>Simulate navigation.Main</button>
                    </State>
                </StateMachine>
            </div>
        );
    }
}

This is a full working example so you dont need more than setup your react application, install infinite-react (npm install infinite-react) and copy the Example component defined above.

In this example we define 3 states to our application:

1. login
2. mainpage
3. detail

We define login as the initial state by setting the initial property of the state machine to "login"

<StateMachine initial="login" .... >...</StateMachine>

So the first thing to render is what is indide of <State name="login"> as we defined it in the initial property of the StateMachine component. Inside each state, we define a set of transitions that will define what are the valid states to go and the events that triggers to move there.

So that, taking the Example component, we can see here the following transitions: From State | When event | Goes to state | Definition used | |----------|-----------------|---------------|-----------------| Login | login.success | mainpage | | mainpage | login.expired | Login | | mainpage | detail.selected | detail | | detail | login.expired | Login | | detail | navigation.Main | mainpage | |

So we can clearly get an idea of how the application behaves by just reading the code. It is trivial to extend it with new states and transitions.

The StateMachine component uses a publisher/subscriber bus to receive the events. It is as simple as define to automatically susbcribe it to all events declared in the transitions. You can send an event by just calling the function useEvent('event name') as we do in the button clicks in the example <button className="btn btn-primary" onClick={(e) => useEvent('login.success')}> We explicitly require this sintax instead for future extensions and retrocompatibility.

And that is all, no more tricks or undocummented stuff, it simply works as simple as this. We are now in the preview version 0.0.5, if you think it fits for you please support us, we will release a production version soon. Your support makes things happen.!!!