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 merge

Answer 3

我们这样做的方法是使用Object.assign基本指向和更新redux状态字段的非变异方法。类似的东西：

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

这将确保您不会改变状态，并返回新的书签。如果您愿意，可以调整此选项以返回整个州，这取决于您是否需要更新中的其他数据。

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

3 个答案: