DEV Community

Deam
Deam

Posted on

Redux Devtools extension and Laco

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");

Since it is a string passed to the second argument of the set() method you can even provide more info if needed - it doesn't have to be a "name".

That's basically it! Below is a GIF showing the powers of Redux Devtools:

Laco with Redux Devtools

Check out the code sandbox to try it yourself. :)

Discussion (3)

Collapse
goutamsamal9 profile image
Goutam Samal

can i store data from api?

Collapse
goutamsamal9 profile image
Goutam Samal

I'm inserting the data by using laco but i don't understand how can i edit those data by using laco? can you please help me?

Collapse
goutamsamal9 profile image
Goutam Samal

i want to edit those data by using same add data dialog box!