So aktualisieren Sie Daten im Reduzierzustand in reagieren

Question

das ist mein Reduzierer. Ich möchte meine Daten in Reducer ohne Duplizierung basierend auf ID aktualisieren.

Kann mir bitte jemand helfen.

Dies ist mein Code:

export const dataReducer = (state= InitialState , action = null) => { 
    switch(action.type) { 
    case types.UPDATE_DATA: 
     return Object.assign({}, state, { 
    data: [ 
     ...(state.data.filter(item => (item.id !== action.payload.id))), 
     action.payload 
    ] 
    default: 
     return state; 
    } 
} 

Ich möchte id löschen: 2 und wollen neue Daten in den Zustand hinzuzufügen.

var state = { 
    data: [ 
    {id: 1, data: "Hello"}, {id: 2, data: "World"} 
    ] 
} 
var payload= {id:2, data: "SO"} 
var data1 = state.data.map(function(item){return (item.id == payload.id)? payload: item}) 

var data = {...state, 
       data: data1 
      } 
console.log(data); 

Es sollte aktualisiert werden

var state = { 
    data: [ 
    {id: 1, data: "Hello"}, {id: 3, data: "Value"} 
    ] 
} 

Answer 1

Dadurch werden die Daten aktualisieren. wenn es mit dem Objekt im Array übereinstimmt.

export const dataReducer = (state= InitialState , action = null) => { 
     switch(action.type) { 
     case types.UPDATE_DATA: 
      return Object.assign({}, state, { 
       data: state.data.map(item => { 
        return item.id === action.payload.id ? action.payload : item; 
       }); // replace matched item and returns the array 
      }); 
     default: 
      return state; 
     } 
    } 

wenn Sie bereits vorher löschen möchten, und neue Daten hinzufügen, dann können Sie dies einmal versuchen.

export const dataReducer = (state= InitialState , action = null) => { 
     switch(action.type) { 
     case types.UPDATE_DATA: 
      return Object.assign({}, state, { 
       data: state.data.filter(item => { 
        return item.id !== action.id; //delete matched data 
       }).concat(action.payload); //concats new data 
      }); 
     default: 
      return state; 
     } 
    } 

Answer 2

Nun, Sie Lösung hängt von der Art und Weise Sie Datenobjekt organisiert ist. Wenn Ihr Datenobjekt wie im Beispiel unten angegeben ist, funktioniert die Syntax und die Map des Spread-Operators gut.

var state = { 
 
    data: [ 
 
    {id: 1, data: "Hello"}, {id: 2, data: "World"} 
 
    ] 
 
} 
 
var payload= {id:2, data: "SO"} 
 
var data1 = state.data.map(function(item){return (item.id == payload.id)? payload: item}) 
 

 
var data = {...state, 
 
       data: data1 
 
      } 
 
console.log(data); 
 
    

Ihr Code

export const dataReducer = (state= InitialState , action = null) => { 
    switch(action.type) { 
    case types.UPDATE_DATA: 
     var temp = state.data.map(function(item){return (item.id == action.payload.id)? action.payload: item}) 
     return {...state, 
      data: temp 
     } 
    default: 
     return state; 
    } 
}