Условные функции в состоянии Redux

Question

Я построил кнопку увеличения, чтобы увеличить строку (суммирование 20 на каждое число, начиная с n 3) в path d для SVG элементов.

Кнопка инкремента делает следующее в моей уменьшения функции и она отлично работает

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 path 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 
] 

Я не уверен, я полностью понимаю вопрос, хотя.