2017-02-22 2 views
1

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.Bedingte Funktionen im Redux-Zustand

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.

+0

Was meinen Sie mit dem folgenden: "... wenn eines der Svg-Elemente ein oder zwei leere Objekte zwischen' svg.d', 'svg.d2',' svg.d3' ... "hat? –

+0

Was hast du probiert? Ihr Code ist fast der gleiche wie [Antwort] (http://stackoverflow.com/questions/42179256/incrementing-click-redux-function-in-an-array/) in Ihrer vorherigen Frage (nur Variable 'last' hinzugefügt) – barbsan

+0

Setup der JsBin –

Antwort

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.

+0

Antwort fast perfekt, Sie verstanden sich gut, das einzige Problem hier ist, dass die Zuordnung der Zeichenfolge das Element dupliziert – Koala7

+0

@ Koala7 Duplikate welches Element? – SimpleJ

+0

Erzeugt ein neues Element mit der modifizierten Zeichenfolge, anstatt das Element selbst zu ändern. Sehen Sie das Video http://www.fastswf.com/IdNwlBo – Koala7