it-swarm.com.ru

В Гутенберге теперь, когда withAPIData устарела, как я могу сделать асинхронный вызов пользовательской конечной точки?

У меня это работает в моем плагине, и все хорошо с миром:

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

....

Однако руководство предполагает, что это больше не будет поддерживаться в будущем: https://github.com/WordPress/gutenberg/issues/7390#issuecomment-398667802

Так что мне удалось включить это в решение:

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 => {

....

Теперь проблема в том, что секция "управления" никогда не срабатывает. В документации говорится, что это дополнительный компонент, и мне нужно включить его с помощью команды use: https://github.com/WordPress/gutenberg/tree/master/packages/data#controls

Когда я пытаюсь это сделать, use не определен.

Итак, мой вопрос заключается в следующем. Поскольку withAPIData сделал все, что мне было нужно, очень быстро и легко, есть ли альтернативный фрагмент кода, который я могу использовать, или мне нужно продвигаться в магазине, который я регистрирую? Если так, что я делаю не так?

Любая помощь приветствуется. Спасибо.

6
Matt Watson

Стоит отметить, что ответ выше устарел. Хранилище данных теперь должно выглядеть так:

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 );
        },
    },
} );

Я обновил свой учебник: https://mwatson.co.uk/working-with-gutenberg-and-the-wordpress-rest-api/

1
Matt Watson

Я взломал это!

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;
        },
    },

} );

Это устанавливает состояние userRoles и возвращает userRoles после разрешения.

Вы можете получить доступ к этому следующим образом:

....

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

....

3
Matt Watson