React-Redux切片中payload/action用法解析求助

我正在学习一段示例代码，其中两个独立的Redux切片包含如下Reducer：

切片1的Reducer #

incrementQuantity: (state, action) => {
  const { payload: index } = action;

  if (state[index]) {
    if (state[index].name === " Auditorium Hall (Capacity:200)" && state[index].quantity >= 3) {
      return;
    }
    state[index].quantity++;
  }
}

切片2的Reducer #

toggleMealSelection: (state, action) => {
  state[action.payload].selected = !state[action.payload].selected;
},

我无法理解上述两种场景中payload/action的用法，请求解释以下两行代码的作用：

• const { payload: index } = action;
• state[action.payload].selected = !state[action.payload].selected;

第一行代码解析 #

const { payload: index } = action; 是ES6对象解构赋值的写法，核心是从Redux的action对象里提取payload属性，同时给它重命名为index方便后续使用。

Redux的action对象一般包含type（标识要执行的操作类型）和payload（传递操作所需的数据），这里的payload就是触发incrementQuantity操作时传入的目标元素下标。这行代码和const index = action.payload;功能完全一致，只是用解构+重命名的方式让代码更简洁直观。

第二行代码解析 #

state[action.payload].selected = !state[action.payload].selected; 是直接通过action.payload拿到目标元素在state中的位置（下标或键名），找到该元素的selected布尔属性后，将其值取反——即之前是true就改为false，之前是false就改为true，以此实现“选中/取消选中”的切换效果。

内容的提问来源于stack exchange，提问作者Thomas Cherian