use()

import { createCollection } from 'finalstore';
 
const users = createCollection({
  states: {
    name: '',
    age: 0,
    active: true
  },
  actions: {}, // Required, even if empty
  selectors: {
    userDetails: (state) => ({
      displayName: state.name,
      isActive: state.active
    })
  }
});

function UserProfile({ userId }: { userId: string }) {
  // Get entire item state
  const user = users.key(userId).use();
 
  // Get with custom selector (recommended)
  const name = users.key(userId).use((state) => state.name);
 
  return (
    <div>
      <p>Name: {name}</p>
      {user && <p>Age: {user.age}</p>}
    </div>
  );
}

function UserStatus({ userId }: { userId: string }) {
  const { name, active } = users.key(userId).use((state) => ({
    name: state.name,
    active: state.active
  }));
 
  return (
    <div>
      <p>
        {name} is {active ? 'active' : 'inactive'}
      </p>
    </div>
  );
}

function UserDetails({ userId }: { userId: string }) {
  const details = users.key(userId).useSelector.userDetails();
 
  return (
    <div>
      <p>{details.displayName}</p>
      <p>Status: {details.isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
}