little-state-machine

Little State Machine

Flux state management should be easy

 

• Follow flux application architecture
• Tiny, 0 dependency and simple
• Persist your state by default
• Build with React Hook

Install

$ npm install little-state-machine

Demo

Check out the Demo.

API

// individual action
Action: (store: Object, payload: any) => void;
// multiple actions
Actions: { [key: string] : Action }
// options to name action in debug, and weather trigger global state update to re-render entire app 
Options: {
  debugName: string, // unique debug name can really help you :)
  shouldReRenderApp: boolean, 
}

🔗 useStateMachine(Action | Actions, Options) =>

{ action: (any) => void, actions: { [key: string] : (any) => void}, state: Object }

This hook function will return action/actions and state of the app.

🔗 window.STATE_MACHINE_DEBUG

This will turn on the dev tool at console.

window.STATE_MACHINE_DEBUG(true) to turn debug on in console

window.STATE_MACHINE_DEBUG(false) to turn off debug on in console

🔗 StateMachineProvider

This is a Component to wrapper around your entire app in order to create context.

🔗 createStore

Function to initial the global store, call at app root where StateMachineProvider is.

🔗 store

The global store.

Example

app.js

import React, { useState } from 'react'
import state from './state'
import YourComponent from './yourComponent'
import { StateMachineProvider, store, createStore } from 'little-state-machine'

// create your store
createStore({
  state,
});

const App = ({children}) => {
  const [globalState, updateStore] = useState(store);
  
  return <StateMachineProvider
    value={{
      store: globalState,
      updateStore,
    }}
  >
    <YourComponent />
  </StateMachineProvider>
}

yourComponent.js

import React from 'react'
import { updateName } from './action.js'
import { useStateMachine } from 'little-state-machine'

export default function YourComponent() {
  const {
    action,
    state: { name },
  } = useStateMachine(updateName);

  return <div onClick={() => action('bill')}>
    {name}
  </div>
}

state.js

export default {
  name: 'test',
}

action.js

export function updateName(state, payload) {
  return {
    ...state,
    name: payload,
  }
}