Wie kann ich Daten ohne Mutationsstatus anhängen

Question

Ich erstelle ein Paginierungssystem.
Der Druckminderer Teil sieht wie folgt aus:

(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 
      } 
    }, 

ich durch state.venues in Komponente laufen.
Das Problem ist, für die erste Anfrage, state.venues ist null, so dass ich es in leere Array konvertieren sollte, um Payload anhängen.
Aber mit diesem Ansatz, ich denke, ich mutiere den Zustand, der nicht erlaubt ist (empfohlen) in redux.
Also wie kann ich das ohne Zustandsänderung erreichen?

Answer 1

Eine Abhilfe hierfür wäre, state.venues an payload.data anhängen und payload.data als Antwort zurückgeben.

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

Answer 2

Um ein neues Array erstellen von Orten, die Verbreitung Operator:

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

Sie Object.assign den Zustand mutiert zu vermeiden, verwenden können:

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

(I verlassen haben die anderen Teile des Staates in Ihrem Beispiel für Klarheit).

Answer 3

Sie push mit concat

concat ersetzen kann, ist reine Funktion des Array neues Array zurück, ohne ursprünglichen Werte mutiert

(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:

wenn Sie sich immer wieder finden Object Spreads oder Object.assign in jedem Unterreduzierer/geschachtelten Zustand. Sie sollten in Betracht ziehen, Immutable.js

zu verwenden