@forgeframework/react-state

Lightweight, type-safe state management for Forge Framework web applications.

Part of the Forge Framework — a TypeScript framework for backend microservices and web applications.

Installation

npm install @forgeframework/react-state

Usage

import { createStore, useStore, useSelector, useActions } from '@forgeframework/react-state';

interface TodoState {
  todos: Todo[];
  filter: 'all' | 'active' | 'completed';
}

const todoStore = createStore<TodoState, TodoActions>({
  name: 'todos',
  initialState: { todos: [], filter: 'all' },
  actions: (set, get) => ({
    addTodo: (text: string) =>
      set({ todos: [...get().todos, { id: Date.now(), text, done: false }] }),
    toggleTodo: (id: number) =>
      set({
        todos: get().todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
      }),
    setFilter: (filter: 'all' | 'active' | 'completed') => set({ filter }),
  }),
  selectors: (state) => ({
    filteredTodos: state.todos.filter((t) =>
      state.filter === 'all' ? true : state.filter === 'active' ? !t.done : t.done,
    ),
    remaining: state.todos.filter((t) => !t.done).length,
  }),
  persist: { key: 'todos', storage: 'localStorage' },
  devtools: true,
});

function TodoList() {
  const { filteredTodos } = useSelector(todoStore, (s) => s.selectors);
  const { addTodo, toggleTodo } = useActions(todoStore);

  return filteredTodos.map((todo) => (
    <div key={todo.id} onClick={() => toggleTodo(todo.id)}>
      {todo.text}
    </div>
  ));
}

Documentation

Full API reference and guides: https://carbonforge.io/framework/docs/web/react-state

(Documentation site launching soon.)

License

MIT © Carbon Forge