DevTools

Redux DevTools integration provides powerful debugging capabilities. With DevTools enabled, you can inspect state changes, time-travel through actions, and debug your application's state management in real-time.

Store Configuration

import { createStore } from 'finalstore';
 
const store = createStore({
  states: {
    count: 0,
    user: null as { name: string } | null
  },
  actions: {
    increment: (state) => {
      state.count++;
    },
    setUser: (state, user: { name: string }) => {
      state.user = user;
    }
  },
  selectors: {
    userInfo: (state) => ({
      name: state.user?.name,
      count: state.count
    })
  },
  config: {
    name: 'AppStore', // Name in DevTools
    devtools: true // Enable DevTools
  }
});

Collection Configuration

import { createCollection } from 'finalstore';
 
const users = createCollection({
  states: {
    name: '',
    age: 0,
    active: true
  },
  actions: {
    updateName: (state, name: string) => {
      state.name = name;
    },
    toggleActive: (state) => {
      state.active = !state.active;
    }
  },
  selectors: {
    userInfo: (state) => ({
      name: state.name,
      status: state.active ? 'Active' : 'Inactive'
    })
  },
  config: {
    name: 'Users', // Name in DevTools
    devtools: true // Enable DevTools
  }
});
 
// Actions will be tracked in Redux DevTools
users.key('user-1').set({ name: 'John', age: 25, active: true });
users.key('user-1').dispatch.updateName('John Doe');
users.key('user-1').dispatch.toggleActive();
users.key('user-1').remove();

Features available in DevTools:

  • Time-travel debugging
  • Action history with payloads
  • State inspection
  • Import/Export state
  • Action replay

On this page