given my customized retailer, when I attempt to use readItems selector, I’m all the time getting default retailer state. Selector works advantageous (examined in console with wp.information.choose), nevertheless, it takes a while to catch values asynchronously I presume useSelect memoizes first returned worth which is default retailer state and doesn’t reply to retailer adjustments.
Methods to repair this?
Starting of block edit perform:
const LECTURERS_TABLE = 'tla_mit_lecturers';
export default perform Edit(props) {
const { attributes, setAttributes } = props;
const allItems = useSelect(choose => choose('REST-extra_table').readItems(LECTURERS_TABLE));
Retailer:
import apiFetch from '@wordpress/api-fetch';
import { createReduxStore, register } from '@wordpress/information';
/**
* returns desk id from desk title
* @param {} desk
*/
perform getTableId(desk) {
if (! desk) {
console.log('Desk title not provided for API');
return undefined;
}
const tableId = tableIds.indexOf(desk);
if (tableId == -1) {
console.log('Fallacious desk title provided to the API');
return undefined;
}
return tableId;
}
// objects is array of tables - merchandise['table_name'][index] is particular person merchandise
const tableIds = [
'tla_mit_lecturers',
]
const DEFAULT_STATE = {
tables: [
['default']
],
};
const actions = {
*createItem( merchandise, desk ) {
const tableId = getTableId(desk);
const retValue = yield actions.fetchFromAPI(
{
path: '/extra_table/v1/merchandise?desk=' + desk,
technique: 'POST',
information: merchandise
}
);
// retValue ought to be ID if insert is profitable
return retValue ?
{
kind: 'CREATE_ITEM',
merchandise: {ID: retValue, ...merchandise},
tableId
} :
{
kind: 'FETCH_ERROR',
error: 'unknown'
};
},
*deleteItem( ID, desk ) {
const tableId = getTableId(desk);
const retValue = yield actions.fetchFromAPI(
{
path: '/extra_table/v1/merchandise?desk=' + desk + '&ID=' + ID,
technique: 'DELETE'
}
);
return retValue ?
{
kind: 'DELETE_ITEM',
tableId,
ID
} :
{
kind: 'FETCH_ERROR',
error: 'unknown'
};
},
*updateItem( ID, merchandise, desk ) {
const tableId = getTableId(desk);
const retValue = yield actions.fetchFromAPI(
{
path: '/extra_table/v1/merchandise?desk=' + desk + '&ID=' + ID,
technique: 'PUT',
information: merchandise
}
);
return retValue ?
{
kind: 'UPDATE_ITEM',
merchandise: {ID, ...merchandise},
ID,
tableId
} :
{
kind: 'FETCH_ERROR',
error: 'unknown'
};
},
// motion to set merchandise values - hydrate in https://unfoldingneurons.com/2020/wordpress-data-store-properties-resolvers
setItem( merchandise, tableId ) {
return {
kind: 'SET_ITEM',
merchandise,
tableId
};
},
// motion to set merchandise values - hydrate in https://unfoldingneurons.com/2020/wordpress-data-store-properties-resolvers
setAllItems( objects, tableId ) {
return {
kind: 'SET_ITEMS',
objects,
tableId
};
},
fetchFromAPI( motion ) {
return {
kind: 'FETCH_FROM_API',
path: motion.path,
technique: motion.technique,
information: motion.information,
tableId: motion.tableId
};
}
};
const retailer = createReduxStore( 'REST-extra_table', {
reducer( state = DEFAULT_STATE, motion ) {
change ( motion.kind ) {
case 'CREATE_ITEM':
return {
...state,
tables: Object.assign([...state.tables], {[action.tableId]: [...state.tables[action.tableId], motion.merchandise] })
};
case 'UPDATE_ITEM':
return {
...state,
tables: Object.assign(
[...state.tables],
{[action.tableId]:
Object.assign(
state.tables[action.tableId],
{[state.tables[action.tableId].findIndex(el => el.ID === motion.ID)]: motion.merchandise}
)
})
};
case 'DELETE_ITEM':
return {
...state,
tables: Object.assign([...state.tables], {[action.tableId]: state.tables[action.tableId].filter((el) => el.ID !== motion.ID) })
};
// hydrate
case 'SET_ITEM':
return {
...state,
tables: Object.assign([...state.tables], {[action.tableId]: [...state.tables[action.tableId], motion.merchandise] })
}
case 'SET_ITEMS':
return {
...state,
tables: Object.assign([...state.tables], {[action.tableId]: [...action.items] })
}
case 'FETCH_ERROR':
console.log('AJAX fetch error, code: ' + motion.error);
return state;
}
// console.error('Desk title is just not given!!! '+motion.kind)
return state;
},
actions,
selectors: {
readItem( state, ID, desk ) {
const tableId = getTableId(desk);
if (tableId === undefined)
return undefined;
if (state.tables[tableId])
return state.tables[tableId].discover(el => el.ID == ID);
else
return undefined;
},
readItems( state, desk ) undefined;
,
},
controls: {
FETCH_FROM_API( motion ) {
return apiFetch(
{
path: motion.path,
// path: motion.path,
technique: motion.technique,
credentials: 'same-origin',
mode:'same-origin',
// headers: {
// 'Content material-Kind': 'software/json'
// },
information: motion.information
} );
},
},
resolvers: {
*readItem( ID, desk ) {
const tableId = getTableId(desk);
const merchandise = yield actions.fetchFromAPI(
{
path: '/extra_table/v1/merchandise?desk=' + desk + '&ID=' + ID,
technique: 'GET',
information: null,
tableId
}
);
return merchandise !== undefined ? actions.setItem( merchandise, tableId ) : undefined;
},
*readItems( desk ) {
const tableId = getTableId(desk);
const allItems = yield actions.fetchFromAPI({
path: '/extra_table/v1/all_items?desk=' + desk,
technique: 'GET',
information: null,
tableId
});
return allItems !== undefined ? actions.setAllItems( allItems, tableId ) : undefined;
},
},
} );
register( retailer );