Richtige Weg, um update-state in der redux-Reduzierer

Ich bin ein Neuling in redux und es6-syntax. Ich meine die app mit den offiziellen redux tutorial, und mit diesem Beispiel.

Gibt es JS-snippet unten. Meine Punkt - zu definieren REQUEST_POST_BODY und RECEIVE_POST_BODY Fällen, in Beiträge reducer.
Main-schwer zu finden-und update-Rechte-Objekt im Speicher.

Ich versuche es mal mit code von Beispiel:

  return Object.assign({}, state, {
    [action.subreddit]: posts(state[action.subreddit], action)
  })

Aber es verwendet einfache Reihe von posts. Es ist nicht erforderlich, zu Recht finde post by id.

Hier mein code:

  const initialState = {
    items: [{id:3, title: '1984', isFetching:false}, {id:6, title: 'Mouse', isFetching:false}]
  }

  //Reducer for posts store
  export default function posts(state = initialState, action) {
    switch (action.type) {
    case REQUEST_POST_BODY:
      //here I need to set post.isFetching => true
    case RECEIVE_POST_BODY:
      //here I need to set post.isFetching => false and post.body => action.body
    default:
      return state;
    }
  }

  function requestPostBody(id) {
    return {
      type: REQUEST_POST_BODY,
      id
    };
  }

  function receivePostBody(id, body_from_server) {
    return {
      type: RECEIVE_POST_BODY,
      id,
      body: body_from_server
    };
  }

  dispatch(requestPostBody(3));
  dispatch(receivePostBody(3, {id:3, body: 'blablabla'}));

Wenn die ids sind immer einzigartig sein, Sie könnten besser machen items ein Objekt statt einem array. Dann können Sie finden, indem Sie id nur mit items[id].

InformationsquelleAutor Max Vorozhcov | 2016-03-16

Mit Arrays

Wenn Sie es vorziehen, zu bleiben, arrays, dann Sie schreiben können, einen Druckminderer, die nur greift einzelne post Objekte.

export default function reducePost(post, action) {
  if(post.id !== action.id) return post;

  switch(action.type) {
  case REQUEST_POST_BODY:
    return Object.assign({}, post, { isFetching: true });
  case RECEIVE_POST_BODY:
    return Object.assign({}, post, { isFetching: false, body: action.body });
  default:
    return post;
}

Ihre Wurzel reducer werden würde:

export default function posts(state = initialState, action) {
  return state.map(post => reducePost(post, action);
}

Sind wir nur mit unserer neuen reducer über jedem post in der Liste, um wieder eine aktualisierte Reihe von posts. In diesem Fall wird die unique-id wird sichergestellt, dass nur ein Element geändert werden.

Mit Objekten

Wenn jedes Element hat eine eindeutige Zeichenfolge/Nummer id, dann können Sie flip-array und verwenden Sie eine object statt.

const initialState = {
  items: {
    3: {id:3, title: '1984', isFetching:false},
    6: {id:6, title: 'Mouse', isFetching:false}
  };
}

Dann können Sie vereinfachen Ihre reducer.

switch (action.type) {
case REQUEST_POST_BODY:
  let id = action.id;
  return Object.assign({}, state, {
    [id]: Object.assign({}, state[id], { isFetching: true })
  });
case RECEIVE_POST_BODY:
  let id = action.id;
  return Object.assign({}, state, {
    [id]: Object.assign({}, state[id], {
      isFetching: false,
      body: action.body
    })
  });
default:
  return state;
}

Wenn du glücklich bist, zu Experimentieren mit einigen ES7 syntax zu, können Sie das Objekt spread-operator mit Babel und schreiben die Aufrufe Object.assign.

switch (action.type) {
case REQUEST_POST_BODY:
  let id = action.id;
  return {
    ...state,
    [id]: {...state[id], isFetching: true }
  };
case RECEIVE_POST_BODY:
  let id = action.id;
  return {
    ...state,
    [id]: {
      ...state[id],
      isFetching: false,
      body: action.body
    }
  };
default:
  return state;
}

Wenn du bist nicht so scharf auf die mithilfe der spread-syntax, dann ist es noch möglich zu machen Object.assign ein bisschen mehr schmackhaft machen.

function $set(...objects) {
  return Object.assign({}, ...objects); 
}
case RECEIVE_POST_BODY:
  let id = action.id;
  return $set(state, {
    [id]: $set(state[id], {
      isFetching: false,
      body: action.body
    })
  });

Einfach und schön! Danke! So, es ist ein bisschen anders speichern von Daten, Struktur, und ich meine Komponente render-Methode. Code {this.props.data.map((item, id) => <PostItem /> Fehler: TypeError: this.props.data.map is not a function at render Was ist der richtige Weg, um iterativ neue Objekt (anstelle eines Arrays) hier?
Es sollte so etwas wie dieses: for (let [id, item] of Object.entries(this.props.data)) {
Das funktioniert, oder kann man auch iterieren über die Schlüssel. Object.keys(this.props.data).map(k => <PostItem post={this.props.data[k]} />.
Gotcha! Es funktioniert perfekt
Wenn Sie Lodash oder Unterstrich Funktionen wie map und filter iterieren über ein Objekt eigene Eigenschaften, sowie arrays, die können extrem nützlich in Situationen wie dieser.
Es sollte ein Komma(",") nach "...Staat" in dem Fall REQUEST_POST_BODY.

InformationsquelleAutor Dan Prince

1

Wenn ich es richtig verstehe, haben Sie Schwierigkeiten haben, den spezifischen Beitrag, den Sie wollen.

Zunächst, Dass Ihre reducer auch die Aktualisierung der array-und Objekt-in, macht es schwer zu Lesen und zu verwalten. Ich schlage vor, Sie sehen diese kurzes video erläutern reducer Zusammensetzung mit arrays.
Sie können den code vereinfachen, indem die Technik die dort beschrieben.

In Ihrem Fall würden Sie ein posts Druckminderer und ein post reducer, während posts reducer ruft die post reducer.

Als für die Suche nach dem richtigen Objekt zu arbeiten, Dan Prince ' s Vorschlag macht es einfacher.
Nachdem Sie ein Objekt anzeigen, statt einem array würde es leichter machen für Sie. Die entsprechenden code-snippet von Dan ' s Antwort:
```
const initialState = {
  items: {
    3: {id:3, title: '1984', isFetching:false},
    6: {id:6, title: 'Mouse', isFetching:false}
  ];
}
```
InformationsquelleAutor Moti Azu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.