Site icon Hip-Hop Website Design and Development

useSelect in block Edit all the time returns default retailer worth

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