little-state-machine

📠 Little State Machine

State management made super simple

✨ Features

• Tiny with 0 dependency and simple (715B gzip)
• Persist state by default (sessionStorage or localStorage)
• Fine-tune the performance with partial render and selector

📦 Installation

$ npm install little-state-machine

🕹 API

🔗 createStore

Function to initialize the global store.

function log(store) {
  console.log(store);
  return store;
}

createStore(
  {
    yourDetail: { firstName: '', lastName: '' } // it's an object of your state
  },
  {
     name?: string; // rename the store
     middleWares?: [ log ]; // function to invoke each action
     storageType?: Storage; // session/local storage (default to session)
     persist?: 'action' // onAction is default if not provided
     // when 'none' is used then state is not persisted
     // when 'action' is used then state is saved to the storage after store action is completed
     // when 'beforeUnload' is used then state is saved to storage before page unloa
  },
);

🔗 useStateMachine

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

const { actions, state, getState } = useStateMachine<T>({
  actions?: Record<string, Function> // Optional action to update global state
  selector?: Function, // Optional selector to isolate re-render based on selected state
});

📖 Example

Check out the Demo.

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

createStore({
  yourDetail: { name: '' },
});

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

function selector(state) {
  return state.yourDetails.name.length > 10;
}

function YourComponent() {
  const { actions, state } = useStateMachine({ actions: { updateName } });

  return (
    <buttton onClick={() => actions.updateName({ name: 'bill' })}>
      {state.yourDetail.name}
    </buttton>
  );
}

function YourComponentSelectorRender() {
  const { state } = useStateMachine({ selector });
  return <p>{state.yourDetail.name]</p>;
}

const App = () => (
  <>
    <YourComponent />
    <YourComponentSelectorRender />
  </>
);

⌨️ Type Safety (TS)

You can create a global.d.ts file to declare your GlobalState's type.

Check out the example.

import 'little-state-machine';

declare module 'little-state-machine' {
  interface GlobalState {
    yourDetail: {
      name: string;
    };
  }
}

⌨️ Migrate to V5

• StateMachineProvider has been removed, simple API

const App = () => (
- <StateMachineProvider>
    <YourComponent />
- <StateMachineProvider>
);

• Actions now is an object payload useStateMachine({ actions: { updateName } })
• Upgrade react >= 18

By the makers of BEEKAI

We also make BEEKAI. Build the next-generation forms with modern technology and best in class user experience and accessibility.

🤝 Contributors

Thanks go to these wonderful people:

Similar packages

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.