在Redux中刪除項目而不更改狀態

Question

我嘗試的第一件事是：

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)]);
}

當控制台記錄上面的deleteIn時，它實際上確實正確地從Map中刪除了該項目。 但是，該應用程序不會再次重新渲染，因為我認為我正在改變state（？）。 （mapStateToProps被調用，但沒有新狀態）。

所以接下來我嘗試了這個：

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

但是我只是將刪除的項目再次添加到項目中，從而創建了重復項。

我該如何處理？

Answer 1

深入克隆狀態后，您是否嘗試過刪除項目？

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

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

    return removeItemState;

Answer 2

如何減少？

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;
    }, {})
  };

Answer 3

發布更多代碼（例如我的reducers設置） 可能會有所幫助，但這是怎么回事：

首先，此代碼是從狀態中刪除項目的正確方法。

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

但是，由於我使用的是immutable庫，而不是我的CombineReducers使用redux-immutable ，因此無法正確處理我的狀態。 這使我可以做state.cart.items類的state.cart.items （在mapStateToProps中），在這里我本應該使用state.getIn(['cart', 'items']) 。

神奇地改變它使刪除工作。

感謝Reactiflux不可變Slack頻道中的@jslatts來幫助您解決這個問題！