Quanton NPM | npm.io

Quanton

Quanton is a lightweight and flexible state management library for React applications, providing both synchronous and asynchronous storage solutions with an intuitive API. It offers efficient data persistence and seamless integration with various storage mechanisms.

npm install quanton

yarn add quanton

Usage

Importing Quanton

You can import Quanton and its components as follows:

import Quanton, {
  useStore,
  StoreProvider,
  createStore,
  initLocalStorage,
  initSessionStorage,
  initRnAsyncStorage,
  initMMKVStorage,
} from 'quanton';

Quanton: This is the default export of the Quanton library. It represents the main Quanton module and contains all its exported entities.
useStore: This is a hook provided by Quanton for accessing state and actions from a store within a functional component.
StoreProvider: This component is used for providing a store context to its child components. It is necessary for integrating persistence with Quanton.
createStore: This function is used to create a new Quanton store instance with initial state and actions.
initLocalStorage, initSessionStorage, initRnAsyncStorage, initMMKVStorage: These functions are used to initialize storage mechanisms for different platforms. They are used in conjunction with the StoreProvider component for data persistence.

Creating a Store

Quanton allows you to create a store using the createStore function. Here's an example:

//stores.ts;
const initialState = { count: 0 };
export const counterStore = createStore(
  initialState,
  (setState, getState, getStore) => ({
    increment: () =>
      setState((state) => ({ ...state, count: state.count + 1 })),
    decrement: () =>
      setState((state) => ({ ...state, count: state.count - 1 })),
    reset: () => setState({ count: 0 }),
  })
);

Using the Store

You can use the useStore hook to access the store state and actions in your components:

//main component
import React from 'react';
import {counterStore} from "./stores"
const CounterComponent = () => {
  const { count, increment, decrement, reset } = useStore(counterStore);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

Persistence

If you want persistence, you can store data into localStorage or any other preferred storage by wrapping your app with StoreProvider. There are two types of StoreProvider: SyncStore for non-awaitable storage like localStorage and sessionStorage, and AsyncStore for awaitable storage like React Native AsyncStorage and MMKV.

React

- LocalStorage

import {StoreProvider, initLocalStorage} from "quanton"
//app.tsx
const App = () => {
  return (
    <StoreProvider.SyncStore storage={initLocalStorage()}>
      {/* Children components */}
    </StoreProvider.SyncStore>
  );
}

- SessionStorage

import {StoreProvider, initSessionStorage} from "quanton"
//app.tsx
const App = () => {
  return (
    <StoreProvider.SyncStore storage={initSessionStorage()}>
      {/* Children components */}
    </StoreProvider.SyncStore>
  );
}

React Native

- AsyncStorage

//app.tsx
import { StoreProvider, initRnAsyncStorage } from 'quanton';
import AsyncStorage from '@react-native-async-storage/async-storage'; // Import AsyncStorage from React Native

const App = () => {
  return (
    <StoreProvider.AsyncStore storage={initRnAsyncStorage(AsyncStorage)}>
        {/* Children components */}
    </StoreProvider.AsyncStore>
  );
};

- MMKV

//app.tsx

import { initMMKVStorage } from 'quanton'; // initRnAsyncStorage from Quanton
import MMKV from 'react-native-mmkv'; // Import MMKV from React Native MMKV library

const mmkvStorage = initMMKVStorage(MMKV);

const App = () => {
  return (
    <StoreProvider.AsyncStore storage={initMMKVStorage(mmkvStorage)}>
      {/* Children components */}
    </StoreProvider.AsyncStore>
  );
};

Persistance store

if you enable persistence that no mean that your all stores data are store into local storage.

//stores.ts
const initialState = { count: 0 };
export const counterStore = createStore(
  initialState,
  (setState, getState, getStore) => ({
    increment: () =>
      setState((state) => ({ ...state, count: state.count + 1 })),
    decrement: () =>
      setState((state) => ({ ...state, count: state.count - 1 })),
    reset: () => setState({ count: 0 }),
  }),
  {
    persist: { name: 'count' },
  }
);