Javascript Redux update nested object property value

Question

I have a question. How can I update my value in my nested object ?

so my Redux state looks like:

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

};

In elements array I will storage my "elements" with structure like this:

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

And now I'd like change values in style. Maybe fontSize, maybe color... depends which property will be selected.

I've made action creator which give me id, property, value for these changes.. but the problem is that I don't know how to exactly write code in reducer :(

Action Creator

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

Reducer

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 ...?

Oro · Accepted Answer · 2018-02-18 15:47:58Z

3

In short, you have to maintain immutability. In your case, you have to make sure that:

The elements array is copied.
The updated element object is copied.
The style object of the updated element is copied.

You can accomplish all of these with a single 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 };
}

answered Feb 18, 2018 at 15:47

Oro

1,86716 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Szach Over a year ago

Amazing. This is exactly what I looked for :) Thank you :) and thank you for advice ;)

Collectives™ on Stack Overflow

Javascript Redux update nested object property value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related