Store

import { createStore } from 'finalstore';
 
type User = {
  name: string;
  age: number;
};
 
// Create store
const store = createStore({
  states: {
    count: 0,
    user: null
  } as {
    count: number;
    user: null | User;
  },
  actions: {
    increment: (state) => {
      state.count++;
    },
    setUser: (state, payload: User) => {
      state.user = payload;
    }
  },
  selectors: {
    userInfo: (state) => ({
      name: state.user?.name,
      count: state.count
    }),
    isAdult: (state, minAge: number = 18) =>
      state.user ? state.user.age >= minAge : false
  },
  config: {
    name: 'AppStore',
    devtools: true
  }
});
 
// Use in components
function Counter() {
  // Custom selector
  const count = store.use((state) => state.count);
 
  // Predefined selectors
  const info = store.useSelector.userInfo();
  const isAdult = store.useSelector.isAdult(21);
 
  return (
    <div>
      <button onClick={() => store.dispatch.increment()}>Count: {count}</button>
      {info.name && (
        <p>
          User: {info.name}
          {isAdult && ' (Adult)'}
        </p>
      )}
    </div>
  );
}
 
// Get values outside components
function logState() {
  // Custom selector
  const count = store.get((s) => s.count);
 
  // Predefined selectors
  const info = store.getSelector.userInfo();
  const isAdult = store.getSelector.isAdult();
 
  console.log(`Count: ${count}`);
  console.log(`User: ${info.name || 'None'}`);
  console.log(`Is Adult: ${isAdult}`);
}