Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/iDevRanjan/nexus-store/llms.txt

Use this file to discover all available pages before exploring further.

This guide walks you through building a fully working counter component from scratch using NexusStore. By the end you will have created a store, subscribed a component to it with a selector, and wired up increment and decrement buttons — all in under five minutes.
1
Copy the NexusStore source files into your project
2
NexusStore ships as source files rather than an npm package. Create a NexusStore/ folder inside your src/ directory and copy the three core files into it.
3
src/
  NexusStore/
    core.js
    useStore.js
    immer.js      ← optional, only needed for Immer integration
4
No npm install is required for the core library. If you plan to use the immer() wrapper, install Immer separately:
5
npm install immer
6
See the Installation guide for the full file contents and a recommended project structure.
7
Create a store outside the component
8
Import createStore from NexusStore/core and call it with your initial state object. The call must happen at module scope — outside any component function — so the store is created only once and persists for the lifetime of the application.
9
import { createStore } from "../NexusStore/core";

const countStore = createStore({
    count: 0,
});
10
createStore returns an object with four methods: getState, subscribe, setState, and setMultiple. You will use setState to update state and pass the store reference to useStore inside the component.
11
Always declare stores outside component functions. If createStore is called inside a component, React creates a brand-new store on every render, wiping out all existing state. Module scope is the right place — or a dedicated store.js file if the store is shared across multiple components.
12
Subscribe with useStore and a selector
13
Import useStore from NexusStore/useStore. Call it inside your component with two arguments: the store reference and a selector function that picks out the specific slice of state the component needs.
14
import { useStore } from "../NexusStore/useStore";
import { createStore } from "../NexusStore/core";

const countStore = createStore({
    count: 0,
});

export default function CountComponent() {
    const countValue = useStore(countStore, (state) => state.count);

    return <p>{countValue}</p>;
}
15
Because the selector returns only state.count, this component re-renders exclusively when count changes. Any other key added to countStore later will never trigger an unnecessary re-render here.
16
Update state with setState
17
Call setState directly on the store reference — no dispatch, no action creators. The method takes two arguments:
18
  • A key-selector function — receives the store’s top-level keys as an object and returns the key string you want to update: (keys) => keys.count.
  • A new value or updater function — either a direct value (10) or a function that receives the current value and returns the next one: (curr) => curr + 1.
    • 19
    // Increment
countStore.setState(
    (keys) => keys.count,
    (curr) => curr + 1,
);

// Decrement — floor at 0
countStore.setState(
    (keys) => keys.count,
    (curr) => Math.max(0, curr - 1),
);
    20
    NexusStore uses Object.is to compare the current and next values. If they are identical, no listeners are notified and no re-render is triggered.
    21
    Putting it all together
    22
    Here is the complete CountComponent.jsx taken directly from the NexusStore source:
    23
    import { useStore } from "../NexusStore/useStore";
import { createStore } from "../NexusStore/core";

const countStore = createStore({
    count: 0,
});

export default function CountComponent() {
    console.log("%c CountComponent Rendered", "color: green");
    const countValue = useStore(countStore, (state) => state.count);

    return (
        <fieldset>
            <legend>Count</legend>
            <p>{countValue}</p>
            <div
                style={{
                    display: "flex",
                    gap: "0.25rem",
                }}
            >
                <button
                    onClick={() =>
                        countStore.setState(
                            (keys) => keys.count,
                            (curr) => curr + 1,
                        )
                    }
                >
                    Increment
                </button>
                <button
                    onClick={() =>
                        countStore.setState(
                            (keys) => keys.count,
                            (curr) => Math.max(0, curr - 1),
                        )
                    }
                >
                    Decrement
                </button>
            </div>
        </fieldset>
    );
}
    24
    Drop <CountComponent /> anywhere in your app and it works immediately. The store is self-contained in the same file, which is fine for component-local state. For state shared across multiple components, move the createStore call to a dedicated store.js file and import the reference wherever it is needed.

    ​
    What’s next?

    Now that you have a working counter, explore the patterns that make NexusStore scale:
    • Multiple stores and custom hooks — Create separate stores for auth, theme, and cart, then wrap each in a custom hook (useAuthStore, useThemeStore) so components never import store references directly.
    • setMultiple for batch updates — Update several keys in one store atomically to avoid multiple re-renders.
    • Immer integration — Wrap a store with immer() to write clean, mutating draft functions for nested objects and arrays.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us