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尚未重新渲染您的组件，并且prop值仍然相同。

您的诺言示例仅在addTile()是返回诺言的重击时有效。

耗时过长的Redux动作将一项添加到空数组-未返回承诺

1 个答案: