Merge pull request #5936 from google/Enhancement/5859-fix-state-mutation

Fix mutation of state in widget areas reducer.
google · Oct 4, 2022 · 4ec3dab · 4ec3dab
2 parents 941badd + b3beef7
commit 4ec3dab
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 57 deletions.
diff --git a/assets/js/googlesitekit/widgets/datastore/areas.js b/assets/js/googlesitekit/widgets/datastore/areas.js
@@ -27,6 +27,7 @@ import invariant from 'invariant';
 import Data from 'googlesitekit-data';
 import { CORE_WIDGETS, WIDGET_AREA_STYLES } from './constants';
 import { sortByProperty } from '../../../util/sort-by-property';
+import { createReducer } from '../../../../js/googlesitekit/data/create-reducer';
 
 const { createRegistrySelector } = Data;
 
@@ -118,26 +119,24 @@ export const actions = {
 
 export const controls = {};
 
-export const reducer = ( state, { type, payload } ) => {
+export const reducer = createReducer( ( state, { type, payload } ) => {
 	switch ( type ) {
 		case ASSIGN_WIDGET_AREA: {
 			const { slug, contextSlugs } = payload;
 
-			const { contextAssignments } = state;
 			contextSlugs.forEach( ( contextSlug ) => {
-				if ( contextAssignments[ contextSlug ] === undefined ) {
-					contextAssignments[ contextSlug ] = [];
+				if ( state.contextAssignments[ contextSlug ] === undefined ) {
+					state.contextAssignments[ contextSlug ] = [];
 				}
 
-				if ( ! contextAssignments[ contextSlug ].includes( slug ) ) {
-					contextAssignments[ contextSlug ].push( slug );
+				if (
+					! state.contextAssignments[ contextSlug ].includes( slug )
+				) {
+					state.contextAssignments[ contextSlug ].push( slug );
 				}
 			} );
 
-			return {
-				...state,
-				contextAssignments,
-			};
+			return state;
 		}
 
 		case REGISTER_WIDGET_AREA: {
@@ -151,20 +150,15 @@ export const reducer = ( state, { type, payload } ) => {
 				return state;
 			}
 
-			return {
-				...state,
-				areas: {
-					...state.areas,
-					[ slug ]: { ...settings, slug },
-				},
-			};
+			state.areas[ slug ] = { ...settings, slug };
+			return state;
 		}
 
 		default: {
 			return state;
 		}
 	}
-};
+} );
 
 export const resolvers = {};
 

diff --git a/assets/js/googlesitekit/widgets/datastore/widgets.js b/assets/js/googlesitekit/widgets/datastore/widgets.js
@@ -21,13 +21,15 @@
  */
 import invariant from 'invariant';
 import intersection from 'lodash/intersection';
+import { original } from 'immer';
 
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
 import { isInactiveWidgetState, normalizeWidgetModules } from '../util';
 import { CORE_WIDGETS, WIDGET_WIDTHS } from './constants';
+import { createReducer } from '../../../../js/googlesitekit/data/create-reducer';
 
 const { createRegistrySelector } = Data;
 
@@ -176,26 +178,22 @@ export const actions = {
 
 export const controls = {};
 
-export const reducer = ( state, { type, payload } ) => {
+export const reducer = createReducer( ( state, { type, payload } ) => {
 	switch ( type ) {
 		case ASSIGN_WIDGET: {
 			const { slug, areaSlugs } = payload;
 
-			const { areaAssignments } = state;
 			areaSlugs.forEach( ( areaSlug ) => {
-				if ( areaAssignments[ areaSlug ] === undefined ) {
-					areaAssignments[ areaSlug ] = [];
+				if ( state.areaAssignments[ areaSlug ] === undefined ) {
+					state.areaAssignments[ areaSlug ] = [];
 				}
 
-				if ( ! areaAssignments[ areaSlug ].includes( slug ) ) {
-					areaAssignments[ areaSlug ].push( slug );
+				if ( ! state.areaAssignments[ areaSlug ].includes( slug ) ) {
+					state.areaAssignments[ areaSlug ].push( slug );
 				}
 			} );
 
-			return {
-				...state,
-				areaAssignments,
-			};
+			return state;
 		}
 
 		case REGISTER_WIDGET: {
@@ -209,55 +207,35 @@ export const reducer = ( state, { type, payload } ) => {
 				return state;
 			}
 
-			return {
-				...state,
-				widgets: {
-					...state.widgets,
-					[ slug ]: {
-						...settings,
-						slug,
-					},
-				},
-			};
+			state.widgets[ slug ] = { ...settings, slug };
+			return state;
 		}
 
 		case SET_WIDGET_STATE: {
 			const { slug, Component, metadata } = payload;
 
-			return {
-				...state,
-				widgetStates: {
-					...state.widgetStates,
-					[ slug ]: {
-						Component,
-						metadata,
-					},
-				},
-			};
+			state.widgetStates[ slug ] = { Component, metadata };
+			return state;
 		}
 
 		case UNSET_WIDGET_STATE: {
 			const { slug, Component, metadata } = payload;
 
-			const widgetStates = { ...state.widgetStates };
 			if (
-				widgetStates?.[ slug ]?.Component === Component &&
-				widgetStates?.[ slug ]?.metadata === metadata
+				state.widgetStates?.[ slug ]?.Component === Component &&
+				original( state.widgetStates?.[ slug ]?.metadata ) === metadata
 			) {
-				delete widgetStates[ slug ];
+				delete state.widgetStates[ slug ];
 			}
 
-			return {
-				...state,
-				widgetStates,
-			};
+			return state;
 		}
 
 		default: {
 			return state;
 		}
 	}
-};
+} );
 
 export const resolvers = {};