Sans Mutating Etat Redux

Question

La première chose que j'ai essayé était le suivant:

const initialState = { 
    items: {}, 
    showCart: false, 
    showCheckout: false, 
    userID: null 
}; 

export default function reducer(state=Immutable.fromJS(initialState), action) { 
    case 'REMOVE_FROM_CART': 
    return state.deleteIn(['items', String(action.id)]); 
} 

Lorsque la console connecter l'deleteIn ci-dessus, il ne supprime en fait l'élément de la carte correctement. Cependant, l'application ne s'affiche pas à nouveau car je suppose que je mute l'état (?). (mapStateToProps est appelé, mais pas de nouvel état).

Alors après je l'ai ceci:

case 'REMOVE_FROM_CART': 
    const removed = state.deleteIn(['items', String(action.id)]); 
    const removeItemState = { 
    ...state, 
    items: { removed } 
    } 
    return state.mergeDeep(removeItemState); 

Mais je suis juste ajouter l'élément supprimé à nouveau les éléments, la création d'une duplication.

Comment puis-je gérer cela?

Answer 1

affichage plus de code (comme ma configuration de réducteurs) peut ont aidé plus, mais voici ce qui se passait:

En premier lieu, ce code a été la bonne façon de supprimer l'élément de l'état .

return state.deleteIn(['items', String(action.id)]); 

Cependant, parce que j'utilisais la bibliothèque immutable et non redux-immutable pour mes combineReducers, mon état n'a pas été correctement traitée. Cela m'a permis de faire des choses comme state.cart.items (dans mapStateToProps) où j'aurais vraiment dû utiliser state.getIn(['cart', 'items']).

Modification magique qui a fait le travail de suppression.

Merci à @jslatts dans le canal Reactiflux Immutable Slack pour vous aider à comprendre cela!

Answer 2

Avez-vous essayé d'enlever l'article après que vous ayez deeply cloned l'état?

case 'REMOVE_FROM_CART': 
    const removeItemState = { 
     ...state 
     items: { 
      ...state.items 
     } 
    }; 

    delete removeItemState.items[String(action.id)]; 

    return removeItemState; 

Answer 3

Que diriez-vous réduire?

case 'REMOVE_FROM_CART': 
    return { 
    ...state, 
    items: Object.keys(state.items).reduce((acc, curr) => { 
     if (curr !== action.id) acc[curr] = state.items[curr]; 
     return acc; 
    }, {}) 
    };