具有可变索引的深度变化状态

Question

I'm trying to follow the instructions found in Cleaner/shorter way to update nested state in Redux? [the accepted answer]

The thing is in my particular case, i have a layer that really depends on which model the user has selected up to that point. My structure:

Now in my reducer, i've tried (just want to change the favorite leaf to true):

let newStateForFavorites = {...state, models: {
            ...state.models,
            62416: {
                ...state.models.62416,
                details: {
                    ...state.models.62416.details,
                    favorited: true
                }
            }
        }};

Javascript complains. If i try to extract it to a var:

const currentModelToFav = action.payload.model_id;
let newStateForFavorites = {...state, models: {
            ...state.models,
            currentModelToFav: {
                ...state.models.currentModelToFav,
                details: {
                    ...state.models.currentModelToFav.details,
                    favorited: true
                }
            }
        }};

Javascript does not associate the const. And it errors out -currentModelToFav is undefined-

Ideas of what i'm doing wrong? Thanks!

Answer 1

If you want to use a variable as a property name you'll have to use these constructs:

{[variableName] : value}

and

{propertyName : variable[variableName]}

So, your object literal will become:

const currentModelToFav = action.payload.model_id;
let newStateForFavorites = {...state, models: {
        ...state.models,
       [currentModelToFav]: {
            ...state.models[currentModelToFav],
            details: {
                ...state.models[currentModelToFav].details,
                favorited: true
            }
        }
    }};

Answer 2

You need to use bracket notation to pull an object key using a variable:

const currentModelToFav = action.payload.model_id;
let newStateForFavorites = {
    ...state, 
    models: {
        ...state.models,
        [currentModelToFav]: {
            ...state.models[currentModelToFav],
            details: {
                ...state.models[currentModelToFav].details,
                favorited: true
            }
        }
    }
};