Javascript Redux更新嵌套對象屬性值

Question

我有個問題。 如何在嵌套對象中更新我的值？

所以我的Redux狀態看起來像：

const initialState = {
    elements: [],
    selectedElement: {},

};

在元素數組中，我將使用如下結構存儲我的“元素”：

   {
        id: 3243,
        elemType: 'p',
        content: 'some example content',
        style: {
            fontSize: 30,
            color: "red",
            textDecoration: "underline",
            fontFamily: "Arial"
        }
    }

而現在我想改變風格的價值觀。 也許fontSize，也許是顏色......取決於選擇哪個屬性。

我已經制作了動作創建者，它給了我這些變化的id，屬性，值..但問題是我不知道如何在reducer中准確編寫代碼:(

動作造物主

   export const updateElement = (property, value, id) => {
    return {
        type: 'UPDATE_ELEMENT',
        property,
        value,
        id
    }
}

減速器

const {id, elemType, content, style, type, selected, property, value} = action;

        case 'UPDATE_ELEMENT':
                const elementForUpdate = state.elements.find(element => element.id === id);
                console.log(id, property, value);
                return ...?

Answer 1

簡而言之，你必須保持不變性 。 在您的情況下，您必須確保：

1. elements數組被復制。
2. 將復制更新的元素對象。
3. 將復制更新元素的style對象。

您可以使用單個map完成所有這些操作：

case 'UPDATE_ELEMENT': {
    const elements = state.elements.map(el => {
        if (el.id === id) {
            const style = { ...el.style, [property]: value };
            return { ...el, style };
        } else {
            return el;
        }
    });

    return { ...state, elements };
}