Permalink
Browse files

Implemented mechanism to allow reducers to customise what information…

… gets serialised to localStorage; Changed mechanism to load defaults in loadAndPersist.
  • Loading branch information...
jorgefilipecosta committed Jan 16, 2018
1 parent 1fa9344 commit 4d6af27c7c617fbd8057e3f4bbe6ed7be9145e24
Showing with 24 additions and 22 deletions.
  1. +1 −2 editor/store/index.js
  2. +8 −7 editor/store/persist.js
  3. +15 −13 editor/store/test/persist.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 } );
@@ -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 ) );
}
} );
}
@@ -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' } );

0 comments on commit 4d6af27

Please sign in to comment.