$30 off During Our Annual Pro Sale. View Details »

Meet the Data API

Meet the Data API

(Also known as "The Ultimate Beginner's Guide to the Gutenberg Data API")

One of the most challenging pieces of building powerful Gutenberg integrations is working with the WordPress Data API. The Data API is how you get data in and out of Gutenberg, track changes across blocks, and execute events around the editor. If you’re unfamiliar with the Data API (or Redux, the technology that powers it), this talk is for you. You’ll learn why the Data API matters, how it’s architected, when and how to use it, and much more.

Chris Van Patten

November 09, 2019
Tweet

More Decks by Chris Van Patten

Other Decks in Technology

Transcript

  1. Meet the Data API

    View Slide

  2. Meet the Data API
    Me

    View Slide

  3. @ChrisVanPatten

    View Slide

  4. @BusinessOfCMS
    businessofcms.com

    View Slide

  5. REACT

    View Slide

  6. REACT
    (is a state management library)

    View Slide

  7. Props vs State

    View Slide

  8. Props

    View Slide

  9. Props

    View Slide

  10. Props

    View Slide

  11. Props
    State

    View Slide

  12. Props

    Props

    View Slide

  13. Props

    Props

    View Slide

  14. Props

    Props
    Props

    View Slide

  15. Prop drilling has its limits.

    View Slide

  16. Meet Redux

    View Slide

  17. Meet Redux
    The WordPress Data API

    View Slide

  18. Data Store

    View Slide

  19. Get and modify data in a store

    View Slide

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

    View Slide

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

    View Slide

  22. 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

    View Slide

  23. 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

    View Slide

  24. Select

    View Slide

  25. Demo

    View Slide

  26. Dispatch

    View Slide

  27. Demo

    View Slide

  28. 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

    View Slide

  29. useSelect

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. 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

    View Slide

  37. useDispatch

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    );
    };

    View Slide

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

    );
    };

    View Slide

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

    );
    };

    View Slide

  47. 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

    View Slide

  48. Store

    View Slide

  49. store {
    actions,
    reducer,
    selectors,
    }

    View Slide

  50. State

    View Slide

  51. Action

    View Slide

  52. Reducer

    View Slide

  53. Selector

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. /**
    * 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,
    },
    );

    View Slide

  61. Demo

    View Slide

  62. Thanks!

    View Slide

  63. @ChrisVanPatten
    cvp.me/wcsea2019

    View Slide