fix(extension): fix state persisting (#843)

extension/src/app/middlewares/api.ts

@@ -3,6 +3,8 @@ import {
   UPDATE_STATE,
   REMOVE_INSTANCE,
   LIFTED_ACTION,
+  TOGGLE_PERSIST,
+  SET_PERSIST,
 } from '@redux-devtools/app/lib/constants/actionTypes';
 import { nonReduxDispatch } from '@redux-devtools/app/lib/utils/monitorActions';
 import syncOptions, {
@@ -18,8 +20,9 @@ import {
   CustomAction,
   DispatchAction as AppDispatchAction,
   LibConfig,
+  SetPersistAction,
 } from '@redux-devtools/app/lib/actions';
-import { Action, Dispatch } from 'redux';
+import { Action, Dispatch, MiddlewareAPI } from 'redux';
 import {
   ContentScriptToBackgroundMessage,
   SplitMessage,
@@ -35,6 +38,7 @@ import {
   LiftedActionAction,
 } from '../stores/backgroundStore';
 import { Position } from '../api/openWindow';
+import { BackgroundState } from '../reducers/background';
 
 interface TabMessageBase {
   readonly type: string;
@@ -183,8 +187,13 @@ export type TabMessage =
 export type PanelMessage<S, A extends Action<unknown>> =
   | NAAction
   | ErrorMessage
-  | UpdateStateAction<S, A>;
-export type MonitorMessage = NAAction | ErrorMessage | EmptyUpdateStateAction;
+  | UpdateStateAction<S, A>
+  | SetPersistAction;
+export type MonitorMessage =
+  | NAAction
+  | ErrorMessage
+  | EmptyUpdateStateAction
+  | SetPersistAction;
 
 type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & {
   postMessage: (message: TabMessage) => void;
@@ -224,7 +233,8 @@ const getId = (sender: chrome.runtime.MessageSender, name?: string) =>
 type MonitorAction<S, A extends Action<unknown>> =
   | NAAction
   | ErrorMessage
-  | UpdateStateAction<S, A>;
+  | UpdateStateAction<S, A>
+  | SetPersistAction;
 
 function toMonitors<S, A extends Action<unknown>>(
   action: MonitorAction<S, A>,
@@ -233,7 +243,9 @@ function toMonitors<S, A extends Action<unknown>>(
 ) {
   Object.keys(connections.monitor).forEach((id) => {
     connections.monitor[id].postMessage(
-      verbose || action.type === 'ERROR' ? action : { type: UPDATE_STATE }
+      verbose || action.type === 'ERROR' || action.type === SET_PERSIST
+        ? action
+        : { type: UPDATE_STATE }
     );
   });
   Object.keys(connections.panel).forEach((id) => {
@@ -582,9 +594,18 @@ declare global {
 
 window.syncOptions = syncOptions(toAllTabs); // Expose to the options page
 
-export default function api() {
+export default function api(
+  store: MiddlewareAPI<Dispatch<BackgroundAction>, BackgroundState>
+) {
   return (next: Dispatch<BackgroundAction>) => (action: BackgroundAction) => {
     if (action.type === LIFTED_ACTION) toContentScript(action);
+    else if (action.type === TOGGLE_PERSIST) {
+      togglePersist();
+      toMonitors({
+        type: SET_PERSIST,
+        payload: !store.getState().instances.persisted,
+      });
+    }
     return next(action);
   };
 }

extension/src/app/middlewares/panelSync.ts

@@ -2,6 +2,7 @@ import {
   LIFTED_ACTION,
   UPDATE_STATE,
   SELECT_INSTANCE,
+  TOGGLE_PERSIST,
 } from '@redux-devtools/app/lib/constants/actionTypes';
 import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI } from 'redux';
@@ -23,7 +24,7 @@ function panelDispatcher(bgConnection: chrome.runtime.Port) {
           next({ type: SELECT_INSTANCE, selected: connections[0] });
         }
       }
-      if (action.type === LIFTED_ACTION) {
+      if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) {
         const instances = store.getState().instances;
         const instanceId = getActiveInstance(instances);
         const id = instances.options[instanceId].connectionId;

extension/src/app/middlewares/windowSync.ts

@@ -1,6 +1,7 @@
 import {
   UPDATE_STATE,
   LIFTED_ACTION,
+  TOGGLE_PERSIST,
 } from '@redux-devtools/app/lib/constants/actionTypes';
 import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI, Store } from 'redux';
@@ -21,7 +22,7 @@ const syncStores =
         instances: baseStore.getState().instances,
       });
     }
-    if (action.type === LIFTED_ACTION) {
+    if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) {
       const instances = store.getState().instances;
       const instanceId = getActiveInstance(instances);
       const id = instances.options[instanceId].connectionId;

extension/src/app/reducers/window/instances.ts

@@ -6,6 +6,7 @@ import {
   UPDATE_STATE,
   SELECT_INSTANCE,
   LIFTED_ACTION,
+  SET_PERSIST,
 } from '@redux-devtools/app/lib/constants/actionTypes';
 import {
   ExpandedUpdateStateAction,
@@ -27,6 +28,8 @@ export default function instances(
       return state;
     case SELECT_INSTANCE:
       return { ...state, selected: action.selected };
+    case SET_PERSIST:
+      return { ...state, persisted: action.payload };
     default:
       return state;
   }

packages/redux-devtools-app/src/actions/index.ts

@@ -23,6 +23,7 @@ import {
   GET_REPORT_ERROR,
   GET_REPORT_SUCCESS,
   ERROR,
+  SET_PERSIST,
 } from '../constants/actionTypes';
 import {
   AUTH_ERROR,
@@ -302,6 +303,14 @@ export function togglePersist(): TogglePersistAction {
   return { type: TOGGLE_PERSIST };
 }
 
+export interface SetPersistAction {
+  type: typeof SET_PERSIST;
+  payload: boolean;
+}
+export function setPersist(persist: boolean): SetPersistAction {
+  return { type: SET_PERSIST, payload: persist };
+}
+
 export interface ToggleSyncAction {
   type: typeof TOGGLE_SYNC;
 }
@@ -561,6 +570,7 @@ export type StoreActionWithoutUpdateStateOrLiftedAction =
   | UpdateMonitorStateAction
   | ExportAction
   | TogglePersistAction
+  | SetPersistAction
   | ToggleSyncAction
   | ToggleSliderAction
   | ToggleDispatcherAction

packages/redux-devtools-app/src/components/buttons/PersistButton.tsx

@@ -26,8 +26,8 @@ class LockButton extends Component<Props> {
         mark={this.props.persisted && 'base0D'}
         title={
           this.props.persisted
-            ? 'Persist state history'
-            : 'Disable state persisting'
+            ? 'Disable state persisting'
+            : 'Persist state history'
         }
         onClick={this.props.onClick}
       >

packages/redux-devtools-app/src/constants/actionTypes.ts

@@ -9,6 +9,7 @@ export const LIFTED_ACTION = 'devTools/LIFTED_ACTION';
 export const MONITOR_ACTION = 'devTools/MONITOR_ACTION';
 export const TOGGLE_SYNC = 'devTools/TOGGLE_SYNC';
 export const TOGGLE_PERSIST = 'devTools/TOGGLE_PERSIST';
+export const SET_PERSIST = 'devTools/SET_PERSIST';
 export const SELECT_MONITOR = 'devTools/SELECT_MONITOR';
 export const UPDATE_MONITOR_STATE = 'devTools/UPDATE_MONITOR_STATE';
 export const TOGGLE_SLIDER = 'devTools/TOGGLE_SLIDER';

packages/redux-devtools-app/src/reducers/instances.ts

@@ -8,6 +8,7 @@ import {
   REMOVE_INSTANCE,
   TOGGLE_PERSIST,
   TOGGLE_SYNC,
+  SET_PERSIST,
 } from '../constants/actionTypes';
 import { DISCONNECTED } from '../constants/socketActionTypes';
 import parseJSON from '../utils/parseJSON';
@@ -349,6 +350,8 @@ export default function instances(
       };
     case TOGGLE_PERSIST:
       return { ...state, persisted: !state.persisted };
+    case SET_PERSIST:
+      return { ...state, persisted: action.payload };
     case TOGGLE_SYNC:
       return { ...state, sync: !state.sync };
     case SELECT_INSTANCE: