web-dev-qa-db-fra.com

Dans Gutenberg, maintenant que withAPIData est obsolète, comment puis-je effectuer un appel async. Sur un noeud final personnalisé?

J'ai ce travail dans mon plugin et tout va bien avec le monde:

edit: withAPIData( props => {
            return {
                roles: '/matt-watson/secure-blocks/v1/user-roles/'
            };
        } )( props => {

....

Cependant, les indications suggèrent que cela ne sera plus pris en charge: https://github.com/WordPress/gutenberg/issues/7390#issuecomment-398667802

J'ai donc réussi à intégrer cela dans la solution:

const DEFAULT_STATE = {
userRoles: {},
};

const actions = {
    setUserRoles( userRoles ) {
        return {
            type: 'SET_USER_ROLES',
            userRoles,
        };
    },

    fetchFromAPI( path ) {
        return {
            type: 'FETCH_FROM_API',
            path,
        };
    },
};

registerStore( 'matt-watson/secure-block', {
    reducer( state = DEFAULT_STATE, action ) {

        switch ( action.type ) {
            case 'SET_USER_ROLES':
                return {
                    ...state,
                    userRoles: action.userRoles,
                };
        }

        return state;
    },

    actions,

    selectors: {
        getUserRoles( state ) {
            const { userRoles } = state;
            return userRoles;
        },
    },

    controls: {
        FETCH_FROM_API( action ) {
            return apiFetch( { path: action.path } );
        },
    },

    resolvers: {
        * getUserRoles( state ) {
            const path = '/matt-watson/secure-blocks/v1/user-roles/';
            const userRoles = yield actions.fetchFromAPI( path );
            return actions.setUserRoles( userRoles );
        },
    }

    ,
    } );

....

edit: withSelect( ( select ) => {
                                return {
                                    roles: select('matt-watson/secure-block').getUserRoles(),
                                };
                            } )( props => {

....

Maintenant, le problème est que la section "contrôles" ne se déclenche jamais. Dans la documentation, il est indiqué qu'il s'agit d'un composant opt-in, et je dois l'activer via la commande use: https://github.com/WordPress/gutenberg/tree/master/packages/data#controls

Quand j'essaye ceci, use n'est pas défini.

Voici donc ma question. Comme withAPIData a fait tout ce dont j'avais besoin de manière très simple et rapide, existe-t-il un autre type de code "instantané" que je peux utiliser ou dois-je progresser dans le magasin que je suis inscrit? Si oui, qu'est-ce que je fais mal?

Toute aide appréciée. Je vous remercie.

endpointsblock-editor
6
Matt Watson

Il convient de noter que la réponse ci-dessus est obsolète. Le magasin de données devrait maintenant ressembler à ceci:

const actions = {
    setUserRoles( userRoles ) {
        return {
            type: 'SET_USER_ROLES',
            userRoles,
        };
    },
    receiveUserRoles( path ) {
        return {
            type: 'RECEIVE_USER_ROLES',
            path,
        };
    },
};

const store = registerStore( 'matt-watson/secure-block', {
    reducer( state = { userRoles: {} }, action ) {

        switch ( action.type ) {
            case 'SET_USER_ROLES':
                return {
                    ...state,
                    userRoles: action.userRoles,
                };
        }

        return state;
    },

    actions,

    selectors: {
        receiveUserRoles( state ) {
            const { userRoles } = state;
            return userRoles;
        },
    },

    controls: {
        RECEIVE_USER_ROLES( action ) {
            return apiFetch( { path: action.path } );
        },
    },

    resolvers: {
        * receiveUserRoles( state ) {
            const userRoles = yield actions.receiveUserRoles( '/matt-watson/secure-blocks/v1/user-roles/' );
            return actions.setUserRoles( userRoles );
        },
    },
} );

J'ai mis à jour mon tutoriel: https://mwatson.co.uk/working-with-gutenberg-and-the-wordpress-rest-api/

1
Matt Watson

Je l'ai craqué!

const actions = {
    setUserRoles( userRoles ) {
        return {
            type: 'SET_USER_ROLES',
            userRoles,
        };
    },

    receiveUserRoles( path ) {
        return {
            type: 'RECEIVE_USER_ROLES',
            path,
        };
    },
};

const store = registerStore( 'matt-watson/secure-block', {
    reducer( state = { userRoles: {} }, action ) {

        switch ( action.type ) {
            case 'SET_USER_ROLES':
                return {
                    ...state,
                    userRoles: action.userRoles,
                };
            case 'RECEIVE_USER_ROLES':
                return action.userRoles;
        }

        return state;
    },

    actions,

    selectors: {
        receiveUserRoles( state ) {
            const { userRoles } = state;
            return userRoles;
        },
    },

    resolvers: {
        * receiveUserRoles( state ) {
            const userRoles = apiFetch( { path: '/matt-watson/secure-blocks/v1/user-roles/' } )
                .then( userRoles => {
                    return actions.setUserRoles( userRoles );
                } )
            yield userRoles;
        },
    },

} );

Ceci définit l'état des userRoles et renvoie les userRoles une fois résolus.

Vous pouvez alors accéder à ceci comme ceci:

....

edit: withSelect( ( select ) => {
                return {
                    roles: select('matt-watson/secure-block').receiveUserRoles(),
                };
            } )( props => {

....

3
Matt Watson