Implemented mechanism to allow reducers to customise what information…

… gets serialised to localStorage; Changed mechanism to load defaults in loadAndPersist.

editor/store/index.js

@@ -6,7 +6,6 @@ import { registerReducer, registerSelectors } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { PREFERENCES_DEFAULTS } from './defaults';
 import reducer from './reducer';
 import { withRehydratation, loadAndPersist } from './persist';
 import enhanceWithBrowserSize from './mobile';
@@ -23,7 +22,7 @@ const MODULE_KEY = 'core/editor';
 const store = applyMiddlewares(
 	registerReducer( 'core/editor', withRehydratation( reducer, 'preferences' ) )
 );
-loadAndPersist( store, 'preferences', STORAGE_KEY, PREFERENCES_DEFAULTS );
+loadAndPersist( store, reducer, 'preferences', STORAGE_KEY );
 enhanceWithBrowserSize( store, BREAK_MEDIUM );
 
 registerSelectors( MODULE_KEY, { getEditedPostTitle } );

editor/store/persist.js

@@ -34,17 +34,17 @@ export function withRehydratation( reducer, reducerKey ) {
  *
  * This should be executed after the reducer's registration.
  *
- * @param {Object} store      Store to enhance.
- * @param {string} reducerKey The reducer key to persist (example: reducerKey.subReducerKey).
- * @param {string} storageKey The storage key to use.
- * @param {Object} defaults   Default values of the reducer key.
+ * @param {Object}   store      Store to enhance.
+ * @param {Function} reducer    The reducer function. Used to get default values and to allow custom serialization by the reducers.
+ * @param {string}   reducerKey The reducer key to persist (example: reducerKey.subReducerKey).
+ * @param {string}   storageKey The storage key to use.
  */
-export function loadAndPersist( store, reducerKey, storageKey, defaults = {} ) {
+export function loadAndPersist( store, reducer, reducerKey, storageKey ) {
 	// Load initially persisted value
 	const persistedString = window.localStorage.getItem( storageKey );
 	if ( persistedString ) {
 		const persistedState = {
-			...defaults,
+			...get( reducer( undefined, { type: 'DEFAULTS' } ), reducerKey ),
 			...JSON.parse( persistedString ),
 		};
 
@@ -60,7 +60,8 @@ export function loadAndPersist( store, reducerKey, storageKey, defaults = {} ) {
 		const newStateValue = get( store.getState(), reducerKey );
 		if ( newStateValue !== currentStateValue ) {
 			currentStateValue = newStateValue;
-			window.localStorage.setItem( storageKey, JSON.stringify( currentStateValue ) );
+			const stateToSave = get( reducer( store.getState(), { type: 'REDUX_SERIALIZE' } ), reducerKey );
+			window.localStorage.setItem( storageKey, JSON.stringify( stateToSave ) );
 		}
 	} );
 }

editor/store/test/persist.js

@@ -9,7 +9,7 @@ import { createStore } from 'redux';
 import { loadAndPersist, withRehydratation } from '../persist';
 
 describe( 'loadAndPersist', () => {
-	it( 'should load the initial value from the local storage', () => {
+	it( 'should load the initial value from the local storage integrating it into reducer default value.', () => {
 		const storageKey = 'dumbStorageKey';
 		window.localStorage.setItem( storageKey, JSON.stringify( { chicken: true } ) );
 		const reducer = () => {
@@ -20,15 +20,20 @@ describe( 'loadAndPersist', () => {
 		const store = createStore( withRehydratation( reducer, 'preferences' ) );
 		loadAndPersist(
 			store,
+			reducer,
 			'preferences',
 			storageKey,
 		);
-		expect( store.getState().preferences ).toEqual( { chicken: true } );
+		expect( store.getState().preferences ).toEqual( { chicken: true, ribs: true } );
 	} );
 
-	it( 'should persit to local storage once the state value changes', () => {
+	it( 'should persist to local storage once the state value changes', () => {
 		const storageKey = 'dumbStorageKey2';
 		const reducer = ( state, action ) => {
+			if ( action.type === 'REDUX_SERIALIZE' ) {
+				return state;
+			}
+
 			if ( action.type === 'UPDATE' ) {
 				return {
 					preferences: { chicken: true },
@@ -42,6 +47,7 @@ describe( 'loadAndPersist', () => {
 		const store = createStore( withRehydratation( reducer, 'preferences' ) );
 		loadAndPersist(
 			store,
+			reducer,
 			'preferences',
 			storageKey,
 		);
@@ -54,15 +60,13 @@ describe( 'loadAndPersist', () => {
 			counter: 41,
 		};
 		const storageKey = 'dumbStorageKey3';
-		const reducer = ( state, action ) => {
+		const reducer = ( state = { preferences: defaultsPreferences }, action ) => {
 			if ( action.type === 'INCREMENT' ) {
 				return {
 					preferences: { counter: state.preferences.counter + 1 },
 				};
 			}
-			return {
-				preferences: { counter: 0 },
-			};
+			return state;
 		};
 
 		// store preferences without the `counter` default
@@ -71,9 +75,9 @@ describe( 'loadAndPersist', () => {
 		const store = createStore( withRehydratation( reducer, 'preferences' ) );
 		loadAndPersist(
 			store,
+			reducer,
 			'preferences',
 			storageKey,
-			defaultsPreferences,
 		);
 		store.dispatch( { type: 'INCREMENT' } );
 
@@ -87,15 +91,13 @@ describe( 'loadAndPersist', () => {
 			counter: 41,
 		};
 		const storageKey = 'dumbStorageKey4';
-		const reducer = ( state, action ) => {
+		const reducer = ( state = { preferences: defaultsPreferences }, action ) => {
 			if ( action.type === 'INCREMENT' ) {
 				return {
 					preferences: { counter: state.preferences.counter + 1 },
 				};
 			}
-			return {
-				preferences: { counter: 0 },
-			};
+			return state;
 		};
 
 		window.localStorage.setItem( storageKey, JSON.stringify( { counter: 1 } ) );
@@ -104,9 +106,9 @@ describe( 'loadAndPersist', () => {
 
 		loadAndPersist(
 			store,
+			reducer,
 			'preferences',
 			storageKey,
-			defaultsPreferences,
 		);
 		store.dispatch( { type: 'INCREMENT' } );