javascript - Redux 状态下的条件函数

Question

我构建了一个递增按钮来增加 SVG 元素的 path d 中的字符串(从 n 3 开始的每个数字相加 20)。

增量按钮在我的reduce函数中执行以下操作并且工作正常

export default function svgs(state = [], action) {
  switch(action.type) {
      case 'INCREMENT_COORDINATES' :
        console.log("incrementing coordinaates");
        const a = action.index;
        let string = state[a].d;
        let array = string.split(" ");
        let max = array.length;
        let last = max - 2;
        let i = (state[a].index || 3) + 1;
        if ( i === last ) i = 3;
        if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 20;
        return [
          ...state.slice(0,a), // before the one we are updating
          {...state[a], d: array.join(' '), index: i}, // updating
          ...state.slice(a + 1), // after the one we are updating
        ]
      default:
        return state;
  }
}

我的困难是，在 SVG 组件中，路径 d 也可以使用不同的数据对象

例如

除了

path d={svg.d}

它还可以有

path d={svg.d2}
path d={svg.d3}

查看代码片段示例

<svg>
  <svg>
    <g>
      <path d={svg.d}></path>
    </g>
  </svg>
  <g>
    <path d={svg.d2}></path>
    <path d={svg.d3}></path>
  </g>
</svg>

如何修改 redux 函数以仅增加特定 SVG 元素的一个或多个字符串

我有一些 svg 元素，它们可以包含所有 svg 对象(svg.d、svg.d2、svg.d3)，或只有两个(svg.d、svg.d2 )或一个( svg.d )。

例如，如果我修改上面的 redux 函数，它可能是这样的

let string = state[a].d || state[a].d2 || state[a].d3;

然后

return [
  ...state.slice(0,a), // before the one we are updating
  {...state[a], d: array.join(' '), index: i, d2: array.join(' '), index: i, d3: array.join(' '), index: i }, // updating
  ...state.slice(a + 1), // after the one we are updating
]

这里唯一的问题是，如果其中一个 SVG 元素在 svg.d、svg.d2、svg.d3 之间有一个或两个空对象，单击操作后，它会获得修改后的字符串的相同值，但我不希望这样。

希望解释清楚，如果有必要我会设置一个jsBin。

Answer 1

您可以映射 svg 对象并单独转换它们(如果存在):

const aObj = state[a];
const [d, d2, d3] = [aObj.d, aObj.d2, aObj.d3].map((string) => {
    if(!string) return null;
    let array = string.split(" ");
    let max = array.length;
    let last = max - 2;
    let i = (state[a].index || 3) + 1;
    if ( i === last ) i = 3;
    if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 20;
    return array.join(" ");
  });


return [
  ...state.slice(0,a), // before the one we are updating
  {...aObj, d, d2, d3}, // updating
  ...state.slice(a + 1), // after the one we are updating
]

不过我不确定我是否完全理解这个问题。