So ersetzen Sie einen Teil des Redux-Status

Question

Ich habe einen packageReducer, der die Details packageType und packageList enthält. Sobald die Details vom Server abgerufen wurden, muss ich die ursprünglichen Statuswerte durch die neuen Werte ersetzen, die abgerufen wurden. Ich denke, im den ganzen Staat zu ersetzen, als ein Beispiel, wenn die packageLists geholt worden sind, brauche ich nur die „Paketliste“

Im Folgenden meine PackageState ist Minderer, Can

const initialState = { 
    packageList: packageListInitialState, 
    packageTypes: [{title: 'Select Package Type', value: ''}], 
}; 

export default function packageState(state = initialState, action) { 
    switch (action.type) { 
     case FETCH_PACKAGE_LIST_SUCCESS:{ 
      return Object.assign({}, state, action.payload); 
     } 

     case FETCH_PACKAGE_TYPES_SUCCESS:{ 
      return Object.assign({}, state, action.payload); 
     } 

     default: 
      return state; 
    } 
} 

I

Die Art und Weise umgesetzt haben, zu ersetzen jemand lassen Sie mich wissen, wie ich es erreichen kann?

Vielen Dank.

Answer 1

Sie sind nicht:

var state = {a: 1, b: 2, c: 3} 
 
var newData = {a: 4, b: 5} 
 
console.log(Object.assign({}, state, newData)) // { a: 4, b: 5, c: 3 }

Eigenschaften im Zielobjekt wird durch Eigenschaften in den Quellen überschrieben werden, wenn sie den gleichen Schlüssel haben. Die Eigenschaften der späteren Quellen überschreiben in ähnlicher Weise frühere.()

So, wie Ihre Nutzlast die Schlüssel enthält, die Sie wirklich aktualisieren möchten, sind Sie sicher. Sie können auch auf einfachere Art und Weise tun, wenn Sie ES6 die Verwendung spread syntax (Ich gehe davon aus Ihrer Nutzlast wie {packageList: data} aussieht):

const initialState = { 
    packageList: packageListInitialState, 
    packageTypes: [{title: 'Select Package Type', value: ''}], 
}; 

export default function packageState(state = initialState, action) { 
    switch (action.type) { 
     case FETCH_PACKAGE_LIST_SUCCESS:{ 
      return {...state, ...action.payload}; 
     } 

     case FETCH_PACKAGE_SETTINGS_SUCCESS:{ 
      return {...state, ...action.payload}; 
     } 

     default: 
      return state; 
    } 
} 

Answer 2

Unter der Annahme, dass die Aktion, die Sie versuchen, dies in nur die FETCH_PACKAGE_LIST_SUCCESS Aktion zu erreichen, und die Nutzlast ist die aktualisierte/abgerufene Liste, dann müssen Sie nur ein Objekt wie unten gezeigt zurückgeben.

Da Sie versuchen, ein Objekt zurückzugeben, bei dem nur eine der beiden Eigenschaften geändert wurde, können Sie den Wert des vorherigen Status für die unveränderte Eigenschaft verwenden und die andere Eigenschaft aktualisieren.

const initialState = { 
    packageList: packageListInitialState, 
    packageTypes: [{title: 'Select Package Type', value: ''}], 
}; 

export default function packageState(state = initialState, action) { 
    switch (action.type) { 
     case FETCH_PACKAGE_LIST_SUCCESS:{ 
      return { packageList: action.payload, packageTypes: state.packageTypes } 
     } 

     case FETCH_PACKAGE_SETTINGS_SUCCESS:{ 
      return Object.assign({}, state, action.payload); 
     } 

     default: 
      return state; 
    } 
}