devtools

The devtools middleware is automatically disabled in a NODE_ENV=production environment, preventing unnecessary code from being included in the production build or impacting performance.

The devtools middleware in Caro-Kann makes state management more intuitive and efficient. This middleware enables real-time tracking of state changes through the Redux DevTools extension. Developers gain clear visibility into how the state evolves, making debugging and optimization easier.

const useStore = create(
  devtools(initialState, storeName)
)
 

For example, managing a count state with the devtools middleware allows real-time observation of state changes. Each button click, whether incrementing or decrementing the state, is recorded in Redux DevTools. This simplifies complex state management and debugging, significantly enhancing developer productivity.

const useStore = create(
  devtools({ count: 0 }, "devtoolsTestStore")
);
 
export default function Page() {
  const [count, setCount] = useStore(store => store.count)
 
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count => count + 1)}>Increment</button>
      <button onClick={() => setCount(count => count - 1)}>Decrement</button>
    </div>
  )
}