The Unified `useJods` Hook

[clamstew]

The Unified useJods Hook

Simplifying Your Remix Integration

jods now offers a unified hook that combines data access and form handling in one elegant API.

// With useJods - one unified hook
const { data, actions } = useJods(todoStore, "addTodo");

return (
  <>
    <ul>
      {data.items.map(item => <li>{item.text}</li>)}
    </ul>
    
    <actions.addTodo.Form>
      <input name="text" />
      <button type="submit">Add</button>
    </actions.addTodo.Form>
  </>
);

Benefits Over Previous Approaches

The unified hook provides a cleaner mental model:

• data contains your reactive store state
• actions contains your form handlers and other actions
• loaderData gives you access to any additional data from your loader

Multi-Store Integration

Where useJods really shines is with multiple stores:

const { data, actions } = useJods([userStore, todoStore], {
  user: ["updateProfile"],
  todos: ["addTodo", "removeTodo"]
});

// Now you can access:
// - data.user.name
// - data.todos.items
// - actions.user.updateProfile.Form
// - actions.todos.addTodo.Form

This structured approach makes it much easier to organize complex UIs with multiple data sources and forms.

This is additional so you can still use the other things which is nice if you need a more Composable pattern