Skip to content
📠State management hook based on flux pattern
Branch: master
Clone or download
Latest commit 2cac055 May 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs include logo Apr 11, 2019
src fix ssr May 24, 2019
.gitignore include unit tests Apr 11, 2019
.npmignore update readme Apr 10, 2019
LICENSE include unit tests Apr 11, 2019
README.md Update README.md May 15, 2019
jest.config.js include unit tests Apr 11, 2019
jestConfig.json include unit tests Apr 11, 2019
package.json 2.3.4 May 24, 2019
rollup.config.js simple api and performance upgrade May 8, 2019
setup.ts include unit tests Apr 11, 2019
tsconfig.jest.json include unit tests Apr 11, 2019
tsconfig.json include unit tests Apr 11, 2019
yarn.lock include clone deep May 15, 2019

README.md

React forme Logo - React hook form valiation

Little State Machine

Flux state management should be easy

Tweet  npm downloads npm npm

  • Follow flux application architecture
  • Tiny with 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

🔗 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) =>

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

// 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, 
}

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

🔗 window.STATE_MACHINE_DEBUG

This will toggle the console output in dev tool.

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

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

Example

app.js

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

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

const App = ({children}) => {
  return (
    <StateMachineProvider>
      <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: payload,
  }
}
You can’t perform that action at this time.