Javascript Redux 更新嵌套对象属性值

Question

我有一个问题。如何更新嵌套对象中的值？

所以我的 Redux 状态看起来像：

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

};

在元素数组中，我将使用如下结构存储我的 "elements"：

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

现在我想更改样式值。也许是字体大小，也许是颜色...取决于将选择哪个属性。

我已经制作了 action creator，它为我提供了 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

总之，你要保持immutability。在您的情况下，您必须确保：

elements数组被复制。
已复制更新的元素对象。
复制更新元素的 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 };
}

Javascript Redux 更新嵌套对象属性值

Javascript Redux update nested object property value

javascript

nested

updating

store

redux

Javascript Redux 更新嵌套对象 属性 值

Javascript Redux update nested object property value

javascript

nested

updating

store

redux

Javascript Redux 更新嵌套对象属性值