Use an effect instead of relying on the return value of an action

packages/data/src/components/with-dispatch/index.js

@@ -44,7 +44,7 @@ const withDispatch = ( mapDispatchToProps ) => createHigherOrderComponent(
 
 				proxyDispatch( propName, ...args ) {
 					// Original dispatcher is a pre-bound (dispatching) action creator.
-					return mapDispatchToProps( this.props.registry.dispatch, this.props.ownProps )[ propName ]( ...args );
+					mapDispatchToProps( this.props.registry.dispatch, this.props.ownProps )[ propName ]( ...args );
 				}
 
 				setProxyProps( props ) {

packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -39,7 +39,6 @@ class HierarchicalTermSelector extends Component {
 		this.onToggleForm = this.onToggleForm.bind( this );
 		this.setFilterValue = this.setFilterValue.bind( this );
 		this.state = {
-			adding: false,
 			formName: '',
 			formParent: '',
 			showForm: false,
@@ -48,10 +47,6 @@ class HierarchicalTermSelector extends Component {
 		};
 	}
 
-	componentWillUnmount() {
-		this.addRequest = null;
-	}
-
 	onChange( event ) {
 		const { onUpdateTerms, terms = [] } = this.props;
 		const termId = parseInt( event.target.value, 10 );
@@ -86,9 +81,9 @@ class HierarchicalTermSelector extends Component {
 
 	onAddTerm( event ) {
 		event.preventDefault();
-		const { onUpdateTerms, onSaveTerm, terms, slug, availableTerms, taxonomy } = this.props;
-		const { formName, formParent, adding } = this.state;
-		if ( formName === '' || adding ) {
+		const { onUpdateTerms, addTermToEditedPost, terms, availableTerms } = this.props;
+		const { formName, formParent } = this.state;
+		if ( formName === '' ) {
 			return;
 		}
 
@@ -106,45 +101,14 @@ class HierarchicalTermSelector extends Component {
 			return;
 		}
 
-		this.setState( {
-			adding: true,
-		} );
-
-		this.addRequest = onSaveTerm( {
+		addTermToEditedPost( {
 			name: formName,
 			parent: formParent ? formParent : undefined,
 		} );
-
-		this.addRequest
-			.then( ( term ) => {
-				if ( this.addRequest === null ) {
-					return;
-				}
-				const termAddedMessage = sprintf(
-					_x( '%s added', 'term' ),
-					get(
-						taxonomy,
-						[ 'data', 'labels', 'singular_name' ],
-						slug === 'category' ? __( 'Category' ) : __( 'Term' )
-					)
-				);
-				this.props.speak( termAddedMessage, 'assertive' );
-				this.addRequest = null;
-				this.setState( {
-					adding: false,
-					formName: '',
-					formParent: '',
-				} );
-				onUpdateTerms( [ ...terms, term.id ] );
-			}, () => {
-				if ( this.addRequest === null ) {
-					return;
-				}
-				this.addRequest = null;
-				this.setState( {
-					adding: false,
-				} );
-			} );
+		this.setState( {
+			formName: '',
+			formParent: '',
+		} );
 	}
 
 	sortBySelected( termsTree ) {
@@ -418,8 +382,8 @@ export default compose( [
 		onUpdateTerms( terms ) {
 			dispatch( 'core/editor' ).editPost( { [ taxonomy.rest_base ]: terms } );
 		},
-		onSaveTerm( term ) {
-			return dispatch( 'core' ).saveEntityRecord( 'taxonomy', slug, term );
+		addTermToEditedPost( term ) {
+			return dispatch( 'core/editor' ).addTermToEditedPost( slug, term );
 		},
 	} ) ),
 	withSpokenMessages,

packages/editor/src/store/actions.js

@@ -802,3 +802,18 @@ export function unlockPostSaving( lockName ) {
 	};
 }
 
+/**
+ * Returns an action object signaling that a new term is added to the edited post.
+ *
+ * @param {string} slug  Taxonomy slug.
+ * @param {Object} term  Term object.
+ *
+ * @return {Object} Action object.
+ */
+export function addTermToEditedPost( slug, term ) {
+	return {
+		type: 'ADD_TERM_TO_EDITED_POST',
+		slug,
+		term,
+	};
+}

packages/editor/src/store/effects.js

@@ -56,6 +56,9 @@ import {
 	refreshPost,
 	AUTOSAVE_POST_NOTICE_ID,
 } from './effects/posts';
+import {
+	addTermToEditedPost,
+} from './effects/terms';
 
 /**
  * Block validity is a function of blocks state (at the point of a
@@ -284,4 +287,7 @@ export default {
 	REPLACE_BLOCKS: [
 		ensureDefaultBlock,
 	],
+	ADD_TERM_TO_EDITED_POST: ( action ) => {
+		addTermToEditedPost( action );
+	},
 };

packages/editor/src/store/effects/terms.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { dispatch, select } from '@wordpress/data';
+import { _x, sprintf, __ } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import { resolveSelector } from './utils';
+
+/**
+ * Effect handler adding a new term to currently edited post.
+ *
+ * @param {Object} action  action object.
+ * @param {Object} store   Redux Store.
+ */
+export async function addTermToEditedPost( { slug, term } ) {
+	const taxonomy = await resolveSelector( 'core', 'getTaxonomy', slug );
+	const savedTerm = await dispatch( 'core' ).saveEntityRecord( 'taxonomy', slug, term );
+	const terms = select( 'core/editor' ).getEditedPostAttribute( taxonomy.rest_base );
+
+	const termAddedMessage = sprintf(
+		_x( '%s added', 'term' ),
+		get(
+			taxonomy,
+			[ 'data', 'labels', 'singular_name' ],
+			slug === 'category' ? __( 'Category' ) : __( 'Term' )
+		)
+	);
+	speak( termAddedMessage, 'assertive' );
+	dispatch( 'core/editor' ).editPost( { [ taxonomy.rest_base ]: [ ...terms, savedTerm.id ] } );
+}