diff --git a/packages/debug/src/redux-devtools.ts b/packages/debug/src/redux-devtools.ts index 693e587ae..8636df3b7 100644 --- a/packages/debug/src/redux-devtools.ts +++ b/packages/debug/src/redux-devtools.ts @@ -1,7 +1,7 @@ -import { Store } from '@reatom/core' +import { initAction, Store, Action } from '@reatom/core' // http://extension.remotedev.io/docs/API/Methods.html#connect -export function connectReduxDevtools(store: Store, config: object = {}) { +export function connectReduxDevtools(store: Store, config = {}) { const devTools = // @ts-ignore window.__REDUX_DEVTOOLS_EXTENSION__ && @@ -10,6 +10,35 @@ export function connectReduxDevtools(store: Store, config: object = {}) { if (!devTools) return - devTools.init(store.getState()) - return store.subscribe(action => devTools.send(action, store.getState())) + let state = store.getState() + + devTools.init(state) + + devTools.subscribe((action: any) => { + if (action.type === 'DISPATCH') { + // TODO: improve action types + // @ts-ignore + store.dispatch({ ...initAction, payload: JSON.parse(action.state) }) + } + }) + return store.subscribe((action, diff) => { + if (action.type === initAction.type) return + + const keys: (string | symbol)[] = Object.keys(diff) + keys.push(...Object.getOwnPropertySymbols(diff)) + + if (keys.length) { + state = { ...state } + keys.forEach(k => { + if ( + typeof k !== 'symbol' || + // combine + !k.toString().startsWith('Symbol({') + ) { + state[k.toString()] = diff[k as string] + } + }) + } + devTools.send(action, state) + }) }