little-state-machine

What is little-state-machine?

The little-state-machine npm package is a lightweight state management library for React applications. It is designed to be simple and easy to use, making it ideal for small to medium-sized projects where you need to manage state without the overhead of more complex solutions.

What are little-state-machine's main functionalities?

State Initialization

This feature allows you to initialize the state of your application. The `createStore` function is used to create a store with an initial state.

import { createStore } from 'little-state-machine';

const initialState = {
  user: {
    name: '',
    age: 0
  }
};

const store = createStore(initialState);

State Update

This feature allows you to update the state. The `useStateMachine` hook is used to access actions that can update the state. In this example, the `updateUser` action updates the user information in the state.

import { useStateMachine } from 'little-state-machine';

const updateUser = (state, payload) => ({
  ...state,
  user: {
    ...state.user,
    ...payload
  }
});

const Component = () => {
  const { actions } = useStateMachine({ updateUser });

  const handleUpdate = () => {
    actions.updateUser({ name: 'John', age: 30 });
  };

  return <button onClick={handleUpdate}>Update User</button>;
};

State Access

This feature allows you to access the current state. The `useStateMachine` hook is used to access the state, which can then be used in your components.

import { useStateMachine } from 'little-state-machine';

const Component = () => {
  const { state } = useStateMachine();

  return (
    <div>
      <p>Name: {state.user.name}</p>
      <p>Age: {state.user.age}</p>
    </div>
  );
};

Other packages similar to little-state-machine

redux

Redux is a popular state management library for JavaScript applications. It is more complex and feature-rich compared to little-state-machine, making it suitable for larger applications with more complex state management needs.

mobx

MobX is a state management library that makes state management simple and scalable by transparently applying functional reactive programming. It is more flexible and powerful than little-state-machine, but also comes with a steeper learning curve.

zustand

Zustand is a small, fast, and scalable state management solution for React. It is similar to little-state-machine in terms of simplicity and ease of use, but offers more features and better performance.

README

Little State Machine

Flux state management made super simple

 

• Follow flux application architecture
• Tiny with 0 dependency and simple (less 1kb)
• 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.

React DevTool Component

Building in DevTool component.

<DevTool />

Window DevTools Object

🔗 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

🔗 window.STATE_MACHINE_RESET

This will reset the entire store.

window.LITTLE_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 } from 'little-state-machine'

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

export default () => {
  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: {
      name: payload
    },
  }
}