如何追加數據而不發生變異狀態

Question

我正在創建分頁系統。
減速器部分看起來是這樣的：

(state, payload)=> { 
      if (state.venues === null) { 
        state.venues = []; 
      } 
      state.venues.push.apply(state.venues, payload.data) 
      return { 
        ...state, 
        isRequesting: false, 
        hasVenues: true, 
        venues: state.venues, 
        hasMessage: false 
      } 
    }, 

我通過state.venues在組件迭代。
問題是，對於第一個請求，state.venues爲空，所以我應該將其轉換爲空數組以將有效載荷附加到它。
但是用這種方法，我認爲我改變了在redux中不允許的（推薦）狀態。
那麼我怎樣才能做到這一點沒有狀態變異？

Answer 1

對此的一種解決方法是將state.venues附加到payload.data並返回payload.data作爲響應。

  payload.data.push.apply(payload.data, state.venues) 
      return { 
        ...state, 
        isRequesting: false, 
        hasVenues: true, 
        venues: payload.data, 
        hasMessage: false 
      } 

Answer 2

要創建新陣列的場地使用擴操作：

var newVenues = [ 
    ...state.venues, 
    'Tokyo' 
]; 

您可以使用Object.assign避免變異狀態：

var newState = Object.assign({}, state, { venues: newVenues }); 

（我已經離開爲了清楚起見，在你的例子中出於該州的其他部分）。

Answer 3

你可以用concat

CONCAT代替push是Array的純函數沒有變異的原始值

(state, payload) => { 
    if (state.venues === null) { 
     state.venues = []; 
    } 
    const newVenues = state.venues.concat(payload.data) 
    return { 
     ...state, 
     isRequesting: false, 
     hasVenues: true, 
     venues: newVenues, 
     hasMessage: false 
    } 
    } 

BTW返回新的數組：

如果你發現自己反覆使用對象蔓延或Object.assign在每個子縮減器/嵌套狀態。你應該考慮使用Immutable.js