Data Stores: Migrate Analyzer store to createReduxStore()

client/landing/stepper/declarative-flow/internals/steps-repository/import-light/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable wpcalypso/jsx-classname-namespace */
+import { Analyzer } from '@automattic/data-stores';
 import { StepContainer, SubTitle, Title } from '@automattic/onboarding';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createElement, createInterpolateElement } from '@wordpress/element';
@@ -12,10 +13,8 @@ import Colors from 'calypso/blocks/import-light/colors';
 import Summary from 'calypso/blocks/import-light/summary';
 import DocumentHead from 'calypso/components/data/document-head';
 import { useSiteSlugParam } from 'calypso/landing/stepper/hooks/use-site-slug-param';
-import { ANALYZER_STORE } from 'calypso/landing/stepper/stores';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import type { ProgressState } from './types';
-import type { AnalyzerSelect } from '@automattic/data-stores';
 import type { Step } from 'calypso/landing/stepper/declarative-flow/internals/types';
 import './style.scss';
 
@@ -27,13 +26,13 @@ const ImportLight: Step = function ImportStep( props ) {
 	const [ url, setUrl ] = useState( '' );
 	const [ progressState, setProgressState ] = useState< ProgressState >( 'capture' );
 	const [ percentage, setPercentage ] = useState( 2 );
-	const { analyzeColors } = useDispatch( ANALYZER_STORE );
+	const { analyzeColors } = useDispatch( Analyzer.store );
 	const colorsData = useSelect(
-		( select ) => ( select( ANALYZER_STORE ) as AnalyzerSelect ).getSiteColors( url ),
+		( select ) => select( Analyzer.store ).getSiteColors( url ),
 		[ url ]
 	);
 	const fetchingColorsInProgress = useSelect(
-		( select ) => ( select( ANALYZER_STORE ) as AnalyzerSelect ).isSiteColorsInAnalysis(),
+		( select ) => select( Analyzer.store ).isSiteColorsInAnalysis(),
 		[]
 	);
 

client/landing/stepper/stores.ts

@@ -6,7 +6,6 @@ import {
 	User,
 	AutomatedTransferEligibility,
 	StepperInternal,
-	Analyzer,
 } from '@automattic/data-stores';
 
 export const ONBOARD_STORE = Onboard.register();
@@ -25,5 +24,3 @@ export const USER_STORE = User.register( {
 } );
 
 export const AUTOMATED_ELIGIBILITY_STORE = AutomatedTransferEligibility.register();
-
-export const ANALYZER_STORE = Analyzer.register();

packages/data-stores/src/analyzer/index.ts

@@ -1,4 +1,4 @@
-import { registerStore } from '@wordpress/data';
+import { register, createReduxStore } from '@wordpress/data';
 import { controls } from '../wpcom-request-controls';
 import { createActions } from './actions';
 import { STORE_KEY } from './constants';
@@ -7,16 +7,11 @@ import * as selectors from './selectors';
 export * from './types';
 export type { State };
 
-let isRegistered = false;
-export function register(): typeof STORE_KEY {
-	if ( ! isRegistered ) {
-		isRegistered = true;
-		registerStore( STORE_KEY, {
-			actions: createActions(),
-			controls: controls,
-			reducer: reducer,
-			selectors,
-		} );
-	}
-	return STORE_KEY;
-}
+export const store = createReduxStore( STORE_KEY, {
+	actions: createActions(),
+	controls: controls,
+	reducer: reducer,
+	selectors,
+} );
+
+register( store );

packages/data-stores/src/analyzer/types.ts

@@ -1,6 +1,5 @@
 import * as actions from './actions';
-import * as selectors from './selectors';
-import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
+import type { DispatchFromMap } from '../mapped-types';
 
 interface Color {
 	name: string;
@@ -36,5 +35,3 @@ export type ColorsState = {
 export interface Dispatch {
 	dispatch: DispatchFromMap< typeof actions >;
 }
-
-export type AnalyzerSelect = SelectFromMap< typeof selectors >;

packages/data-stores/src/index.ts

@@ -65,7 +65,6 @@ export { getContextResults } from './contextual-help/contextual-help';
 export { generateAdminSections } from './contextual-help/admin-sections';
 export type { LinksForSection } from './contextual-help/contextual-help';
 export * from './contextual-help/constants';
-export type { AnalyzerSelect } from './analyzer/types';
 export type { I18nSelect } from './i18n/types';
 export type { HelpCenterSite, HelpCenterSelect } from './help-center/types';
 export type { ProductsListSelect } from './products-list/types';