Skip to main content

Getting Started

Step 1: Install​

npm install @sinuxjs/core @sinuxjs/react

Step 2: Create a store​

import { createStore } from '@sinuxjs/core';

const todoStore = createStore(
  { todos: [], filter: 'all' },
  {
    addTodo: (state, text: string) => ({
      todos: [...state.todos, { id: Date.now(), text, done: false }]
    }),
    toggleTodo: (state, id: number) => ({
      todos: state.todos.map(t => t.id === id ? { ...t, done: !t.done } : t)
    }),
    setFilter: (state, filter: string) => ({ filter }),
  }
);

Step 3: Use in React​

import { useStore } from '@sinuxjs/react';

function TodoList() {
  const { todos } = useStore(todoStore, s => ({ todos: s.todos }));
  return (
    <ul>
      {todos.map(t => (
        <li key={t.id} onClick={() => todoStore.toggleTodo(t.id)}>
          {t.done ? '\u2713' : '\u25CB'} {t.text}
        </li>
      ))}
    </ul>
  );
}

That's it. Learn more about Stores and Signals.