zippy-store

zippy-store is a lightweight, flexible, and type-safe global shared state management library for React, React Native, and JavaScript applications. It provides a simple API to manage global shared state, subscribe to state changes, and dispatch actions. With built-in support for selector, it ensures optimal performance by preventing unnecessary re-renders. Additionally, it includes seamless persistence, ensuring state is retained across sessions.

---

Features

• 🚀 Lightweight: Minimalistic API with zero dependencies.
• 🛠 Type-Safe: Built with TypeScript for better developer experience.
• 🎯 Selector: 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.
• 📦 Persistence: Built-in persistence support for JavaScript, React and React Native(AsyncStorage) apps.
• 🔗 Shared State: Share and sync state across multiple components seamlessly.
• 📊 Global Access: Access and update state globally from any component.
• 📤 State Synchronization: Ensure consistent data flow between different UI sections.
• ⚡️ Async Support: Handle asynchronous state updates effortlessly.

---

Installation

You can install zippy-store via npm:

1npm install zippy-store

or

1yarn add zippy-store

Usage

Creating a Store in React and React Native

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

1import { create } from "zippy-store";
2
3const useCounterTimerStore = create("counterTimerStore", (set, get) => ({ //set for setting the state and get for getting the state
4  counter: 0,
5  timer: 60,
6  user: { name: "John Doe", age: 30 },
7  incrementCounter: () => set((state) => ({ counter: state.counter + 1 })), // return the new state in set function with callback
8  decrementTimer: () => {
9    const { timer } = get(); // get the current value of timer
10    return set({ timer: timer - 1 }); //can also pass object in set directly
11  },
12}));
13
14export default useCounterTimerStore;

Example 1: Using Full State

1import React from "react";
2import useCounterTimerStore from "./useCounterTimerStore";
3
4const Example_1 = () => {
5  const { counter, timer, dispatch } = useCounterTimerStore();
6
7  return (
8    <div>
9      <h4>Example_1</h4>
10      <h2>Counter Value : {counter}</h2>
11      <h2>Timer Value: {timer}</h2>
12      <div>
13        <button onClick={dispatch.incrementCounter}>Increment Counter</button>
14        <button style={{ marginLeft: 10 }} onClick={dispatch.decrementTimer}>
15          Decrement Timer
16        </button>
17      </div>
18    </div>
19  );
20};
21
22export default Example_1;

Example 2: Using Selector to Optimize Re-renders

1import React from "react";
2import useCounterTimerStore from "./useCounterTimerStore";
3
4const Example_2 = () => {
5  const { counter, user_name, dispatch } = useCounterTimerStore((state) => ({ counter: state.counter, user_name: state.user.name })); // using selector
6
7  return (
8    <div>
9      <h4>Example_2</h4>
10      <h2>User Name : {user_name}</h2>
11      <h2>Counter Value : {counter}</h2>
12      <div>
13        <button onClick={dispatch.incrementCounter}>Increment Counter</button>
14        <button style={{ marginLeft: 10 }} onClick={dispatch.decrementTimer}>
15          Decrement Timer
16        </button>
17      </div>
18    </div>
19  );
20};
21
22export default Example_2;

Example 3: Sharing State Between Components

Multiple components can share the same store and stay in sync with state updates.

1
2import { create, store } from "zippy-store";
3
4
5const useAuthStore = create("authStore", (set, get) => ({
6  isAuthenticated: false,
7  user: null,
8  login: (user) => set({ isAuthenticated: true, user }),
9  logout: () => set({ isAuthenticated: false, user: null }),
10}));
11
12import React from "react";
13import useAuthStore from "./authStore"; // Assuming the store is in authStore.ts
14
15const Header = () => {
16  const { isAuthenticated, user, dispatch } = useAuthStore();
17
18  return (
19    <header>
20      {isAuthenticated ? (
21        <div>
22          Welcome, {user?.name}!
23          <button onClick={dispatch.logout}>Logout</button>
24        </div>
25      ) : (
26        <button onClick={() => dispatch.login({ name: "Test User", email: "test@example.com" })}>Login</button>
27      )}
28    </header>
29  );
30};
31
32const Profile = () => {
33  const { isAuthenticated, user } = useAuthStore();
34
35  return (
36    <div>
37      <h2>Profile</h2>
38      {isAuthenticated ? (
39        <p>Email: {user?.email}</p>
40      ) : (
41        <p>Please login to view your profile.</p>
42      )}
43    </div>
44  );
45};
46

Example 4: Async Support

zippy-store supports asynchronous state updates in actions.

1import { create } from "zippy-store";
2
3const useMoviesStore = create((set) => ({
4  data: {},
5  fetch: async () => {
6    const response = await someApiCall() 
7    set({ data: respoonse.data })
8  },
9}))
10
11// or
12
13const useMoviesStore = create((set) => ({
14  data: {},
15  fetch: () => {
16    set(async () => {
17      const response = await someApiCall() 
18      return { data: respoonse.data }
19    })
20  },
21}))
22

Example 4: Persistence Support

zippy-store supports persistence for React and JavaScript apps (React Native is not supported yet).

1import { create } from "zippy-store";
2
3const usePersistentStore = create("persistentStore", (set, get) => ({
4  theme: "light",
5  setTheme: (theme: string) => set(() => ({ theme })),
6}), true); // Enable persistence with true as the third parameter

Creating a Store and using it directly in JavaScript, React and React Native apps

You can access the underlying store object for more advanced use cases and in non-React JavaScript environments(non React Components).

1import { store } from 'zippy-store';
2
3const { dispatch } = store.createStore('counterTimerStore', (set, get) => ({
4  counter: 0,
5  timer: 60,
6  user: { name: "John Doe", age: 30 },
7  incrementCounter: () => set((state) => ({ counter: state.counter + 1 })),
8  decrementTimer: () => set((state) => ({ timer: state.timer - 1 })),
9}));
10
11// Get the current state
12const counterTimerState = store.getState('counterTimerStore');
13
14// Subscribe to changes
15const unsubscribe = store.subscribe('counterTimerStore', (newState) => {
16  console.log('Store updated:', newState);
17});
18
19// Update the state directly
20dispatch.incrementCounter();
21// or
22const actions = store.getActions('counterTimerStore');
23actions.incrementCounter();
24// or
25store.setState('counterTimerStore', (state) => ({ counter: state.counter + 1 }));
26
27// Unsubscribe when done
28unsubscribe();

API

create(storeKey: string, stateAndActionsFn: (set, get) => State & Partial<Actions>, persist?: boolean): 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. set allows updating the state. get allows accessing the state.
• persist: Boolean flag to enable persistence (default: false).

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.createStore(key: string, stateAndActionsFn: (setState) => State & Actions, persist?: boolean): State. Initializes the store with the given key and stateAndActionsFn and returns the dispatch object with actions.

• store.getActions(key: string): Actions Returns the current actions of a given storeKey.

• 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