zippy-store

zippy-store is a lightweight, flexible, and type-safe state management library for React applications. It provides a simple API to manage global state, subscribe to state changes, and dispatch actions. With built-in support for selectors, it ensures optimal performance by preventing unnecessary re-renders.

Features

• � Lightweight: Minimalistic API with zero dependencies.
• 🛠 Type-Safe: Built with TypeScript for better developer experience.
• 🎯 Selectors: Extract specific parts of the state to avoid unnecessary re-renders.
• 🔄 Reactive: Automatically re-renders components when the state changes.
• 🧩 Modular: Create multiple stores for different parts of your application.

Installation

You can install zippy-store via npm:

npm install zippy-store

or

yarn add zippy-store

Usage

Creating a Store

You can create a store using the create function and use it in components.

import { create } from "zippy-store";

const useCounterTimerStore = create("counterTimerStore", (set) => ({
  counter: 0,
  timer: 60,
  incrementCounter: () => set((state) => ({ counter: state.counter + 1 })),
  decrementTimer: () => set((state) => ({ timer: state.timer - 1 })),
}));

export default useCounterTimerStore;

Using the Store in Components

Example 1: Using Full State

import React from "react";
import useCounterTimerStore from "./useCounterTimerStore";

const Example_1 = () => {
  const { counter, timer, dispatch } = useCounterTimerStore();

  return (
    <div>
      <h4>Example_1</h4>
      <h2>Counter Value : {counter}</h2>
      <h2>Timer Value: {timer}</h2>
      <div>
        <button onClick={dispatch.incrementCounter}>increment counter</button>
        <button style={{ marginLeft: 10 }} onClick={dispatch.decrementTimer}>
          decrement timer
        </button>
      </div>
    </div>
  );
};

export default Example_1;

Example 2: Using Selectors to Optimize Re-renders

import React from "react";
import useCounterTimerStore from "./useCounterTimerStore";

const Example_2 = () => {
  const { counter, dispatch } = useCounterTimerStore((state) => ({ counter: state.counter }));

  return (
    <div>
      <h4>Example_2</h4>
      <h2>Counter Value : {counter}</h2>
      <div>
        <button onClick={dispatch.incrementCounter}>increment counter</button>
        <button style={{ marginLeft: 10 }} onClick={dispatch.decrementTimer}>
          decrement timer
        </button>
      </div>
    </div>
  );
};

export default Example_2;

Example 3: Accessing the Store Directly

You can access the underlying store object for more advanced use cases.

import { store } from 'zippy-store';

// Get the current state
const counterTimerState = store.getState('counterTimerStore');

// Subscribe to changes (less common in components, more useful for other parts of your application)
const unsubscribe = store.subscribe('counterTimerStore', (newState) => {
  console.log('Store updated:', newState);
});

// Update the state directly (use with caution)
store.setState('counterTimerStore')((state) => ({ counter: state.counter + 1 }));

// Remember to unsubscribe when you're done
unsubscribe();

API

create(storeKey: string, stateAndActionsFn: (setState) => State & Actions): Hook

Creates a new store for the given storeKey.

Arguments:

• storeKey: Unique identifier for the store.
• stateAndActionsFn: A function with the initial state and actions. setState allows updating the state.

Returns:

A hook that can be used in React components to access the state and actions.

store

The global store object with the following methods:

• store.createStoreIntialValues(key: string, stateAndActionsFn: (setState) => State & Actions): State. Initializes the store with the given key and stateAndActionsFn.

• store.getState(key: string): State Returns the current state of a given storeKey.

• store.setState(key: string)(newStateCb: (state) => Partial<State>) Updates the state for a given storeKey.

• store.subscribe(key: string, callback: (newState) => void): UnsubscribeFn Subscribes to state changes of a given storeKey and returns an unsubscribe function.

License

MIT

Powered by Harish Ponna @2025