re-reduced

import { defineContainer, useContainer, useSelect } from "@re-reduced/react";
const counter = defineContainer("counter", {
  state: { count: 0 },
  actions: (on) => ({
    increment: on((s) => ({ count: s.count + 1 })),
    add: on<number>((s, n) => ({ count: s.count + n })),
  }),
  derive: ($) => ({ isEven: () => $.count.value % 2 === 0 }),
});

// in a component — re-renders only when the slice it reads changes
function useCounter() {
  const store = useContainer(counter);
  const count = useSelect(store, (s) => s.count.value);
  const isEven = useSelect(store, (_s, d) => d.isEven.value);
  return { count, isEven, add: store.actions.add };
}

import { defineContainer, useContainer, useSelect } from "@re-reduced/react";
function Counter() {
  const store = useContainer(counter);
  const count = useSelect(store, (s) => s.count.value);
  const isEven = useSelect(store, (_s, d) => d.isEven.value);

  return (
    <div>
      <span>
        {count} {isEven ? "(even)" : "(odd)"}
      </span>
      <button type="button" onClick={() => store.actions.add(1)}>
        +1
      </button>
      <button type="button" onClick={store.actions.reset}>
        reset
      </button>
    </div>
  );
}

import { defineContainer, query } from "@re-reduced/core";
const users = defineContainer("users", {
  state: {
    items: [] as User[],
    status: "idle" as "idle" | "loading" | "ready",
  },
  actions: (on) => ({
    load: on((s) => ({ ...s, status: "loading" as const })),
    loaded: on<User[]>((s, items) => ({
      ...s,
      items,
      status: "ready" as const,
    })),
  }),
  // side-effects are declared as intents, interpreted by the adapter
  effects: (fx) => [
    fx.onAction("load", (_p, { actions }) =>
      query<User[]>({
        key: ["users"],
        run: () => api.list(),
        onData: (items) => actions.loaded(items),
      }),
    ),
  ],
});