Nominating Presidential Muppets

npm

Need private packages and team management tools?Check out npm Orgs. »

little-state-machine

2.9.23 • Public • Published
Little State Machine - React Hooks for state management

♆ Little State Machine

State management made super simple

Tweet  npm downloads npm

  • Follow flux application architecture
  • Tiny with 0 dependency and simple (less 1kb)
  • Persist state by default (sessionStorage)
  • Build with React Hooks

📦 Installation

$ npm install little-state-machine

🖥 Demo

Check out the Demo.

🕹 API

🔗 StateMachineProvider

This is a Provider 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.

🔗 useStateMachine(Action | Actions, Options?) =>

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

// individual action
Action: (store: Object, payload: any) => void;
// multiple actions
Actions{ [keystring] : 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 :)
  debugNames?: {[key:string]string},
  shouldReRenderApp?: boolean, 
}

⚒ DevTool

Built-in DevTool component to track your state change and action.

<StateMachineProvider>
 {process.env.NODE_ENV !== 'production' && <DevTool />}
</StateMachineProvider>

🛠 Window Object

🔗 window.STATE_MACHINE_DEBUG

This will toggle the console output in dev tool.

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

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

🔗 window.STATE_MACHINE_RESET

This will reset the entire store.

window.STATE_MACHINE_RESET() to reset the localStorage or sessionStorage

🔗 window.STATE_MACHINE_GET_STORE

This will return the entire store.

window.STATE_MACHINE_GET_STORE()

🔗 window.STATE_MACHINE_SAVE_TO

Save into another session/local storage

window.STATE_MACHINE_GET_STORE(name: string)

🔗 window.STATE_MACHINE_LOAD

Load saved state into your app, you can either supply a name of your session/local storage, or supply a string of data.

window.STATE_MACHINE_GET_STORE({ storeName?: string, data?: Object })

storeName: external session/local storage name

data: string of data

📖 Example

📋 app.js

import React from 'react'
import yourDetail from './yourDetail'
import YourComponent from './yourComponent'
import { StateMachineProvider, createStore, DevTool } from 'little-state-machine'
 
// create your store
createStore({
  yourDetail,
});
 
export default () => {
  return (
    <StateMachineProvider>
      {process.env.NODE_ENV !== 'production' && <DevTool />}
      <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: { yourDetail: { name } },
  } = useStateMachine(updateName);
 
  return <div onClick={() => action('bill')}>{name}</div>
}

📋 yourDetail.js

export default {
  name: 'test',
}

📋 action.js

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

Keywords

install

npm i little-state-machine

Downloadsweekly downloads

1,014

version

2.9.23

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability