Package Exports

little-state-machine

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (little-state-machine) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Little State Machine

State management made super simple

✨ Features

Tiny with 0 dependency and simple (less than 1kb)
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.

🔗 `createStore`

createStore(store, options?: {
 name: string; // rename the store
 middleWares?: Function[]; // function to invoke each action
}})

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

import yourDetail from './state/yourDetail';

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

createStore(
  {
    yourDetail, // it's an object of your state { firstName: '', lastName: '' }
  },
  {
    middleWares: [log], // an array of middleWares, which gets run each actions
  },
);

🔗 `useStateMachine`

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

const { actions, state } = useStateMachine<T>(
  {
    removeNameAction,
    updateUserNameAction,
  },
  {
    shouldReRenderApp: false, // This will prevent App from re-render and only update the store
  },
);

📖 Example

Check out the Demo.

📋 app.js

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

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

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

📋 action.js

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

📋 yourComponent.js

import React from 'react';
import { updateName } from './action.js';
import { useStateMachine } from 'little-state-machine';

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

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

⚒ 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

For legacy IE11 support, you can import little-state-machine IE11 version.

import { createStore } from 'little-state-machine/dist/little-state-machine.ie11';

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