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

State management made super simple

✨ Features

• Tiny with 0 dependency and simple (715B gzip)
• Persist state by default (sessionStorage or localStorage)
• Build with React Hooks

📦 Installation

$ npm install little-state-machine

🕹 API

🔗 StateMachineProvider

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

<StateMachineProvider>
  <App />
</StateMachineProvider>

🔗 createStore

Function to initialize the global store, invoked at your app root (where <StateMachineProvider /> lives).

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)
  },
);

🔗 useStateMachine

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

const { actions, state } = useStateMachine<T>({
  updateYourDetail,
});

💁‍♂️ Tutorial

Quick video tutorial on little state machine.

📖 Example

Check out the Demo.

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

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

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

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

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

export default () => (
  <StateMachineProvider>
    <YourComponent />
  </StateMachineProvider>
);

⌨️ Type Safety (TS)

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

Checkout the example.

import 'little-state-machine';

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

import * as React from 'react';
import {
  createStore,
  useStateMachine,
  StateMachineProvider,
  GlobalState,
} from 'little-state-machine';

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

const updateName = (state: GlobalState, payload: { name: string }) => ({
  ...state,
  yourDetail: {
    ...state.yourDetail,
    ...payload,
  },
});

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

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

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

⚒ DevTool

DevTool component to track your state change and action.

import { DevTool } from 'little-state-machine-devtools';

<StateMachineProvider>
  <DevTool />
</StateMachineProvider>;

🖥 Browser Compatibility

Little State Machine supports all major browsers IE11 include !

If you run into issues, feel free to open an issue.

📋 Polyfill

Consider adding Object.entries() polyfill if you're wondering to have support for old browsers. You can weather consider adding snippet below into your code, ideally before your App.js file:

utils.[js|ts]

if (!Object.entries) {
  Object.entries = function (obj) {
    var ownProps = Object.keys(obj),
      i = ownProps.length,
      resArray = new Array(i); // preallocate the Array
    while (i--) resArray[i] = [ownProps[i], obj[ownProps[i]]];
    return resArray;
  };
}

Or you can add core-js polyfill into your project and add core-js/es/object/entries in your polyfills.[js|ts] file.

Sponsors

Thank you very much for those kind people with their sponsorship to this project.