从状态中删除键（Redux Reducer）

Question

我有一个在Redux中的状态，目前呈现如下：

点击之前：

{0: {
    open: false,
    negation: false,
    close: false
    },
1: {
    open: false,
    negation: false,
    close: false,
    bool: "and"
    }
}

点击后：

{0: {
    open: false,
    negation: false,
    close: false
    },
1: {}
}

我想要完全删除键1（通常是[action.id]）。

目前在reducer中的情况有：

case 'HANDLE_INCREASE_CHANGE':
  return {
    ...state,
    index: state.index + 1,
    [state.index + 1]: {
      open:false,
      negation: false,
      close: false,
      bool: 'and'
    }
  }
case 'HANDLE_DECREASE_CHANGE':
  return {
    ...state,
    index: state.index - 1,
    [state.index]: {}
  }

错误的部分是：

[state.index]: {}

你能帮我吗？谢谢！

- SkuPak

---

这个回答解决了你的问题吗？如何从JavaScript对象中删除属性？ - Brian Thompson

Answer 1

你只需调用delete state[action.id]即可。然而，在Reducer函数中，你应该先复制一份状态，从复制的状态中删除，然后返回复制后的版本。

case: 'HANDLE_DECREASE_CHANGE':
  const next = {...state}
  delete next[action.id]
  return next

- Matt Sugden

---

它已经是一个副本了，所以你可以直接返回 next 而不用解构创建第三个对象，但回答很好。 - Brian Thompson

没错，你不想改变 state，但是通过 const next = {...state} 你已经复制了它。所以我想说的是，从技术上讲，你可以直接返回 next。 - Brian Thompson

@BrianThompson 你说得完全正确。我已经相应地更新了我的答案。在reducers中总是写 return {...} 是一种习惯性的行为。实际上，我误读了你原始的评论，这就是为什么我删除了我的回复，因为它毫无意义。 - Matt Sugden

这违反了no-case-declarations ESLint规则。 - Audiopolis

Answer 2

您正在对状态对象设置新属性，要删除它们，您需要使用delete。请记得先复制当前状态。

case: 'HANDLE_DECREASE_CHANGE':
  let nextState = {...state}
  delete nextState[propToDelete]
  return nextState

我认为最好采用元素数组，而不是直接将属性设置到状态对象中。

const iniitalState = {
 index: 0,
 elements: []
}

case 'HANDLE_INCREASE_CHANGE': {
  state.elements.push({
    open:false,
    negation: false,
    close: false,
    bool: 'and'
  })
  return {...state, index: state.index + 1, elements: [...state.elements] }
}
case 'HANDLE_DECREASE_CHANGE': {
  let newElements = [...state.elements]
  newElements.splice(action.indexToRemove, 1) // Removes Element

  return {...state, index: state.index - 1, elements: [...newElements] }
}

- Lucas Fabre

Answer 3

删除你想要移除的键：

const resultingState = {...state, index: state.index - 1}
delete resultingState[state.index]
return resultingState

或者使用剩余参数来提取它：

const {...extractedState, [state.index]: ignored} = state
return {...extractedState, index: state.index - 1}

- Badashi