#2: Store Devtools

Wouldn't it be nice to take a peek under the covers at your NgRx store to see what's going on?

The NgRx team made it easier for us to trace our code using a tool called NgRx Store DevTools. This tool allow you to see:

• a history of dispatched actions

• differences in state between actions

• action preview (together with raw version as well)

• state overview

Installation

You may need to install an extension application for your browser.

Using Chrome or Firefox, open your application in the browser and open developer tools in the browser. You should now see a tab named Redux next to tabs built in to your browser's developer tools, such as Elements, Console, or Network tabs.

If you haven't set up the store or made an error when defining it, you will see an error message that looks something like:

No store found. Make sure to follow the instructions.

Otherwise if you see something like the image below, you've set everything up correctly!

Dispatching actions

You haven't prepared any logic inside your app to actually dispatch any action. To see if your logic is working you may open dispatcher in devtools and dispatch any action you want.

To use the tool, define an object inside dispatcher input field and click the dispatch button 😊

The object structure looks like this:

{
    type: 'ACTION NAME STRING',
    props1: value1,
    props2: value2,
    ...
}

So in our case of dispatching the setNewItem action, you might define an object like this:

{
    type: '[Todo list] Set new todo list item',
    item: {
        _id: 'some-uuid',
        title: 'Add selectors',
        completed: false
    }
}

Do you see what props1 and props2 refer to?

Play a bit with those tools, test your actions and reducers. When you're ready move on to the next step.