web-dev-qa-db-ja.com

グーテンベルクでは、with APIDataは廃止予定であるため、カスタムエンドポイントに対して非同期呼び出し出しを行うにはどうすればよいですか。

私は自分のプラグインでこれを機能させています、そしてすべては世界とうまくいっています：

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は私が必要とするすべてのことを非常に素早く簡単な方法で行ったので、私が使用できる代替の「ドロップイン」コードのコードがありますか、それとも登録しているストアを進める必要がありますか？もしそうなら、私は何を間違っているのですか？

任意の助けをいただければ幸いです。ありがとうございました。

endpointsblock-editor
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