Store state settings individually to prevent overwriting (https://github.com/woocommerce/woocommerce-admin/pull/2317)

plugins/woocommerce-admin/client/wc-api/settings/operations.js

@@ -8,6 +8,7 @@ import apiFetch from '@wordpress/api-fetch';
 /**
  * Internal dependencies
  */
+import { getResourceName } from '../utils';
 import { NAMESPACE } from '../constants';
 
 function read( resourceNames, fetch = apiFetch ) {
@@ -58,22 +59,34 @@ function updateSettings( resourceNames, data, fetch ) {
 }
 
 function settingsToSettingsResource( resourceName, settings ) {
-	const settingsData = {};
-	settings.forEach( setting => ( settingsData[ setting.id ] = setting.value ) );
-	return { [ resourceName ]: { data: settingsData } };
+	const resources = {};
+
+	const settingIds = settings.map( setting => setting.id );
+	settings.forEach(
+		setting =>
+			( resources[ getResourceName( resourceName, setting.id ) ] = { data: setting.value } )
+	);
+
+	return {
+		[ resourceName ]: {
+			data: settingIds,
+		},
+		...resources,
+	};
 }
 
 function settingToSettingsResource( resourceName, data ) {
-	const settings = {};
 	if ( 'undefined' === typeof data.update ) {
 		return '';
 	}
 
-	// @todo This will only return updated fields so fields
-	// not updated may be temporarily overwritten in the store.
-	data.update.forEach( setting => ( settings[ setting.id ] = setting.value ) );
+	const resources = {};
+	data.update.forEach(
+		setting =>
+			( resources[ getResourceName( resourceName, setting.id ) ] = { data: setting.value } )
+	);
 
-	return { [ resourceName ]: { data: settings } };
+	return resources;
 }
 
 export default {

plugins/woocommerce-admin/client/wc-api/settings/selectors.js

@@ -9,12 +9,21 @@ import { isNil } from 'lodash';
  * Internal dependencies
  */
 import { DEFAULT_REQUIREMENT } from '../constants';
+import { getResourceName } from '../utils';
 
 const getSettings = ( getResource, requireResource ) => (
 	group,
 	requirement = DEFAULT_REQUIREMENT
 ) => {
-	return requireResource( requirement, `settings/${ group }` ).data || {};
+	const resourceName = `settings/${ group }`;
+	const ids = requireResource( requirement, resourceName ).data || [];
+	const settings = {};
+
+	ids.forEach( id => {
+		settings[ id ] = getResource( getResourceName( resourceName, id ) ).data;
+	} );
+
+	return settings;
 };
 
 const getSettingsError = getResource => group => {