Store callback Output value in persistence storage

Author: petar-qb

dash/dash-renderer/src/actions/index.js

@@ -1,4 +1,4 @@
-import {once} from 'ramda';
+import {once, path} from 'ramda';
 import {createAction} from 'redux-actions';
 import {addRequestedCallbacks} from './callbacks';
 import {getAppState} from '../reducers/constants';
@@ -7,6 +7,7 @@ import cookie from 'cookie';
 import {validateCallbacksToLayout} from './dependencies';
 import {includeObservers, getLayoutCallbacks} from './dependencies_ts';
 import {computePaths, getPath} from './paths';
+import {recordUiEdit} from '../persistence';
 
 export const onError = createAction(getAction('ON_ERROR'));
 export const setAppLifecycle = createAction(getAction('SET_APP_LIFECYCLE'));
@@ -17,10 +18,20 @@ export const setHooks = createAction(getAction('SET_HOOKS'));
 export const setLayout = createAction(getAction('SET_LAYOUT'));
 export const setPaths = createAction(getAction('SET_PATHS'));
 export const setRequestQueue = createAction(getAction('SET_REQUEST_QUEUE'));
-export const updateProps = createAction(getAction('ON_PROP_CHANGE'));
 export const insertComponent = createAction(getAction('INSERT_COMPONENT'));
 export const removeComponent = createAction(getAction('REMOVE_COMPONENT'));
 
+// Change the variable name of the action
+export const onPropChange = createAction(getAction('ON_PROP_CHANGE'));
+
+export function updateProps(payload) {
+    return (dispatch, getState) => {
+        const component = path(payload.itempath, getState().layout);
+        recordUiEdit(component, payload.props, dispatch);
+        dispatch(onPropChange(payload));
+    };
+}
+
 export const addComponentToLayout = payload => (dispatch, getState) => {
     const {paths} = getState();
     dispatch(insertComponent(payload));

dash/dash-renderer/src/persistence.js

@@ -501,46 +501,21 @@ export function prunePersistence(layout, newProps, dispatch) {
         depersistedProps = mergeRight(props, update);
     }
 
-    if (finalPersistence) {
+    if (finalPersistence && persistenceChanged) {
         const finalStorage = getStore(finalPersistenceType, dispatch);
-
-        if (persistenceChanged) {
-            // apply new persistence
-            forEach(
-                persistedProp =>
-                    modProp(
-                        getValsKey(id, persistedProp, finalPersistence),
-                        finalStorage,
-                        element,
-                        depersistedProps,
-                        persistedProp,
-                        update
-                    ),
-                filter(notInNewProps, finalPersistedProps)
-            );
-        }
-
-        // now the main point - clear any edit of a prop that changed
-        // note that this is independent of the new prop value.
-        const transforms = element.persistenceTransforms || {};
-        for (const propName in newProps) {
-            const propTransforms = transforms[propName];
-            if (propTransforms) {
-                for (const propPart in propTransforms) {
-                    finalStorage.removeItem(
-                        getValsKey(
-                            id,
-                            `${propName}.${propPart}`,
-                            finalPersistence
-                        )
-                    );
-                }
-            } else {
-                finalStorage.removeItem(
-                    getValsKey(id, propName, finalPersistence)
-                );
-            }
-        }
+        // apply new persistence
+        forEach(
+            persistedProp =>
+                modProp(
+                    getValsKey(id, persistedProp, finalPersistence),
+                    finalStorage,
+                    element,
+                    depersistedProps,
+                    persistedProp,
+                    update
+                ),
+            filter(notInNewProps, finalPersistedProps)
+        );
     }
     return persistenceChanged ? mergeRight(newProps, update) : newProps;
 }

dash/dash-renderer/src/wrapper/DashWrapper.tsx

@@ -23,7 +23,6 @@ import {DashLayoutPath, UpdatePropsPayload} from '../types/component';
 import {DashConfig} from '../config';
 import {notifyObservers, onError, updateProps} from '../actions';
 import {getWatchedKeys, stringifyId} from '../actions/dependencies';
-import {recordUiEdit} from '../persistence';
 import {
     createElement,
     getComponentLayout,
@@ -131,10 +130,6 @@ function DashWrapper({
             const watchedKeys = getWatchedKeys(id, keys(changedProps), graphs);
 
             batch(() => {
-                // setProps here is triggered by the UI - record these changes
-                // for persistence
-                recordUiEdit(renderComponent, newProps, dispatch);
-
                 // Only dispatch changes to Dash if a watched prop changed
                 if (watchedKeys.length) {
                     dispatch(