It’s worth noting that the answer above is out of date. The data store should now look like this:
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 );
},
},
} );
I’ve updated my tutorial: https://mwatson.co.uk/working-with-gutenberg-and-the-wordpress-rest-api/