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

【问题标题】：deep change state with variable index具有可变索引的深度变化状态
【发布时间】：2018-03-22 20:27:06
【问题描述】：

我正在尝试按照Cleaner/shorter way to update nested state in Redux? [接受的答案] 中的说明进行操作

在我的特殊情况下，我有一个层，它实际上取决于用户选择的模型。我的结构：

现在在我的减速器中，我已经尝试过（只是想将最喜欢的叶子更改为 true）：

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

Javascript 抱怨。如果我尝试将其提取到 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 不关联 const。它会出错 -currentModelToFav is undefined-

我做错了什么的想法？谢谢！

【问题讨论】：

嵌套状态一般由嵌套reducer管理（通过combineReducers结合）
@naomik 我正在这样做。这只是减速器之一，它只是存储状态的一部分。..

标签： javascript reactjs redux

【解决方案1】：

如果您想使用变量作为属性名称，您必须使用以下结构：

{[variableName] : value}

和

{propertyName : variable[variableName]}

所以，你的对象字面量将变成：

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

【讨论】：

【解决方案2】：

您需要使用bracket notation 来使用变量拉取对象键：

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

【讨论】：