如何替換部分Redux狀態

我有一個packageReducer，它保持packageType和packageList相關的細節。一旦從服務器獲取細節信息，我需要用獲取的新值替換初始狀態值。舉個例子，如果packageLists都被取出我只需要更換「packageList」

下面是我的PackageState減速，如何替換部分Redux狀態

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

我已經實現了我想我更換整個狀態的方式，可有人讓我知道我該如何實現它？

謝謝。

來源

2017-06-26 Anna

你能在actionCreators添加到這個問題？這將有助於瞭解action.payload的內容 –

你是不是：在目標對象

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 }

屬性將在源屬性被覆蓋，如果他們有相同的密鑰。後來的消息來源的屬性將同樣覆蓋更早的屬性。（docs）

因此，只要您的有效負載包含您真正想要更新的密鑰，就很安全。你也可以做一個簡單的方法，如果你使用ES6的spread syntax（我假設你的有效載荷看起來像{packageList: data}）：

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

來源

2017-06-26 15:51:33 martinarroyo

謝謝你的回答，如果我要再次設置初始狀態，我應該像下面這樣做嗎？ 'return {... state，packageList：packageListInitialState};' – Anna

你的意思是默認情況下？不，你需要有一個特殊的例子返回它，說'case RESET_PACKAGE_INFORMATION：return initialState;' – martinarroyo

不，我的意思是，在保存設置後，我需要將packageTypes設置爲默認狀態。在你的示例中，在RESET_PACKAGE_INFORMATION中我需要將packageType設置爲初始狀態，並將packageList保留爲最新值 – Anna

假設您正在嘗試實現此操作的操作僅爲FETCH_PACKAGE_LIST_SUCCESS操作，並且有效負載是更新/提取的列表，那麼您只需返回一個對象，如下所示。

由於您試圖僅返回兩個屬性中僅有一個屬性發生更改的對象，因此您可以對未更改的屬性使用先前狀態的值並更新另一個屬性。

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

來源

2017-06-26 15:51:22

如何替換部分Redux狀態

回答

相關問題