Data Stores: Refactor WpcomFeatures store to createReduxStore() (Auto…

…mattic#74473)

apps/editing-toolkit/editing-toolkit-plugin/common/data-stores/index.ts

@@ -1,4 +1,3 @@
 import './domain-suggestions';
 import './plans';
 import './site';
-import './wpcom-features';

packages/data-stores/src/index.ts

@@ -63,4 +63,3 @@ export * from './contextual-help/constants';
 export type { HelpCenterSite, HelpCenterSelect } from './help-center/types';
 export type { OnboardSelect } from './onboard';
 export type { StepperInternalSelect } from './stepper-internal';
-export type { WpcomFeaturesSelect } from './wpcom-features/types';

packages/data-stores/src/wpcom-features/index.ts

@@ -1,4 +1,4 @@
-import { registerStore } from '@wordpress/data';
+import { register, createReduxStore } from '@wordpress/data';
 import { controls } from '@wordpress/data-controls';
 import { STORE_KEY } from './constants';
 import reducer, { State } from './reducer';
@@ -10,16 +10,10 @@ export type { FeatureId, Feature } from './types';
 
 export { featuresList } from './features-data';
 
-let isRegistered = false;
+export const store = createReduxStore( STORE_KEY, {
+	controls,
+	reducer: reducer as Reducer< State, AnyAction >,
+	selectors,
+} );
 
-export function register(): typeof STORE_KEY {
-	if ( ! isRegistered ) {
-		isRegistered = true;
-		registerStore( STORE_KEY, {
-			controls,
-			reducer: reducer as Reducer< State, AnyAction >,
-			selectors,
-		} );
-	}
-	return STORE_KEY;
-}
+register( store );

packages/data-stores/src/wpcom-features/types.ts

@@ -1,5 +1,3 @@
-import * as selectors from './selectors';
-import type { SelectFromMap } from '../mapped-types';
 import type { PlanSlug } from '../plans';
 
 export type FeatureId =
@@ -16,5 +14,3 @@ export interface Feature {
 	id: FeatureId;
 	minSupportedPlan: PlanSlug;
 }
-
-export type WpcomFeaturesSelect = SelectFromMap< typeof selectors >;

packages/plans-grid/src/plans-accordion/index.tsx

@@ -1,3 +1,4 @@
+import { WPCOMFeatures } from '@automattic/data-stores';
 import { Button, SVG, Path } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { Icon } from '@wordpress/icons';
@@ -7,15 +8,9 @@ import * as React from 'react';
 import { useSupportedPlans } from '../hooks';
 import PlanItem from '../plans-accordion-item';
 import PlanItemPlaceholder from '../plans-accordion-item/plans-item-placeholder';
-import { PLANS_STORE, WPCOM_FEATURES_STORE } from '../stores';
+import { PLANS_STORE } from '../stores';
 import type { DisabledPlansMap } from '../plans-table/types';
-import type {
-	DomainSuggestions,
-	Plans,
-	PlansSelect,
-	WPCOMFeatures,
-	WpcomFeaturesSelect,
-} from '@automattic/data-stores';
+import type { DomainSuggestions, Plans, PlansSelect } from '@automattic/data-stores';
 
 import './style.scss';
 
@@ -67,10 +62,7 @@ const PlansAccordion: React.FunctionComponent< Props > = ( {
 		[ locale ]
 	);
 	const recommendedPlanSlug = useSelect(
-		( select ) =>
-			( select( WPCOM_FEATURES_STORE ) as WpcomFeaturesSelect ).getRecommendedPlanSlug(
-				selectedFeatures
-			),
+		( select ) => select( WPCOMFeatures.store ).getRecommendedPlanSlug( selectedFeatures ),
 		[ selectedFeatures ]
 	);
 

packages/plans-grid/src/stores.ts

@@ -1,4 +1,3 @@
-import { Plans, WPCOMFeatures } from '@automattic/data-stores';
+import { Plans } from '@automattic/data-stores';
 
 export const PLANS_STORE = Plans.register();
-export const WPCOM_FEATURES_STORE = WPCOMFeatures.register();