0

I've been wondering about the import feature of the Redux Dev Tools. Correct my logic if it's faulty.

I'm working on a multi-step, form-heavy app UI, which serializes its state into Redux. It's inefficient to attempt to reproduce bugs by going through the app and filling/validating each field every time. I discovered the Redux Dev Tools (RDT) Export and Import features, and exported a state late into filling out and validating the form.

I relaunched the app fresh, navigated directly to the URL (it's in the dev environment, so no auth guards), and imported the state.json file.

Since the UI doesn't derive its state from Redux, but rather saves its state into Redux, the UI predictably, doesn't update when a state.json file is imported. This question is about responding to that singular, synchronous action of importing a state.json file.

I did some research, and found a package that RDT depends on called redux-devtools-instrument. It uses Redux internally, and has an action/reducer for IMPORT_STATE. Even when explicitly adding this package to my own dependencies, I'm not able to figure out how to subscribe to that event and rehydrate my UI. So, here are the two parts of my question:

  1. Is the import feature of the RDT meant to work the way in which I'm describing?

  2. How would you go about getting a "dumb" UI, which has no concept of Redux, or even state in general for that matter, to "listen" for that import state file action? I tried using RxJS, but didn't know what to subscribe to.

Kevin Suttle
  • 8,358
  • 3
  • 33
  • 37

1 Answers1

1

It sounds like the blocker here is that, as you said, "the UI doesn't derive its state from Redux, but rather saves its state into Redux". If that's the case, then importing an updated state into the Redux store is going to be pointless in terms of updating the UI.

In general, if you do your non-Redux-aware UI to respond to changes in the Redux store state or dispatched actions, you would need to use store.subscribe() or a Redux middleware to kick off changes to the rest of your UI after an action is dispatched.

markerikson
  • 63,178
  • 10
  • 141
  • 157