NoobStore

A lightweight and simple React state management library with support for both local state and server state.

Installation

npm install noob-store

Features

• 🪶 Lightweight and simple API
• 🔄 Local state management
• 🌐 Server state management with loading, error states
• 📦 TypeScript support
• 🎯 Zero dependencies (except React)

Usage

Local State Management

First, create your store:

// stores/counterStore.ts
import { createStore } from "noob-store";

// Create and export a store
export const counterStore = createStore(0);

Then, use it in any components:

// components/Counter.tsx
import { useStore } from "noob-store";
import { counterStore } from "../stores/counterStore";

function Counter() {
  const [count, setCount] = useStore(counterStore);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* Using function update syntax */}
      <button onClick={() => setCount(prev => prev + 1)}>Increment (using function)</button>
    </div>
  );
}

With Selector

Create a store with a selector:

// stores/userStore.ts
import { createStore } from "noob-store";

export const userStore = createStore(
  { name: "John", age: 30, email: "[email protected]" },
  (state) => ({ name: state.name, age: state.age }) // Only select name and age
);

Use it in any components:

// components/UserInfo.tsx
import { useStore } from "noob-store";
import { userStore } from "../stores/userStore";

function UserInfo() {
  const [user, setUser] = useStore(userStore);
  
  // user will only contain name and age
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={() => setUser(prev => ({ ...prev, age: prev.age + 1 }))}>
        Happy Birthday!
      </button>
    </div>
  );
}

Server State Management

Create a server store:

// stores/userServerStore.ts
import { createServerStore } from "noob-store";

export const userStore = createServerStore(null, async () => {
  const response = await fetch("https://api.example.com/user");
  return response.json();
});

Use it in any components:

// components/UserProfile.tsx
import { useServerStore } from "noob-store";
import { userStore } from "../stores/userServerStore";

function UserProfile() {
  const [user, refetch, status] = useServerStore(userStore);

  if (status.isLoading) return <div>Loading...</div>;
  if (status.isError) return <div>Error: {status.error.message}</div>;
  if (!user) return <div>No user data</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

Server Store with Selector

Create a server store with a selector:

// stores/postsStore.ts
import { createServerStore } from "noob-store";

export const postsStore = createServerStore(
  [],
  async () => {
    const response = await fetch("https://api.example.com/posts");
    return response.json();
  },
  (posts) => posts.filter(post => post.published) // Only select published posts
);

Use it in any components:

// components/PublishedPosts.tsx
import { useServerStore } from "noob-store";
import { postsStore } from "../stores/postsStore";

function PublishedPosts() {
  const [posts, refetch, status] = useServerStore(postsStore);
  
  if (status.isLoading) return <div>Loading...</div>;
  if (status.isError) return <div>Error: {status.error.message}</div>;
  
  return (
    <div>
      <h1>Published Posts</h1>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

API Reference

createStore<T>(initialState: T, getter?: (state: T) => any)

Creates a local state store.

useStore<T>(store: Store<T>): [T, (value: T | ((prevState: T) => T)) => void]

Hook to use a local store in a component. The setState function can accept either:

• A new state value
• A function that receives the previous state and returns a new state, similar to React's setState

createServerStore<T>(initialState: T, refetchFunction: () => Promise<T>, getter?: (state: T) => any)

Creates a server state store with fetching capabilities.

useServerStore<T>(serverStore: ServerStore<T>): [T, () => void, { isLoading: boolean, isError: boolean, error: Error | null }]

Hook to use a server store in a component. Returns:

• Selected state
• Refetch function
• Status object containing:
  • isLoading: boolean indicating if data is being fetched
  • isError: boolean indicating if an error occurred
  • error: Error object (if any)