Can I view/modify the Redux store using Chrome Dev Tools

javascript reactjs redux google-chrome-devtools react-redux
Andy Polhill picture Andy Polhill · Feb 20, 2017 · Viewed 25.5k times · Source

React Dev Tools is great for working with Redux, I can simply go in and modify props / state to see the affect on the relevant Container.

However if the required Container isn't mounted I need to directly modify the Redux store to make it appear. Is this possible with Chrome Dev Tools, I am able to find the Redux store, it is the top level <Provider /> component, I can even see the getState method, but is there anyway to modify the underlying state?

React dev tools Provider

Answer

Marek Dorda picture Marek Dorda · Feb 20, 2017

Yes, you can. There is a great Redux DevTools Extension for Chrome/Firefox/Electron which adds a new Redux tab to devtools:

enter image description here

You can import and export current store, go back in history, change whatever you want and much more.

Related questions

Why use Redux over Facebook Flux?

I've read this answer, reducing boilerplate, looked at few GitHub examples and even tried redux a little bit (todo apps). As I understand, official redux doc motivations provide pros comparing to traditional MVC architectures. BUT it doesn't provide an answer …

Read More
How do I access store state in React Redux?

I am just making a simple app to learn async with redux. I have gotten everything working, now I just want to display the actual state onto the web-page. Now, how do I actually access the store's state in the …

Read More
Understanding React-Redux and mapStateToProps()

I'm trying to understand the connect method of react-redux, and the functions it takes as parameters. In particular mapStateToProps(). The way I understand it, the return value of mapStateToProps will be an object derived from state (as it lives in …

Read More