36

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

Alex Pashkin
  • 301
  • 4
  • 15
Andy Polhill
  • 6,858
  • 2
  • 24
  • 20
  • This video explains how to connect redux devtool to basic react redux app - https://youtu.be/TSOVLXQPWgA – Prem Nov 18 '17 at 06:04
  • I don't have enough reputation to comment under the accepted post but it's currently redirecting to a porn site. This is the correct link: https://github.com/zalmoxisus/redux-devtools-extension – Evgeny Urubkov Aug 21 '21 at 19:20

1 Answers1

40

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.

Steve
  • 213,761
  • 22
  • 232
  • 286
Marek Dorda
  • 1,255
  • 17
  • 19
  • 3
    Awesome thanks, I've switched from redux-devtools, and also realised that one doesn't simply 'modify props' in redux as it shouldn't be mutated. The ability to dispatch actions into the store is great though. – Andy Polhill Feb 21 '17 at 11:32
  • 4
    Note that currently you can't actually edit the state by hand – you have to go through a reducer. The maintainer intends to implement this in version 3 of the Redux DevTools: https://github.com/zalmoxisus/redux-devtools-extension/issues/502 – ash Aug 29 '19 at 13:56
  • 2
    Ability to edit state by hand still does not exist, years after originally being requested – Anomaly Jan 13 '22 at 16:41