Debugging TanStack Store with DevTools

Outline steps and code for integrating TanStack Store with developer tools for debugging, including monitoring state changes and action dispatches.

import { createStore } from 'tanstack-store-react';

Import the createStore function from the TanStack Store library for React.

const store = createStore({
  name: 'MyStore',
  initialState: { counter: 0 },
  devtools: true
});

Initialize your store with an initial state. The 'devtools: true' option enables the integration with Redux DevTools for debugging.

store.subscribe((state) => {
  console.log('State changes:', state);
});

Subscribe to state changes to log them, useful for debugging state updates.

store.dispatch({
  type: 'increment',
  reducer: (state) => {
    state.counter += 1;
  }
});

Example of dispatching an action to increment the counter. Actions are logged and monitored through dev tools.