Replace array Element mit einem anderen, ohne mutierend Zustand

Dies ist, wie Beispiel von meinem Zustand aussieht:

const INITIAL_STATE = {
 contents: [ {}, {}, {}, etc.. ],
 meta: {}
}

Ich muss in der Lage sein und irgendwie ersetzen, ein Element im Inhalt von array-wissen, dessen index habe ich versucht:

      return {
        ...state,
        contents: [
          ...state.contents[action.meta.index],
          {
            content_type: 7,
            content_body: {
              album_artwork_url: action.payload.data.album.images[1].url,
              preview_url: action.payload.data.preview_url,
              title: action.payload.data.name,
              subtitle: action.payload.data.artists[0].name,
              spotify_link: action.payload.data.external_urls.spotify
            }
          }
        ]
      }

wo action.meta.index ist der index des array-Elements möchte ich ersetzen mit einem anderen Inhalt-Objekt, aber ich glaube, dass dies nur ersetzt ganze Reihe zu diesem einen Objekt, ich bin vorbei. Ich habe auch daran gedacht, mit .splice() aber das wäre nur mutieren array?

  • Werfen Sie auch einen Blick auf Reagieren die Unveränderlichkeit Helfer - facebook.github.io/react/docs/update.html Sie sind nicht so schwer zu bedienen, wie Sie Aussehen und wirklich lässt sich der code leichter zu Lesen.
InformationsquelleAutor Ilja | 2016-02-12
  1. 5

    Splice mutieren das array, das Sie verwenden müssen Slice . Und Sie müssen auch concat die in Scheiben geschnittenen Stück . 

    return Object.assign({}, state,  {
         contents:
          state.contents.slice(0,action.meta.index)
          .concat([{
            content_type: 7,
            content_body: {
              album_artwork_url: action.payload.data.album.images[1].url,
              preview_url: action.payload.data.preview_url,
              title: action.payload.data.name,
              subtitle: action.payload.data.artists[0].name,
              spotify_link: action.payload.data.external_urls.spotify
            }
          }])
          .concat(state.contents.slice(action.meta.index + 1))
  }
    • Bearbeitet .Ich denke, dass Sie Sie zu senden versuchen, den ganzen Staat , mit Inhalt Wert geändert. Also, verwenden Sie Objekt.zuweisen, schicken, neuen Zustand , und wenn es mehrere Quellen für dieselbe Taste Objekt.ordnen Sie die Letzte Quelle gewinnt .
    InformationsquelleAutor sapy
  2. 16

    Beachten Sie, dass Array.prototype.map() (docs) hat nicht mutieren die original-array, so dass es bietet eine andere option:

     const INITIAL_STATE = {
   contents: [ {}, {}, {}, etc.. ],
   meta: {}
 }

 //Assuming this action object design
 {
   type: MY_ACTION,
   data: {
     //new content to replace
   },
   meta: {
     index: /* the array index in state */,
   }
 }

 function myReducer(state = INITIAL_STATE, action) {
   switch (action.type) {
     case MY_ACTION: 
       return {
         ...state,
         //optional 2nd arg in callback is the array index
         contents: state.contents.map((content, index) => {
           if (index === action.meta.index) {
             return action.data
           }

           return content
         })
       }
   }
 }
    • Definitiv die eleganteste Lösung.
    InformationsquelleAutor Sia
  3. 12

    Einfach auf zu bauen @sapy die Antwort, die richtig ist. Ich wollte Ihnen zeigen, ein weiteres Beispiel zum ändern einer Eigenschaft eines Objekts innerhalb einer Reihe in der Redux ohne mutierend den Staat.

    Hatte ich ein array von orders in meinem Zustand. Jeder order ist ein Objekt mit vielen Eigenschaften und Werte. Ich jedoch wollte nur zum ändern der note Eigenschaft. So ein Ding wie dieses

    let orders = [order1_Obj, order2_obj, order3_obj, order4_obj];

    wo zum Beispiel order3_obj = {note: '', total: 50.50, items: 4, deliverDate: '07/26/2016'};

    So, in meinen Druckminderer hatte ich den folgenden code:

    return Object.assign({}, state,
{
  orders: 
    state.orders.slice(0, action.index)
    .concat([{
      ...state.orders[action.index],
      notes: action.notes 
    }])
    .concat(state.orders.slice(action.index + 1))
   })

    Also im Grunde genommen, tun Sie den folgenden:

    1) Scheibe aus dem array, bevor order3_obj so [order1_Obj, order2_obj]

    2) Concat (ich.e add in) der bearbeiteten order3_obj durch die Verwendung der drei dot ... verbreiten Betreiber und die Besondere Eigenschaft, die Sie ändern möchten (ich.e note)

    3) Concat in der restlichen Aufträge array mit .concat und .slice am Ende .concat(state.orders.slice(action.index + 1)) was alles nach order3_obj (in diesem Fall order4_obj ist die einzige linke).

    • Vielen, vielen Dank! Super hilfreiche Erklärung
    • dies half mir so viel. ty für diese
    InformationsquelleAutor HussienK
Schreibe einen Kommentar