Modify state in Redux DevTools Extension

Question

In my application state there are values set as initialState.

With the React Developer Tools it's very easy to directly modify some state value.

Is anything similar possible in Redux DevTools Extension, i.e. click and insert a new value for a specific property?

In this SO anwer it's stated that it's possible to "change whatever you want", but I cannot find how.

In the State -> Raw pane (see pic below) one can overwrite values but it doesn't seem to be applied.

Erythrite

This is not entirely what you want, but you can export state, change it and then import again. (but importing will not update state out of the box, as described here github.com/zalmoxisus/redux-devtools-extension/issues/284) – Aleta

A similar hack to the export / import. I use localstorage to persists state when a user closes the browser tab. So I can go to the Application tab of devtools, and edit directly in the localstorage, then close and open the tab and my app hydrates itself from teh localstorage and the state is updated. – Williawilliam

Answer 1

You can cause an action to dispatch that updates your object (or you can type it by hand, whichever is easier for you) and then you can cause a new dispatch straight from the tool with the following button

for example, if you wish to simulate the server returned an object in a different state, just dispatch the action that updated the object again with the modified fields.

Bareback

Answer 2

One of the main principles of the Redux store is, that it can only be changed by reducer functions, whenever an action is dispatched.

Therefore I don't think, it is possible to change the store state in the Redux DevTools, but at least you can time travel or directly supress selected actions (which I often do to simulate, that an AJAX request is still pending).

If you really want to change the state of your store, you could assign the store (when it is created via createStore) to window._store and then call window._store.dispatch({type: "...", ...}); directly from the Console.

Freedwoman

Answer 3

No – it is not currently possible to manually modify the state.

See this issue in the Redux DevTools repository; the maintainer does intend to implement the feature eventually:

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.

Vessel

It's not currently possible to manually modify the state without a reducer. You can still manually dispatch an action from the extension. – Cannonry

Answer 4

If states are persisted then you can edit the local storage (persist:root) and refresh the page.

Hamrick

This actually works for me! Straight forward way to delete the state when using local storage. +1 – Tolley

Answer 5

You can now use import and export buttons which will save your state in json format.

You can then modify your state (as long as its valid) in the json file and import it back in. The powerful thing here is you can have various states in files and quickly load them in to see your application update.

Pasquinade

Answer 6

Yes, it is possible.

Step 1. Click Dispatcher.

Step 2: Now provide which 'action type' you want to modify.

Step 3: Create a payload object & modify the state which you want to modify.

Step 4: Finally click 'Dispatch'.

This dispatches the action with modified state.

Rexanna

Answer 7

I agree with everyone's response And am glad to hear this capacity is planned for this wonderful dev-tool.

During the design of the app, it will be nice to quickly add in a state fragment to get the app to compile... moving things along. Here is the hack I use to update a reducer. The approach does not require that the app compile as long as the store is up-and-running... and thus one of the motivations anyway.

// quick what to add the `selected` feature to my store; 
// the state store will update once I dispatch { type: 'HACK' }

export default createReducer(initialState, {
  HACK: state => ({
    ...state,
    selected: []
  }),
...
}

Complaisance

Answer 8

The great thing about Redux Devtools is it adheres well to Redux's principles. The only way you should be changing the state is by dispatching an action with whatever custom parameters you want and then let the reducer handle the state change logic. This is preferred so it adheres to the second principle (state is read-only) and the third principle of Redux which states:

Changes are made with pure functions

To specify how the state tree is transformed by actions, you write pure reducers.

So the way you would make a state change is to define a specific action that changes the piece of state you want through the reducer.

There is a very important reason for this -- this way you can verify whatever state you are trying to test is actually a possible state that your application can end up in. If you mutated bits and pieces of the state directly, it's possible your application might never reach that state.

It might seem tedious but this means that if you wanted to try and test a complex state your application could hit, you'd have to dispatch all the correct actions in order to get to that state but at least you know that is a possible state your application will run into and how your users can hit that state.

Woodrow

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. – Limon