时间戳

首页 > 解决方案 > Redux 操作花费太长时间将一项添加到空数组 - 没有返回承诺

reactjs - Redux 操作花费太长时间将一项添加到空数组 - 没有返回承诺

问题描述

我正在使用 Redux 来管理我的 react 应用程序的状态。我正在创建一个对象，然后将此对象传递给 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})

然后我无法读取未定义的属性。

有任何想法吗？

标签： reactjsredux

解决方案

当你在 dispatch 一个 action 后尝试检查 prop 时，React 还没有机会重新渲染。不是“花费太长时间”，而是您自己的代码仍在执行。所以，React 并没有重新渲染你的组件，prop 值还是一样的。

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

推荐阅读