Updating multilevel nested object with redux/toolkit

Question

I am kinda still learning react with redux and trying to update a multilevel object with redux/toolkit. I know how to do this with single objects, but I am unsure how to do this with multilevel objects.

So here is what I have:

import { createSlice } from '@reduxjs/toolkit';

const initialBannerContentState = {
    bannerContent: {
        bg: {
            id: 0,
            type: 'image',
            url: '',
            height: 0,
            width: 0,
            x: 0,
            y: 0,
            draggable: true,
            deleted: false
        },
        partnerlogo: {
            id: 0,
            type: 'image',
            url: '',
            height: 0,
            width: 0,
            x: 0,
            y: 0,
            draggable: true,
            deleted: false
        }
    }
};

const bannerContentSlice = createSlice({
    name: 'bannercontent',
    initialState: initialBannerContentState,
    reducers: {
        // actions go here
    }
});

export const BannerContentActions = bannerContentSlice.actions;

export default bannerContentSlice.reducer;

Update question What I understand with single objects, is that it looks like the following:

const initialBannerContentState = {
    id: 1,
    type: 'image',
    .....
};

And with multilevel objects I understand (this is also what I currently have):

const initialBannerContentState = [
    {
        id: 1,
        type: 'image',
        .....
    },
    {
        id: 2,
        type: 'text',
        .....
    }
];

Answer 1

You can do this as you did with the single objects.

Here is the code snippets on stackblitz.

https://stackblitz.com/edit/redux-toolkit-dlnmev?file=src%2FApp.js

I hope this is helpful.