ibitcy / react-stores-devtools-extension

React Stores Devtools Extension

Debug your react stores with chrome devtools extension.

• 🔍 Inspect stores current state
• 📜 Check store history step-by-step
• 🔬 Compare diff between states
• 📨 Dispatch state directly from devtools
• 🍔 Clickable stack trace for history and listeners
• 🚀 Use in production build
• 📦 Works with isolated stores
• 🎨 Familiar native chrome themes

How to install

• from Chrome Web Store;
• or build it with yarn && yarn run build and load the extension's folder ./extension;

Demo

See how the extension works on Online demo

Usage

You don't have to do anything if you use react-stores@5.* or higher. Stores attach to devtool by themselves.

Advices

• Use name in store options, otherwise you will see a hashes of the store in the devtool panel
• Use $actionName when you call setState to better explore store history

const commonStore = new Store(
  {
    test: "name",
  },
  {
    name: 'Common Store',
    // ...otherOptions
  }
);

commonStore.setState({
  test: "newName"
  $actionName: 'changeName'
});

For old versions

Note: Some functions may now work

Start follow you stores with function

const storeOptions = {
  persistence: true
};

const oldStore = new Store(
  {
    test: "name",
    dateField: Date.now()
  },
  storeOptions
);

window["__REACT_STORES_INSPECTOR__"].attachStore(
  oldStore,
  "Old Store",
  storeOptions
);

oldStore.setState({
  test: "newName"
});