import { createStore } from "minact";

export const { useSelector, useDispatch } = createStore(
  { count: 0 },
  (set, get) => ({
    increase: (amount) => set({ count: get().count + (amount || 1) }),
  })
);

const View = () => {
  const count = useSelector((state) => state.count);

  return <div>Count: {count}</div>;
};

const Controls = () => {
  const increase = useDispatch((reducers) => reducers.increase);

  return <button onClick={() => increase()}>Increase</button>;
};

createStore({ data: null }, (set, get) => ({
  update: async (url) => {
    const res = await fetch(url);
    const data = await res.json();
    set({ data });
  },
}));

const App = () => {
  const { count, user } = useSelector((state) => ({
    count: state.count,
    user: state.user,
  }));

  // or

  const [ count, user ] = useSelector((state) => [
    count: state.count,
    user: state.user,
  ]);

  // useDispatch also works

  const { increase, decrease } = useDispatch((reducers) => ({
    increase: reducers.increase,
    decrease: reducers.decrease,
  }));

  // or

  const [ increase, decrease ] = useDispatch((reducers) => [
    increase: reducers.increase,
    decrease: reducers.decrease,
  ]);
};

const store = createStore({ count: 0 }, (set, get) => ({
  increase: () => set({ count: get().count + 1 }),
}));

// Subscribe to store changes and log the state
const unsubscribe = store.subscribe(() => console.log(store.get()));

// Unsubscribe from changes
unsubscribe();