在 Redux 中删除没有改变状态的项目答案

【问题标题】：Remove Item Without Mutating State in Redux在 Redux 中删除没有改变状态的项目
【发布时间】：2017-05-31 21:17:10
【问题描述】：

我尝试的第一件事是：

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 中正确删除了该项目。但是，该应用程序不会再次重新渲染，因为我假设我正在改变状态（？）。（mapStateToProps 被调用，但没有新的状态）。

所以接下来我尝试了这个：

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

但我只是将已删除的项目再次添加到项目中，从而创建了重复项。

我该如何处理？

【问题讨论】：

标签： javascript ecmascript-6 redux immutable.js

【解决方案1】：

您是否尝试在deeply cloned 状态后删除该项目？

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

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

    return removeItemState;

【讨论】：

【解决方案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;
    }, {})
  };

【讨论】：

【解决方案3】：

发布更多代码（例如我的减速器设置）可能有更多帮助，但实际情况如下：

首先，这段代码是从状态中删除项目的正确方法。

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

但是，因为我的 combineReducers 使用的是 immutable 库而不是 redux-immutable，所以我的状态没有得到正确处理。这让我可以做类似state.cart.items（在mapStateToProps 中）之类的事情，而实际上我应该一直使用state.getIn(['cart', 'items'])。

改变它神奇地使删除工作。

感谢 Reactiflux Immutable Slack 频道中的 @jslatts 帮助解决这个问题！

【讨论】：