组件中仅呈现了一部分更新状态（React / Redux）

我目前正在尝试与Redux结合使用React并遇到一个奇怪的问题：

如果状态的一个属性被更改，则视图将在组件中更新。如果另一个属性已更改，则不会更新-除非我再次更新第一个属性。我将尝试使其更加清晰：

这是商店界面：

export interface StoreState {
    counter: number;
    rectangles: Rectangle[];
}

这是减速器：

export function enthusiasm(state: StoreState, action: EnthusiasmAction): StoreState {
    switch (action.type) {
        case INCREMENT_ENTHUSIASM:
            return { ...state, counter: state.counter + 1 };
        case DECREMENT_ENTHUSIASM:
            return { ...state, counter: Math.max(1, state.counter - 1) };
        case ADD_RECTANGLE:
            let updatedRectangles: Rectangle[] = [];
            if(state.rectangles){
                updatedRectangles = state.rectangles;
            }
            updatedRectangles.unshift(action.payload);
            return {...state, rectangles: updatedRectangles};
        default:
            return state;
    }
}

这是包装组件的容器：

export function mapStateToProps(state: StoreState) {
    return {
        enthusiasmLevel: state.counter,
        rectangles:state.rectangles,
    }
}

export function mapDispatchToProps(dispatch: Dispatch<actions.EnthusiasmAction>) {
    return {
        onIncrement: () => dispatch(actions.incrementEnthusiasm()),
        onDecrement: () => dispatch(actions.decrementEnthusiasm()),
        addRectangle: () => dispatch(actions.addRectangle({posX: Math.floor(Math.random() * 100), posY: Math.floor(Math.random() * 100), id: Math.floor(Math.random() * 1000)}))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);

这是我要渲染的组件：

function Hello({ counter = 1, rectangles = [], onIncrement, onDecrement, addRectangle }: Props) {
    console.log(counter, rectangles);
    return (
        <div className="hello">
                <button onClick={onDecrement}>-</button>
                <button onClick={onIncrement}>+</button>
                <button onClick={addRectangle}>+</button>
            <Stage width={window.innerWidth} height={window.innerHeight}>
                <Layer>
                    {
                        rectangles.map((rectangle: Rectangle) => {
                            return <Rect
                                key={rectangle.id}
                                x={rectangle.posX}
                                y={rectangle.posY}
                                width={150}
                                height={150}
                                fill={'green'}
                                draggable
                                onDragStart={handleDragStart}
                                onDragEnd={handleDragEnd}
                            />
                        })
                    }
                </Layer>
            </Stage>
        </div>
    );
}

当我增加计数器时，视图将更新并记录状态。

当我调用addRectangle时，即使状态已更改，视图也不会更新（并且状态未记录在组件中）：

现在，当我再次增加计数器时，该视图最终将得到更新，并且之前添加的所有矩形都将添加到该视图中（并再次记录状态）：

由于我是新来的反应者，因此问题似乎很明显，但是我无法弄清楚我做错了什么。非常感谢您的帮助，谢谢！