Bedingte Funktionen im Redux-Zustand

Question

Ich habe eine Inkrementierungstaste eingebaut, um die Zeichenfolge (summierend 20 zu jeder Zahl beginnend mit n 3) in path d für SVG Elemente zu erhöhen.

Die Inkrement-Taste führt folgende in meiner Funktion reduzieren und es funktioniert gut

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; 
    } 
} 

Mein Kampf ist, dass die path d in der SVG-Komponente auch verschiedene Datenobjekte

Zum Beispiel

verbrauchen kann

außer

path d={svg.d} 

kann es auch

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

Siehe das Snippet Beispiel

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

Wie kann ich meine redux Funktion zu erhöhen, nur die Saite oder Saiten dieses speziellen SVG Element

ändern habe ich einige svg Elemente, die alle Svg-Objekte haben können (svg.d, svg.d2, svg.d3), oder nur zwei (svg.d, svg.d2) oder eins (svg.d).

Zum Beispiel, wenn ich über diese redux Funktion ändern, kann es sein, so etwas wie

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

und dann

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 
] 

Das einzige hier Problem ist, dass, wenn einer der SVG-Elemente hat eine oder zwei leere Objekte zwischen svg.d, svg.d2, svg.d3, nach der Click-Aktion erhält es die gleichen Werte der geänderten Zeichenfolge, und das will ich nicht.

Hope Erklärung ist klar, ich werde ein jsBin einrichten, wenn es notwendig ist.

Answer 1

Sie könnten die SVG-Objekte abbilden über und wandeln sie einzeln (falls vorhanden):

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 
] 

Ich bin mir nicht sicher, ob ich allerdings die Frage vollständig verstehen.