How to use the i18n-calypso.on function in i18n-calypso

componentDidMount() {
		this.setLanguage();

		// wrap translations from i18n
		i18n.registerTranslateHook( ( translation, options ) =>
			this.wrapTranslation( options.original, translation, options )
		);

		// callback when translated component changes.
		// the callback is overwritten by the translator on load/unload, so we're returning it within an anonymous function.
		i18n.registerComponentUpdateHook( () => {} );
		i18n.on( 'change', this.refresh );
		userSettings.on( 'change', this.refresh );
	}

const newSetting = isTranslatorEnabled,
		changed = _isTranslatorEnabled !== newSetting,
		tracksEvent = newSetting
			? 'calypso_community_translator_enabled'
			: 'calypso_community_translator_disabled';

	if ( changed && _isTranslatorEnabled !== undefined ) {
		debug( tracksEvent );
		analytics.tracks.recordEvent( tracksEvent, { locale: user.data.localeSlug } );
	}

	_isTranslatorEnabled = newSetting;
}

// re-initialize when new locale data is loaded
i18n.on( 'change', communityTranslatorJumpstart.init.bind( communityTranslatorJumpstart ) );

export default communityTranslatorJumpstart;

componentDidMount() {
		i18n.on( 'change', this.onI18nChange );
	}

actions: keyMirror( {
		UPDATE_ACCOUNT_RECOVERY_PHONE: null,
		RECEIVE_UPDATED_ACCOUNT_RECOVERY_PHONE: null,
		DELETE_ACCOUNT_RECOVERY_PHONE: null,
		RECEIVE_DELETED_ACCOUNT_RECOVERY_PHONE: null,
		UPDATE_ACCOUNT_RECOVERY_EMAIL: null,
		RECEIVE_UPDATED_ACCOUNT_RECOVERY_EMAIL: null,
		DELETE_ACCOUNT_RECOVERY_EMAIL: null,
		RECEIVE_DELETED_ACCOUNT_RECOVERY_EMAIL: null,
		DISMISS_ACCOUNT_RECOVERY_PHONE_NOTICE: null,
		DISMISS_ACCOUNT_RECOVERY_EMAIL_NOTICE: null,
	} ),
	messages: _translateMessages()
};

i18n.on( 'change', function() {
	constants.messages = _translateMessages()
} );

module.exports = constants;