How to dispatch an action to the redux-devtools store for importing a state from a component?

Question

I'm currently trying to implement a panel integrated in my angular application which will allow me to import whatever json state file exported from redux-devtools using the same import feature as redux-devtools.

My application is properly integrated with @ngrx/store-devtools.

I can't figure out how to retrieve the devtools store from my component to then dispatch the action IMPORT_STATE as i saw on redux-devtools code:

store.liftedStore.dispatch({type: 'IMPORT_STATE', ...nextLiftedState});

The goal is to manually trigger the import state feature from redux-devtools but within a component of my application directly.

Is it possible to do that? And how to inject this store in my component to then use it?

Thanks in advance,

EDIT:

Actually, what i am trying to achieve is to have a component in my application which allows me to import different state (as json file) that i would have previously recorded from the redux-devtools extension to reach any pages of my application. Thus, this component needs to access to the redux-devtools store and dispatch the action IMPORT_STATE. What i did for the moment seems to not trigger the reducer for IMPORT_STATE action of the redux-devtools store. I think i'm missing something to include the redux-devtools store from the angular application.

Do you have any idea of how to achieve that?

Thanks in advance,

Answer 1

To dispatch into the store from the dispatcher in the redux devtools you just enter in the action definition as json and then click dispatch.

for example:

{
type: 'IMPORT_STATE',
... whatever payload contents you need here ...
}

To open the dispatcher, click the little keyboard button in the middle at the bottom of the devtools.