Действие Redux занимает слишком много времени, добавьте один элемент в пустой массив - обещание не возвращено

Question

Я использую Redux для управления состоянием моего приложения реакции. Я создаю объект, затем передаю этот объект в функцию addTile, которая является моим действием.

Итак, мой action.ts выглядит так:

export function addTile(tile){
    return {
        type: "ADD_TILE", 
        payload: tile
    }
}

Мой reducer.ts выглядит так:

const reducer = (state = {
    isPanelOpen: false,
    isDiscardAllChangesOpen: false,
    tiles: [],
    tempTiles: [],
}, action) => {
    switch (action.type) {
        case "PANEL_VISIBILITY":
            state = {
                ...state,
                isPanelOpen: action.payload
            };
            break;

        case "ADD_TILE":
            state = {
                ...state,
                tiles: [...state.tiles, action.payload]
            }
            break;
    }
    return state;
    };

export default reducer;

Однако, если я попытаюсь использовать это в моем компоненте, как это:

 this.props.addTile(tile)
 alert(this.props.tiles.length)

Длина будет равна 0. Тем не менее, элемент действительно добавляется в массив, но во время выполнения оповещения длина была равна 0. Из моего чтения в документах Redux действия по умолчанию являются асинхронными (или, по крайней мере, вот так я понимаю они есть).

Я даже пытаюсь сделать это:

this.props.addTile(tile)
.then(response => { //some code})

Тогда я не могу прочитать свойство тогда неопределенного.

Есть идеи?

Answer 1

Когда вы пытаетесь проверить реквизит сразу после отправки действия, у React еще не было возможности выполнить повторную визуализацию.Дело не в том, что это «слишком долго», а в том, что ваш собственный код все еще выполняется.Таким образом, React не выполнил повторную визуализацию вашего компонента, и значение пропа остается прежним.

Ваш пример обещания будет работать только в том случае, если addTile() был thunk, который возвратил обещание.