Little State Machine

React custom hook for persist state management

State managementReactState machineFlux
beekai-oss/little-state-machinelrz5wloklm.csb.app/little-state-machine

README

📠 Little State Machine

    
State management made super simple
npm downloads npm npm

✨ 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.

  1. ```tsx
  2. <StateMachineProvider>
  3.   <App />
  4. </StateMachineProvider>
  5. ```

🔗 createStore


Function to initialize the global store, invoked at your app root (where `` lives).

  1. ```tsx
  2. function log(store) {
  3.   console.log(store);
  4.   return store;
  5. }

  7. createStore(
  8.   {
  9.     yourDetail: { firstName: '', lastName: '' } // it's an object of your state
  10.   },
  11.   {
  12.      name?: string; // rename the store
  13.      middleWares?: [ log ]; // function to invoke each action
  14.      storageType?: Storage; // session/local storage (default to session)
  15.     
  16.      persist?: 'action' // onAction is default if not provided
  17.      // when 'none' is used then state is not persisted
  18.      // when 'action' is used then state is saved to the storage after store action is completed
  19.      // when 'beforeUnload' is used then state is saved to storage before page unloa
  20.   },
  21. );
  22. ```

🔗 useStateMachine


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

  1. ```tsx
  2. const { actions, state, getState } = useStateMachine<T>({
  3.   updateYourDetail,
  4. });
  5. ```

📖 Example


Check out the Demo.

  1. ```tsx
  2. import React from 'react';
  3. import {
  4.   StateMachineProvider,
  5.   createStore,
  6.   useStateMachine,
  7. } from 'little-state-machine';

  9. createStore({
  10.   yourDetail: { name: '' },
  11. });

  13. function updateName(state, payload) {
  14.   return {
  15.     ...state,
  16.     yourDetail: {
  17.       ...state.yourDetail,
  18.       ...payload,
  19.     },
  20.   };
  21. }

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

  26.   return (
  27.     <div onClick={() => actions.updateName({ name: 'bill' })}>
  28.       {state.yourDetail.name}
  29.     </div>
  30.   );
  31. }

  33. const App = () => (
  34.   <StateMachineProvider>
  35.     <YourComponent />
  36.   </StateMachineProvider>
  37. );
  38. ```

⌨️ Type Safety (TS)


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

Checkout the example.

  1. ```ts
  2. import 'little-state-machine';

  4. declare module 'little-state-machine' {
  5.   interface GlobalState {
  6.     yourDetail: {
  7.       name: string;
  8.     };
  9.   }
  10. }
  11. ```

💁‍♂️ Tutorial


Quick video tutorial on little state machine.

⚒ DevTool


DevTool component to track your state change and action.

  1. ```tsx
  2. import { DevTool } from 'little-state-machine-devtools';

  4. <StateMachineProvider>
  5.   <DevTool />
  6. </StateMachineProvider>;
  7. ```