todos.tsx

import { useState } from "react";
import { useStore, useActions } from "./hooks"; // 👈

export default function Todos() {
  // 👇 pull out state from our store
  const items = useStore(state => state.todos.items);

  // 👇 pull out actions from our store
  const add = useActions(actions => actions.todos.add);

  const [newTodo, setNewTodo] = useState("");

  return (
    <div>
      <ul>
        {items.map((todo, idx) => 
           <li key={idx}>{todo}</li>
         )}
      </ul>
      <input 
        type="text"
        onChange={e => setNewTodo(e.target.value)}
        value={newTodo}
      />
      <button onClick={() => add(newTodo)}>Add</button>
    </div>
  );
}