如何在Redux状态的嵌套数组中仅更新一个值？

Question

考虑以下状态：

const initState = {
    id: {
        data: null, 
        isFetching: false, 
        fetchingError: null
    },  
    bookmarks: {
        IDs: {
            news: [], 
            opps: [],
            posts: []           
        },
        data: {
            news: [], 
            opps: [],
            posts: []
        },      
        isFetching: false, 
        fetchingError: null
    },
    role: null,
    membership: null,   
}

如何更新只是posts的阵列ÌDs的数组bookmarks数组？ 我尝试了这个：

case 'SET_USER_BOOKMARKED_POSTS':
    return {
        ...state, 
        bookmarks: {
            IDs: {
                posts: action.payload
            }
        }
    }

但是，当我将状态记录到控制台时， IDs数组仅包含posts ，而opps和news数组不再存在。

Answer 1

您还需要对state.bookmarks.IDs使用扩展运算符，因为当在扩展运算符之后指定键时，键的值将被覆盖。

case 'SET_USER_BOOKMARKED_POSTS':
return {
    ...state, 
    bookmarks: {
        ...state.bookmarks
        IDs: {
            ...state.bookmarks.IDs,
            posts: action.payload
        },   
    }
}

Answer 2

您需要破坏所有内部结构：

case 'SET_USER_BOOKMARKED_POSTS':
    return {
        ...state, 
        bookmarks: {
            ...state.bookmarks,
            IDs: {
                ...state.bookmarks.IDs,
                posts: action.payload
            }
        }
    }

但这不是很方便，最好用lodash合并

Answer 3

我们这样做的方法是使用Object.assign基本上指向并更新redux状态的字段的非变异方法。 就像是：

return Object.assign({}, state.bookmarks, {
    IDs: action.payload,
});

这将确保您不改变状态，并返回新的书签。 您可以根据需要调整此值以返回整个状态，这取决于您是否需要更新中的其他数据。