Redux-devtools-extension: Saving serialized state?

[wmertens]

I'm playing with the idea of saving state and using that to create screenshots of the app in phantomcss.

That way you could make tests of your app by setting up the correct state, saving it and automatically creating screenshots, which then get diffed when your app changes.

To be able to do that, it would be great if the devtools allowed storing the state in a file (and possibly even restoring it from the file). If this functionality is already there, apologies, I missed it.

[zalmoxisus]

I plan to add the ability to import/export the state history from the monitor, but I guess you want to do it programmatically not by clicking a button. So, should we add some functions like window.devToolsExtension.import / window.devToolsExtension.import?

[wmertens]

With a button is fine actually, since you need to prepare the state and then save it in the appropriate location.Loading the state would probably be with the initialstate argument of createstore…

[weslleyaraujo]

importing/exporting state would be an amazing feature, let me know if I can help with anything on that 👍

[zalmoxisus]

It's implemented in https://github.com/gaearon/redux-devtools-log-monitor/pull/46 and will come to the extension with the ability to use files when we have it merged.

[zalmoxisus]

Implemented in v1.1.0

Didn't use the PR above as we want it directly in the extension regardless of which monitor we use.

Sorry for taking it so long. I was focused first to make the extension stable then to add new features.

[weslleyaraujo]

awesome!

[markerikson]

Looks like the "Export" button is actually exporting the lifted store state, rather than the "current app state". Is there any easy way to have it export just the app state itself (which appears to be something like computedStates[index].state ?

[zalmoxisus]

@markerikson, yes, we export the lifted state in order to be able to import it back, and get not only the current state, but everything your see in the monitor. So, it's easy to share this file with other members of your team.

What you want to do is easy to achieve from inside your application like:

window.open('data:text/json;charset=utf-8,' + store.getState());

Or you can postprocess the data from that file like your said and convert the data, for example, into CSV.

[markerikson]

In my case, I was looking to grab the current state for use as static test data. Wound up just copying and pasting the relevant object, aided by some folding in my editor. Thanks for the tools, and the reply.

[zalmoxisus]

@markerikson, there will be a solution for that directly in the monitor, I'm working on it. You can open an issue if you want to keep track of the implementation.

[sarink]

Is there any way to perform this import programmatically? I'm trying to create an "offline-mode" for local development. Assume I've got the exported state.json file somewhere in my repo where it can be required? Or set to a window variable?

[zalmoxisus]

@sarink, yes, you can do store.liftedStore.dispatch({ type: 'IMPORT_STATE', nextLiftedState: nextLiftedState }) right from your app. nextLiftedState is the history object you want to import. See redux-devtools-instrument for more details.

A even handier solution would be to use it with remotedev-server and redux-remotedev. So, you have all the histories stored automatically and can list them in the extension:

After you start remotedev-server, click Remote DevTools button and then Settings and specify there your host and port:

It's not documented yet as we'll get it better in 3.0.

[sarink]

@zalmoxisus Works perfect, thanks!

[qymspace]

@markerikson came across this issue while facing the same problem. Found that you can get the whole current app state by clicking on the raw section of the sate. See photo for reference

[kamranayub]

@zalmoxisus I know this issue is old but still relevant, I was just searching for a way to programmatically export the state from dev tools (to allow our team to send us debug info, not all of them are engineers). Is there an easy way from application code to "invoke" the Download/Export function and/or get whatever that JSON object is that is saved to compose with other debug info to dump?

e.g. "Send bug report" button that combines some system info with the Redux devtools state JSON so we can import it locally to replay user's actions.

[markerikson]

@kamranayub : I don't think there's a programmatic way to do that through the DevTools. However, there's a bunch of existing Redux addons that are intended to help collect Redux actions and state in a production environment. See some of the libraries listed in the DevTools#Logging section of my Redux addons catalog. I've also got some articles/talks on the topic listed in the Redux Techniques#Debugging section of my links list.

[kamranayub]

@markerikson this is great, thanks, redux-state-history looks exactly like what I'm looking for helping do time travel in production/development programmatically!

I thought I got a little close with the following code but couldn't find the right action or whether these liftedStore actions actually get handled by the monitor code in the devtools:

store.liftedStore.dispatch({ type: "EXPORT_STATE" });
store.liftedStore.dispatch({ type: "devtools/EXPORT" });
store.liftedStore.dispatch({ type: "devtools/UPDATE_STATE", action: { type: "devtools/EXPORT" }});