Redux Devtools extension and Laco

#react #javascript #state #redux

For a short introduction to Laco please check out my previous post.

Getting an overview of actions, when they are fired and what happens to the global state object can really help debug a complex and big project.

Redux Devtools is an extension that provides an user interface where you can get an overview of actions. You can even skip and jump to actions which is usually called "time travelling". You can also see the global state of the whole app and look into each store. The global state even changes when you jump between actions.

Redux Devtools works out of the box with Laco in development mode. There are just some features missing that you normally would have when using Redux. Although Laco works with the most important features such as time travel and being able to look into the global state object.

Laco is similar to Redux and operates on a global state behind the scenes. Each store has been given a unique id to the global state object which you can check out in Redux Devtools. You can also get the global state by doing:

import { Store, getGlobalState } from 'laco'

const CounterStore = new Store({ count: 0 })
const ToggleStore= new Store({ toggle: false })

getGlobalState()
// Outputs an object:
// {
//   "0": { count: 0 },
//   "1": { toggle: false },
// }

To see which actions belong to what stores we need to initialize a store with a given name like so:

import { Store } from 'laco'

const CounterStore = new Store({ count: 0 }, "CounterStore")

Otherwise you would only see the action name in the Devtools but not which stores the action changed.

To actually make a given action show up in the Devtools you also need to give it a name when calling set() on a store:

import { Store } from 'laco'

const CounterStore = new Store({ count: 0 }, "CounterStore")

// Implementing some actions to update the store
const increment = () => CounterStore.set(state => ({ count: state.count + 1 }), "Increment");
const decrement = () => CounterStore.set(state => ({ count: state.count - 1 }), "Decrement");