Can I modify/edit a value manually in redux-devtools without using a reducer?

[aguynamedben]

It seems like I might be missing something very simple, but I couldn't figure this out.

I'm building an Electron app, and after the app launches, in order to debug some business logic, I want to modify a single value in a single piece of my state (account -> access_token). I want to replace an OAuth access token with a known stale access token so that I can test that the refresh_token is used correctly.

Is there a way to modify state manually with redux devtools? I've learned that I can use Chrome Devtools (Application Tab) to modify localStorage directly (I'm using redux-persist), but that is painful.

It seems everybody says "use reducers to modify state", which makes sense from an architecture standpoint, but it seems like the whole point of a redux devtools is to allow me to tinker and inspect (similar to how you can edit HTML/CSS from Chrome Devtools).

What I tried

1. Open redux-devtools
2. In the Inspector view, switch to the State tab to see entire state
3. Within that, click the Raw tab. That brings up a text editor for the state.
4. Manually modify the state.
5. I don't see how to save the state? The Persist button below doesn't save it. Anywhere I click from here seems to not save the state and instead resets it to its previous value.

Thanks for the time you spend working on this tool. It's extremely value to my team. Sorry if PEBKAC.

[glompix]

Same. It would be a powerful feature. You can dispatch actions to mutate state, but not edit raw state in the store. There would be some implications with time travel but honestly idgaf if it acts a little funny 👯

[TomGroombridge]

Agreed it would be a great feature if you could manipulate the state directly.

[augbog]

I know this hasn't gotten a lot of feedback but personally I don't think this is a good idea? I believe redux devtools does the right thing and requires you to dispatch actions and then rely on your reducer to edit the state which is what the core principles of Redux want you to enforce. Manipulating the state directly has very weird implications and you may be testing application states that your application can never hit.

In the case from the original OP,

I want to modify a single value in a single piece of my state (account -> access_token).

How does that access_token get set in the first place? I imagine some dispatch action needs to take place. In that case, dispatch that same action and let your reducer handle it for you with the special case you've defined to change only that piece of state.

EDIT: I've changed my opinion after reading the reply but at this point I'm collecting thumbs down so keep em coming. I'm glad this issue is moving forward though!

EDIT 2: No seriously don't stop -- the more thumbs down the more it'll show how many people believe this feature is necessary (which I agree would be tremendously be helpful). I hope people will consider my suggestion as a workaround/alternative though.

[aguynamedben]

@augbog I agree it's "not the right way to do it" for production, but redux-devtools-extension is a devtool. The purpose of a devtool is to speed up the development process by allowing engineers with context of the app to get under the hood and quickly inspect or modify things. I compare it to the features of Chrome Devtools that let you "Edit as HTML" a DOM node or modify a CSS parameter. Or the features of Redux Devtools that lets you alter a boolean value in state by checking on/off a checkbox.

The "let me quickly change an access token" example I gave is extremely relevant if you've ever dealt with OAuth. Sometimes you just want to paste an value without having to write the code in Console necessary to fire a full Redux action.

To me this feature request is exactly what the role of a devtool is.

[philihp]

This would be very powerful.

Consider that you're an engineer working on a presentational component that could receive a certain state, while in parallel another engineer is working on the action/reducer that produces that state. Being able to mock that state would unblock you from waiting for the action/reducer be complete.

[ChristianDavis]

I've started writing this feature for ourselves a couple times, just haven't finished adding it to the UI. But we've got it in the code and useable, simple to add. Drop this case statement in the root reducer:

  return (state, action = {}) => {
    switch (action.type) {
      /* develblock:start */
      case 'HACK_STATE': {
        const mergeValue = action.state || action.value;
        const mergeHack = action.path ? _.set({}, action.path, mergeValue) : mergeValue;
        return state.mergeDeep(fromJS(mergeHack));
      }   
     /* develblock:end */

the comment blocks are a webpack loader to make sure that code is stripped from prod (https://github.com/jballant/webpack-strip-block). An action is dispatched, with a value (or an object) and an optional path, then it's merged in

opening the little action dispatcher isn't as easy as just editing and then "saving" the edits, but it performs the same function

It's a very useful tool to have, I'd love to have better tooling around it

[tmaiaroto]

Uh, that is pretty cool. Does create react app load that plugin I wonder??

[mlg87]

@tmaiaroto add it to chrome and it will detect stores

[alekline]

This is great, thank you so much!

Please note that in my app, the case code is as follows:

import { fromJS, mergeDeep, set } from 'immutable';
    ....
/* develblock:start */
case 'HACK_STATE': {
  console.log('Testing hack_state')
  const mergeValue = (action as any).state || (action as any).value;
  const mergeHack = (action as any).path ? set({}, (action as any).path, mergeValue) : mergeValue;
  return mergeDeep(state, fromJS(mergeHack));
}
/* develblock:end */

And then, use this in the Action Dispatcher of NgRx Store DevToos

{
  type: 'HACK_STATE',
  path: 'hcgov.applicationId',
  value: 1234
}

[meymeynard]

any update on this feature?

[zalmoxisus]

I'll implement it after 3.0, when will finish extension's rewriting and new UI. Additionally to states, the plan is also to edit dispatched actions, changing the payloads. And, if there's interest, duplicating actions; so after editing would be 2 options to overwrite the current one (and recompute states) or dispatch as a new action.

[danielo515]

That sounds very cool @zalmoxisus, do you know when it is going to be released?

[dfhincapiem]

Great to hear news from this new amazing feature!!!!

[cjz9032]

Great to hear news from this new amazing feature!!!!

[danielo515]

Oh, yea yes, it is Great to hear news from this new amazing feature!!!!, but without knowing when it is going to be released or if it is released already it is useless.

[Chris-Kim]

Great to hear news from this new amazing feature!!!!

[gnalvesteffer]

Great to hear news from this new amazing feature!!!!

[dakipro]

Hello, any update on this feature? It would help quite a lot when developing, especially handling edge "hypothetical" cases

[aliankarali]

Please give this issue the attention it deserves, even before these UI updates or whatnot.

[lklepner]

@zalmoxisus Can you share any updates on the timing of this feature?

[kamok]

Coming from Vuex Dev Tools, this feature would be a massive quality of life improvement for Redux developers. I will try to respond to the arguments that Redux Dev Tools enforces "proper" developer practice by forcing you to dispatch actions.

Some apps that I work with directly feeds API responses into Redux to keep it as a single source of truth. (eventhough the app does NOT directly manipulate some values, eg readonly data). When this happens, it's very troublesome to have to manipulate the backend development data. Or worse, if you do not have access to it.

In tests you can throw some mock data into the store and run them. But you will not be able to get screenshots and actual visual confirmation (so I can put them into my PR for acceptance).

Additionally the downside of not being able to manipulate the State directly is you have to travel down a component tree to get to the component you want. This may mean a tedious login process with a few button clicks. With Vuex Dev Tools, you can simply flip some state data dynamically without forcing you to recompile. Much more productive and happier devs.

[Tzinov15]

Any updates on a release date for this?

[ropinheiro]

I was just trying to edit state in Redux Dev Tools, then though that it shouldn't be possible at all, because of the "only through reducers" rule, then I thought "hey, but it's Dev Tools, to help devs debug and test faster, not to be production", then I found this page and noticed that I'm not alone on those thoughts... for more than 2 years (late... but not least :P) Soooo, when will this very useful feature be available? :)

[lance-cfa]

It's been over 2 years since this update was suggested. Amazing to see how quickly the 3 participants in vue-devtools got this done (hint - 4 days).

https://github.com/vuejs/vue-devtools/issues/699 ShaneHudson commented on Jun 28, 2018 (proposed feature) @Akryum Akryum added feature request priority: medium accepted proposition labels on Jul 25, 2018 @Akryum Akryum added this to TODO in v4.x on Jul 30, 2018 @Akryum Akryum moved this from TODO to In Progress in v4.x on Aug 1, 2018 @hootlex hootlex mentioned this issue on Aug 1, 2018 (merged) @Akryum Akryum closed this in #724 on Aug 1, 2018

@Akryum - have any time to implement this for Redux dev tools?

[aguynamedben]

Hey @lance-cfa from Chick-fil-A I'm sure they'd accept a pull request if you sent one

[matheuslino]

@zalmoxisus, any update on this feature? It's been almost 3 years since the first comment =/

[PremRanjanDev]

Editing of redux state would be a great feature. For example, right now I am getting some expression from API call which has to be evaluated at the client-side. I need to check my evaluation logic works for different expressions. Simply I cannot edit the state (API response value) in redux dev-tool and see the effect on UI. And yes, my project does not have the implementation of mock data, mostly it relies on dev-server API calls.

[sandersiim]

Have to agree with all the previous comments, for some reason I assumed editing state directly is possible in Redux DevTools, and then I found this thread for my disappointment... This would be an invaluable tool for debugging and development!

[SeanDez]

This is an essential feature, please add it :)

[AlbinCederblad]

Any updates on this?

[robmarshall]

This would be super helpful.

[mmulhearn]

I hope this is still planned; it would be great for dev

[heyaswinp]

I think that allowing the user complete access to modify the Redux store will be a security. So, that in a production environment Redux Devtools should not be allowed.

[rufat]

Still waiting. It would be great for debugging.

[GNXClone]

+1 Coming from VueJS and Vue Devtools, where the ability to modify state values directly was extremely useful during development and debugging.

[yougotashovel]

+1 this would be a great "dev" tool addition. There are many times when i just want to change a piece of state for testing/iteration purposes but don't want to write all the additional scaffolding that goes along with it.

[jbl31]

Maybe the owner is dead, i mean for real, because no commits for more than 1 years, same for his twitter.. :(

Anyone can fork the project and update it?

[wrslatz]

Has this not been moved to https://github.com/reduxjs/redux-devtools?

[djwashburn]

seriously? the dev tools don't allow editing the state live? what's the point then?

[danielo515]

seriously? the dev tools don't allow editing the state live? what's the point then?

all the other features they offer

[AndyOooh]

Was this ever implemented?

[Trollyal]

Was this ever implemented?

Does not look like. As a workaround, you can export the state, modify the json outside and reimport it back. Tedious, but works.

[RyanPWalker]

.