2017-12-17 1 views
3

Ich habe einen Reducer und versuche 1 Artikel im Statearray zu aktualisieren. Es sieht so aus:Wie aktualisiert man 1 Element im Zustand mit Redux?

const players = (state = [{name:'John',nrGames:0,nrWins:0},{name:'Ed',nrGames:0,nrWins:0},{name:'Mark',nrGames:0,nrWins:0}], action) => { 
    switch (action.type) { 

     case 'ADD_PLAYER': 
      return [...state,{name:action.name}] 

     case 'ADD_WIN': 
      return [...state, action.name == 'bla' ? {nrWins:10} : {} ] 

     default: 
      return state; 
    } 
}; 

export default players; 

Ich versuche herauszufinden, wie Sie die nrWins-Eigenschaft für einen bestimmten Namen ändern. Also, wenn ADD_WIN mit name = 'John' ausgelöst wird, wie nur das John-Objekt zu aktualisieren und die nrWins -Eigenschaft mit 1 und nicht die anderen Objekte in dem Zustand nach oben?

Antwort

3

Sie müssen über die Spieler .map und wenn Sie die eine Aktion finden, beschreiben Sie einen neuen Spieler mit der aktualisierten Anzahl der Gewinne. Zur besseren Lesbarkeit habe ich eine Funktion namens incWinForPlayer erstellt.

const incWinForPlayer = (name) => (player) => { 
    return player.name === name 
    ? {...player, nrWins: player.nrWins + 1} 
    : player 
}; 

const players = (state, action) => { 
    switch (action.type) { 
    case 'ADD_PLAYER': 
     return [...state, {name: action.name}] 
    case 'ADD_WIN': 
     return state.map(incWinForPlayer(action.name)); 
    default: 
     return state; 
    } 
}; 

export default players; 
0

Der „empfehlenswert“ Ansatz ist es, Scheibe das alte Array bis zu der neuen Sache, concat es mit dem einem modifizierten und verketten es mit dem Rest des Feldes.

Stellen Sie sicher, dass Ihre Aktion das gesamte neue Element und den Index, den Sie ändern möchten, zurückgibt.

Etwas wie:

case 'ADD_WIN': 
    return [ 
    ...array.slice(0, action.index), 
    action.item, 
    ...array.slice(action.index) 
    ]; 

Edit 1: Quelle https://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html#inserting-and-removing-items-in-arrays

Verwandte Themen