Collection

import { createCollection } from 'finalstore';
 
type User = {
  name: string;
  age: number;
  active: boolean;
};
 
// Create collection
const users = createCollection({
  states: {
    name: '',
    age: 0,
    active: true
  } as User,
  actions: {
    updateName: (state, name: string) => {
      state.name = name;
    },
    toggleActive: (state) => {
      state.active = !state.active;
    }
  },
  selectors: {
    displayName: (state) => `${state.name} (${state.age})`,
    isAdult: (state) => state.age >= 18
  },
  config: {
    name: 'Users',
    devtools: true
  }
});
 
// Use in components
function UserList() {
  const userIds = users.useKeys(); // Get all user IDs
  const totalUsers = users.useSize(); // Get collection size
 
  return (
    <div>
      <h2>Users ({totalUsers})</h2>
      <button
        onClick={() => {
          users.key(`user-${totalUsers + 1}`).set({
            name: 'New User',
            age: 0,
            active: true
          });
        }}
      >
        Add User
      </button>
      <ul>
        {userIds.map((id) => (
          <UserItem key={id} id={id} />
        ))}
      </ul>
    </div>
  );
}
 
function UserItem({ id }: { id: string }) {
  const name = users.key(id).useSelector.displayName(); // Predefined selector
  const isActive = users.key(id).use((s) => s.active); // Custom selector
 
  return (
    <li>
      <input
        type="checkbox"
        checked={isActive}
        onChange={() => users.key(id).dispatch.toggleActive()}
      />
      <span>{name}</span>
      <button onClick={() => users.key(id).remove()}>Delete</button>
    </li>
  );
}