Meet the Data API 

Meet the Data API Me 

@ChrisVanPatten 

@BusinessOfCMS businessofcms.com 

REACT 

REACT (is a state management library) 

Props vs State 

Props 

Props 

Props 

Props State 

Props Props 

Props Props 

Props Props

Prop drilling has its limits. 

Meet Redux 

Meet Redux The WordPress Data API 

Data Store 

Get and modify data in a store 

Get and modify data in a store Subscribe your component to changes in a store 

Get and modify data in a store Subscribe your component to changes in a store Send changes from your component to a store 

Get and modify data in a store Subscribe your component to changes in a store Send changes from your component to a store Register your own store 

Get and modify data in a store Subscribe your component to changes in a store Send changes from your component to a store Register your own store 

Select 

Demo 

Dispatch 

Demo 

Get and modify data in a store Subscribe your component to changes in a store Send changes from your component to a store Register your own store 

useSelect 

import { useSelect } from '@wordpress/data'; 

import { useSelect } from '@wordpress/data'; const Edit = ( props ) => { }; 

import { useSelect } from '@wordpress/data'; const Edit = ( props ) => { const blocks = useSelect( ); }; 

import { useSelect } from '@wordpress/data'; const Edit = ( props ) => { const blocks = useSelect( ( select ) => ( select( 'core/block-editor' ).getBlocks() ) ); }; 

import { useSelect } from '@wordpress/data'; const Edit = ( props ) => { const blocks = useSelect( ( select ) => ( select( 'core/block-editor' ).getBlocks() ) ); return (

{ JSON.stringify( blocks ) }

); }; 

import { useSelect } from '@wordpress/data'; const Edit = ( props ) => { const blocks = useSelect( ( select ) => ( select( 'core/block-editor' ).getBlocks() ) ); return (

{ JSON.stringify( blocks ) }

); }; 

Get and modify data in a store Subscribe your component to changes in a store Send changes from your component to a store Register your own store 

useDispatch 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; const Edit = ( props ) => { }; 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; const Edit = ( props ) => { const { } = useDispatch( ); }; 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; const Edit = ( props ) => { const { } = useDispatch( 'core/edit-post' ); }; 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); }; 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); return ( ); }; 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); return ( Click to open sidebar! ); }; 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); return ( openGeneralSidebar( 'edit-post/document' ) } > Click to open sidebar! ); }; 

import { Button } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); return ( openGeneralSidebar( 'edit-post/document' ) } > Click to open sidebar! ); }; 

Get and modify data in a store Subscribe your component to changes in a store Send changes from your component to a store Register your own store 

Store 

store { actions, reducer, selectors, } 

State 

Action 

Reducer 

Selector 

/** * WordPress dependencies */ import { registerStore } from '@wordpress/data'; 

const defaultState = { talks: {}, }; /** * WordPress dependencies */ import { registerStore } from '@wordpress/data'; 

const actions = { addTalk( talkName, talkDescription ) { return { type: 'ADD_TALK', talkName, talkDescription, }; }, }; const defaultState = { talks: {}, }; 

const reducer = ( state = defaultState, action ) => { switch ( action.type ) { case 'ADD_TALK': return { ...state, talks: { ...state.talks, [ action.talkName ]: action.talkDescription, }, }; } return state; }; }; 

const selectors = { getTalks( state ) { const { talks } = state; return talks; }, getTalk( state, talkName ) { const { talks } = state; return talks[ talkName ] || null; }, }; return state; }; 

registerStore( 'wordcamp/seattle', { actions, reducer, selectors, }, ); return talks[ talkName ] || null; }, }; 

/** * WordPress dependencies */ import { registerStore } from '@wordpress/data'; const defaultState = { talks: {}, }; const actions = { addTalk( talkName, talkDescription ) { return { type: 'ADD_TALK', talkName, talkDescription, }; }, }; const reducer = ( state = defaultState, action ) => { switch ( action.type ) { case 'ADD_TALK': return { ...state, talks: { ...state.talks, [ action.talkName ]: action.talkDescription, }, }; } return state; }; const selectors = { getTalks( state ) { const { talks } = state; return talks; }, getTalk( state, talkName ) { const { talks } = state; return talks[ talkName ] || null; }, }; registerStore( 'wordcamp/seattle', { actions, reducer, selectors, }, ); 

Demo 

Thanks! 

@ChrisVanPatten cvp.me/wcsea2019