Хуки useSelect и useDispatch

Gutenberg

В версии плагина Gutenberg 5.9 (не путайте с версией WordPress 5.9) было представлено два новых API для взаимодействия с wp.data – это кастомные хуки реакта useSelect и useDispatch.

Если, к примеру, вы создавали сайдбары для блочного редактора, то уже вероятно работали с кое-чем похожим, а имено с withSelect и withDispatch. Теперь пришло время отказаться от них в пользу более удобных useSelect и useDispatch (но это не обязательно).

Что произойдёт с withSelect и withDispatch?

В официальной документации WordPress упомянуто, что отказываться от них не планируют и мы можем продолжать их использовать. Более того, под капотом они тоже были переработаны.

Пример замены withSelect на useSelect

Давайте начнём с примера замены withSelect на соответствующий ему хук useSelect. Как вы возможно знаете, оно используется для получения каких-либо данных, к примеру мы можем запускать запросы получения постов (getEntityRecords) или метаданных (getEditedPostAttribute).

Было:

const { withSelect } = wp.data;
 
const Truemisha_Example_Plugin = ( { somePosts } ) => {
 
	console.log( 'Полученные посты', somePosts );
 
	return( 
		...
	);
 
}
 
export default withSelect( ( select ) => {		
	return {
		somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),
	};
} ) ( Truemisha_Example_Plugin );

Стало:

const { useSelect } = wp.data;
 
const Truemisha_Example_Plugin = () => {
 
	const { somePosts } = useSelect( ( select ) => {		
		return {
			somePosts: select( 'core' ).getEntityRecords( 'postType', 'page' ),
		};
	} );
 
	console.log( 'Полученные посты', somePosts );
 
	return(
		...
	);
}
 
export default Truemisha_Example_Plugin;

Пример замены withDispatch на useDispacth

withDispatch и соответствующий ему хук useDispatch нужны для обновления данных в базе данных, допустим, в этом примере попробуем обновить метаданные поста.

Было:

const { withDispatch } = wp.data;
const { TextControl } = wp.components;
 
const Truemisha_Example_Plugin = ( { setPostMeta } ) => {	
	return(
		<TextControl
			label="Пример поля"
			value=""
			onChange={ ( value ) => setPostMeta( { example_post_meta: value } ) }
		/>
	);
}
 
export default withDispatch( ( dispatch ) => {
	return {
		setPostMeta( newMeta ) {
			dispatch( 'core/editor' ).editPost( { meta: newMeta } );
		}
	};
} )( Truemisha_Example_Plugin );

Стало:

const { useDispatch } = wp.data;
const { TextControl } = wp.components;
 
const Truemisha_Example_Plugin = () => {	
	const tmpMetaValue = "";
	const { editPost } = useDispatch( 'core/editor', [ tmpMetaValue ] );
 
	return(
		<TextControl
			label="Пример поля"
			value={ tmpMetaValue }
			onChange={ ( value ) => editPost( { meta: { example_post_meta: value } } ) }
		/>
	);
}
 
export default Truemisha_Example_Plugin;

Прошу прощения за минимум объяснений – всё-таки у меня есть целых два курса по Gutenberg – раз и два, поэтому, если вдруг вам что-либо непонятно в коде – вэлкам.

Более сложный пример с заменой обоих хуков

Было:

const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;
const { TextControl } = wp.components;
 
const Truemisha_Example_Plugin = ( { postMeta, setPostMeta } ) => {
	return(
		<TextControl
			label="Пример поля"
			value={ postMeta.example_post_meta }
			onChange={ ( value ) => setPostMeta( { example_post_meta: value } ) }
		/>
	);
}
 
export default compose( [
	withSelect( ( select ) => {		
		return {
			postMeta: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
		};
	} ),
	withDispatch( ( dispatch ) => {
		return {
			setPostMeta( newMeta ) {
				dispatch( 'core/editor' ).editPost( { meta: newMeta } );
			}
		};
	} )
] )( Truemisha_Example_Plugin );

Стало:

const { useSelect, useDispatch } = wp.data;
const { TextControl } = wp.components;
 
const Truemisha_Example_Plugin = () => {
 
	const { postMeta } = useSelect( ( select ) => {		
		return {
			postMeta: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
		};
	} );
 
	const { editPost } = useDispatch( 'core/editor', [ postMeta.example_post_meta ] );
 
	return(
		<TextControl
			label="Пример поля"
			value={ postMeta.example_post_meta }
			onChange={ ( value ) => editPost( { meta: { example_post_meta: value } } ) }
		/>
	);
}
 
export default Truemisha_Example_Plugin;

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Замена withSelect на useSelect
Замена withDispatch на useDispatch
Пример с двумя хуками