如何在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,
});

這將確保您不改變狀態，並返回新的書簽。 您可以根據需要調整此值以返回整個狀態，這取決於您是否需要更新中的其他數據。