Redux Dev Tools + Tips, Redux Series III

Posted on |

Introduction

You want to use dev tool because it’s great for debugging. It will track your state and action at all times. First, you want to install Chrome Redux Dev tool. Chrome Link

Setup

Then you want to setup your dev tool in your app. So we can view it only in develop mode not in production.

Here’s my setup for redux dev tool. Since I have middleware, I have to set it up a little differently. For different setup you can view it here. Link

1
2
3
4
5
//index.js
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, /* preloadedState, */ composeEnhancers(
    applyMiddleware(promise)
));

How to use it.

When you dispatch an action, you can check out the process in the dev tool. You can track action and state. With this tool you can properly see if the state has changed.

Dev Tool-Action Dev Tool-Diff Dev Tool-State Dev Tool-Test

Tip # 1 How to use local storage with Redux Store.

Here’s another tip, I want to share. Here’s how to setup localstorage with redux.

1
2
3
4
5
6
7
//index.js
const persistedState = localStorage.getItem(' _username_recipes') ? JSON.parse(localStorage.getItem(' _username_recipes')) : {}
const store = createStore(reducer, persistedState);
store.subscribe(()=>{
  localStorage.setItem(' _username_recipes', JSON.stringify(store.getState()))
})