Data Stores: migrate Subscriber store to createReduxStore

packages/data-stores/src/index.ts

@@ -30,7 +30,6 @@ export * from './templates';
 export * from './onboard/types';
 export * from './domain-suggestions/types';
 export * from './plans/types';
-export * from './subscriber/types';
 export * from './launch/types';
 export * from './user/types';
 

packages/data-stores/src/subscriber/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,
-			reducer,
-			selectors,
-		} );
-	}
-	return STORE_KEY;
-}
+export const store = createReduxStore( STORE_KEY, {
+	actions: createActions(),
+	controls,
+	reducer,
+	selectors,
+} );
+
+register( store );

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

@@ -1,7 +1,3 @@
-import * as actions from './actions';
-import * as selectors from './selectors';
-import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
-
 export interface SubscriberState {
 	add?: {
 		inProgress: boolean;
@@ -48,9 +44,3 @@ export type ImportSubscribersResponse = {
 
 export type GetSubscribersImportResponse = ImportJob;
 export type GetSubscribersImportsResponse = ImportJob[];
-
-export interface SubscriberDispatch {
-	dispatch: DispatchFromMap< typeof actions >;
-}
-
-export type SubscriberSelect = SelectFromMap< typeof selectors >;

packages/subscriber/src/components/add-form/index.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable wpcalypso/jsx-classname-namespace */
 import { FormInputValidation } from '@automattic/components';
+import { Subscriber } from '@automattic/data-stores';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { Title, SubTitle, NextButton } from '@automattic/onboarding';
 import { TextControl, FormFileUpload, Button } from '@wordpress/components';
@@ -20,9 +21,7 @@ import React, {
 import { useActiveJobRecognition } from '../../hooks/use-active-job-recognition';
 import { useInProgressState } from '../../hooks/use-in-progress-state';
 import { RecordTrackEvents, useRecordAddFormEvents } from '../../hooks/use-record-add-form-events';
-import { SUBSCRIBER_STORE } from '../../store';
 import { tip } from './icon';
-import type { SubscriberSelect } from '@automattic/data-stores';
 import './style.scss';
 
 interface Props {
@@ -69,7 +68,7 @@ export const AddSubscriberForm: FunctionComponent< Props > = ( props ) => {
 		importCsvSubscribers,
 		importCsvSubscribersUpdate,
 		getSubscribersImports,
-	} = useDispatch( SUBSCRIBER_STORE );
+	} = useDispatch( Subscriber.store );
 
 	/**
 	 * ↓ Fields
@@ -92,7 +91,7 @@ export const AddSubscriberForm: FunctionComponent< Props > = ( props ) => {
 	const [ submitAttemptCount, setSubmitAttemptCount ] = useState( 0 );
 	const [ submitBtnReady, setIsSubmitBtnReady ] = useState( isSubmitButtonReady() );
 	const importSelector = useSelect(
-		( s ) => ( s( SUBSCRIBER_STORE ) as SubscriberSelect ).getImportSubscribersSelector(),
+		( select ) => select( Subscriber.store ).getImportSubscribersSelector(),
 		[]
 	);
 	const [ formFileUploadElement ] = useState(

packages/subscriber/src/hooks/use-active-job-recognition.ts

@@ -1,8 +1,6 @@
 import { Subscriber } from '@automattic/data-stores';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from 'react';
-import { SUBSCRIBER_STORE } from '../store';
-import type { SubscriberSelect } from '@automattic/data-stores';
 
 type ImportJob = Subscriber.ImportJob;
 type ImportJobStatus = Subscriber.ImportJobStatus;
@@ -11,13 +9,10 @@ export function useActiveJobRecognition( siteId: number ) {
 	const INTERVAL_ACTIVE = 1000;
 	const INTERVAL_INACTIVE = 5000;
 	const ACTIVE_STATE: ImportJobStatus[] = [ 'pending', 'importing' ];
-	const { getSubscribersImports, importCsvSubscribersUpdate } = useDispatch( SUBSCRIBER_STORE );
+	const { getSubscribersImports, importCsvSubscribersUpdate } = useDispatch( Subscriber.store );
 
 	const imports =
-		useSelect(
-			( s ) => ( s( SUBSCRIBER_STORE ) as SubscriberSelect ).getImportJobsSelector(),
-			[]
-		) || [];
+		useSelect( ( select ) => select( Subscriber.store ).getImportJobsSelector(), [] ) || [];
 	const jobs = imports.filter( ( x: ImportJob ) => ACTIVE_STATE.includes( x.status ) );
 	const activeJob = jobs.length ? jobs[ 0 ] : undefined;
 

packages/subscriber/src/hooks/use-in-progress-state.ts

@@ -1,10 +1,9 @@
+import { Subscriber } from '@automattic/data-stores';
 import { useSelect } from '@wordpress/data';
-import { SUBSCRIBER_STORE } from '../store';
-import type { SubscriberSelect } from '@automattic/data-stores';
 
 export function useInProgressState() {
 	const { addSelector, importSelector } = useSelect( ( select ) => {
-		const subscriber: SubscriberSelect = select( SUBSCRIBER_STORE );
+		const subscriber = select( Subscriber.store );
 		return {
 			addSelector: subscriber.getAddSubscribersSelector(),
 			importSelector: subscriber.getImportSubscribersSelector(),

packages/subscriber/src/hooks/use-record-add-form-events.ts

@@ -1,8 +1,7 @@
+import { Subscriber } from '@automattic/data-stores/src';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useRef } from 'react';
-import { SUBSCRIBER_STORE } from '../store';
 import { useInProgressState } from './use-in-progress-state';
-import type { SubscriberSelect } from '@automattic/data-stores';
 
 export type RecordTrackEvents = (
 	eventName: string,
@@ -14,11 +13,11 @@ export function useRecordAddFormEvents( recordTracksEvent?: RecordTrackEvents, f
 	const inProgress = useInProgressState();
 	const prevInProgress = useRef( inProgress );
 	const addSelector = useSelect(
-		( s ) => ( s( SUBSCRIBER_STORE ) as SubscriberSelect ).getAddSubscribersSelector(),
+		( select ) => select( Subscriber.store ).getAddSubscribersSelector(),
 		[]
 	);
 	const importSelector = useSelect(
-		( s ) => ( s( SUBSCRIBER_STORE ) as SubscriberSelect ).getImportSubscribersSelector(),
+		( select ) => select( Subscriber.store ).getImportSubscribersSelector(),
 		[]
 	);
 

packages/subscriber/src/index.ts

@@ -1,2 +1 @@
-export * from './store';
 export { AddSubscriberForm } from './components/add-form';