在Redux中删除没有变异状态的项目

时间:2017-05-31 21:17:10

标签: javascript ecmascript-6 redux immutable.js

我尝试的第一件事是:

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

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

我该如何处理?

3 个答案:

答案 0 :(得分:0)

您是否尝试在deeply cloned州之后删除该项目?

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

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

    return removeItemState;

答案 1 :(得分:0)

如何减少?

Date       CalendarMonth ReportingMonth
2017-19-05 May           May     
2017-20-05 May           June

答案 2 :(得分:0)

发布更多代码(例如我的reducer设置)可能有更多帮助,但这是正在发生的事情:

首先,此代码是从州中删除项目的正确方法。

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

但是,因为我使用immutable库而不是redux-immutable用于我的combineReducers,所以我的状态未得到妥善处理。这允许我做state.cart.items(在mapStateToProps中)我真正应该使用state.getIn(['cart', 'items'])的地方。

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

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