ilokesto

Common Patterns

Practical recipes for real-world usage.

Explore effective patterns for managing state with @ilokesto/store.

Module-scope Store

For shared global state, you can create a store at the module level and export it.

// store.ts
export const authStore = new Store({ user: null, isAuthenticated: false });

Action-like Wrappers

Instead of calling setState directly everywhere, wrap updates in semantic functions (actions).

export const login = (user: User) => {
  authStore.setState({ user, isAuthenticated: true });
};

export const logout = () => {
  authStore.setState({ user: null, isAuthenticated: false });
};

Read/Write Separation

You can export different parts of the store to control access.

// Only export the read-only view and actions
export const getAuthState = () => authStore.getState();
export const subscribeToAuth = (listener: () => void) =>
  authStore.subscribe(listener);

Reset Pattern

Easily reset the store to its initial state using getInitialState().

const resetStore = () => {
  store.setState(store.getInitialState());
};

Derived Values

Since Store only manages the raw atom, you can compute derived state on-demand.

const getFullName = () => {
  const { firstName, lastName } = userStore.getState();
  return `${firstName} ${lastName}`;
};

Splitting Stores

Don't feel forced to put everything in one giant store. Separate concerns into multiple stores.

const themeStore = new Store("light");
const userStore = new Store({ id: 1, name: "Alice" });

Testing Patterns

Testing store logic is straightforward because it has no framework dependencies.

test("increments count", () => {
  const store = new Store({ count: 0 });
  store.setState((prev) => ({ ...prev, count: prev.count + 1 }));
  expect(store.getState().count).toBe(1);
});

Anti-patterns

  • Deep mutation: Modifying state properties directly instead of returning new objects.
  • Sync loops: Subscribing to a store and calling setState on the same store within the listener.
  • Putting everything in one store: While a single atom is powerful, over-centralizing unrelated state can lead to unnecessary notifications for consumers.

On this page