Considérez l'état suivant:

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,   
}

Comment mettre à jour uniquement le tableau posts dans le tableau ÌDs dans le tableau bookmarks? J'ai essayé ceci:

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

Mais lorsque je connecte l'état à la console, le tableau IDs ne contient alors que posts, tandis que les tableaux opps et news ne sont plus là.

1
grazianodev 12 avril 2018 à 19:37

3 réponses

Meilleure réponse

Vous devez détruire toute la structure interne:

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

Mais ce n'est pas très pratique, il vaut mieux utiliser la fusion lodash

2
ilsotov 12 avril 2018 à 16:41

Vous devez également utiliser l'opérateur d'étalement pour state.bookmarks.IDs car lorsque spécifie les clés après l'opérateur d'étalement, la valeur des clés est écrasée.

case 'SET_USER_BOOKMARKED_POSTS':
return {
    ...state, 
    bookmarks: {
        ...state.bookmarks
        IDs: {
            ...state.bookmarks.IDs,
            posts: action.payload
        },   
    }
}
2
Abhishek Gupta 12 avril 2018 à 16:41

La façon dont nous le faisons est une méthode non mutative utilisant Object.assign pour pointer et mettre à jour un champ à l'état redux. Quelque chose comme:

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

Cela garantira que vous ne modifiez pas l'état et renvoie les nouveaux signets. Vous pouvez l'ajuster pour renvoyer l'état entier si vous le souhaitez, cela dépend si vous avez besoin des autres données sur la mise à jour.

0
Sterling Archer 12 avril 2018 à 16:44