Currently there are no kea-specific devtools available. However the Redux devtools work really well.
With them you can:
- See all dispatched actions
- See the payload of each action
- See how the store's state looked like after each action
- See the diff the action made in the store's state
Any volunteers who want to work on fully-kea devtools? It would be nice to visually see how the logics interact with each other, see their state (including selectors) and to be able to call actions on them with the push of a button.
Here's a gist of a really raw devtool that just displays all the logics and their values in boxes.
If you explore your store's state in the devtools, you'll notice that every kea logic is
mounted under a path like
kea.inline.1 prior to Kea 2.4).
Something like this:
In order to help debugging, you may manually specify a
path for your logic.
If you use a
key in your logic, it'll be passed as the first argument to the
If you're using Babel to transpile your code, check out the babel kea plugin. It can generate a paths for you automatically.
First install the package:
Then add it to the list of plugins in
Logic paths are scoped from your app's root path. If you wish to skip a few parts of the path,
for example if your frontend lives under
frontend/src and you don't want every kea path to start
frontend.src, specify it in the config as follows:
After these changes, the inline paths from above will look like this:
- Read Advanced Topics to suck up even more knowledge!