Question

在我的reducer内，我的初始状态具有如下结构：

const initialState = {
    showOverlay: false,
    chosenAnimal: null,
    sliderValue: 0,
    colorValues: {
        a: null,
        c: null,
        g: null,
        t: null,
        bg: null
    }
};

我正在尝试根据action.type更新colorValues属性之一。

return {
    ...state,
    colorValues: {...state.colorValues, action.basePair: action.colorHex}
};

action.basePair给我一个解析错误，这似乎使我好像无法使用动作动态设置属性名称。例如，如果我将action.basePair更改为g，则会发生预期的行为，并且属性g的值确实会按预期更新。

但是无论如何，我可以通过操作来动态设置属性名称吗？谢谢。

编辑：我的操作代码如下：

const mapDispatchToProps = dispatch => {
  return {
    onSetColorValue: (basePair, colorHex) =>
      dispatch({ type: "SET_COLOR_VALUES", basePair: basePair, colorHex: colorHex })
  };
};

Answer 1

action.basePair给了我一个解析错误，使其看起来好像我无法使用操作动态设置属性名称。

将action.basePair包裹到[action.basePair]

return {
    ...state,
    colorValues: {...state.colorValues, [action.basePair]: action.colorHex}
};

此外，将payload键用于操作参数也是一种好习惯

dispatch({ type: "SET_COLOR_VALUES", payload: { basePair, colorHex })

减速器

return {
    ...state,
    colorValues: {
      ...state.colorValues, [action.payload.basePair]: action.payload.colorHex
    }
};

Answer 2

当使用动态值作为键时，我们可以使用方括号表示法。请看下面：

return {
    ...state,
    colorValues: {
          ...state.colorValues, 
          [action.basePair]: action.colorHex
    }
};

您可以访问下面的链接以获取更多详细信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

使用操作在Redux中更新嵌套对象的属性

2 个答案: