Bonne façon de mettre à jour l'état dans redux réducteurs

Je suis un newbie dans redux et es6 syntaxe. Je fais mon application officielle de la redux tutoriel, et avec cette exemple.

Il y a JS extrait de code ci-dessous. De mon point - de définir REQUEST_POST_BODY et RECEIVE_POST_BODY cas dans des postes de réducteur.
Principal difficiles à trouver et mettre à jour à droite de l'objet dans le magasin.

J'essaie d'utiliser le code d'exemple:

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

Mais simple d'un ensemble de postes. Il n'est pas nécessaire de trouver poteau droit par id.

Voici mon 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'}));

Si le ids sont toujours va être unique, vous pourriez être mieux de faire items un objet au lieu d'un tableau. Alors que vous pouvez trouver par id en utilisant simplement items[id].

OriginalL'auteur Max Vorozhcov | 2016-03-16

24

Avec Des Tableaux

Si vous préférez rester avec les tableaux, alors vous pouvez écrire un réducteur qui vient s'attaque unique post objets.
```
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;
}
```
La racine de votre réducteur devient:
```
export default function posts(state = initialState, action) {
  return state.map(post => reducePost(post, action);
}
```
Nous sommes juste à l'exécution de notre nouveau réducteur de plus de chaque message de la liste, de revenir une mise à jour du tableau des emplois. Dans ce cas, l'identifiant unique permettra de s'assurer que seul un élément va être changé.

Avec Des Objets

Si chaque élément dispose d'une unique chaîne de caractères ou un nombre d'id, vous pouvez retourner votre tableau et utiliser un object à la place.
```
const initialState = {
  items: {
    3: {id:3, title: '1984', isFetching:false},
    6: {id:6, title: 'Mouse', isFetching:false}
  };
}
```
Ensuite, vous pouvez simplifier votre réducteur.
```
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;
}
```
Si vous êtes heureux d'expérimenter avec quelques ES7 la syntaxe trop, vous pouvez activer l'Objet de la propagation de l'opérateur avec Babel et de réécrire les appels à 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;
}
```
Si vous n'êtes pas enthousiaste à l'aide de la propagation de la syntaxe, il est toujours possible de faire Object.assign un peu plus acceptable.
```
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
    })
  });
```
Simple et agréable! Merci! Donc, il y a un peu différentes, magasin de structure de données, et j'ai du changer mon composant de méthode render. Code {this.props.data.map((item, id) => <PostItem /> augmenter erreur: TypeError: this.props.data.map is not a function at render Ce qui est bon moyen pour parcourir le nouvel objet (au lieu d'un tableau) ici?
Il devrait être quelque chose comme ceci: for (let [id, item] of Object.entries(this.props.data)) {
Qui fonctionne, ou vous pouvez également faire une itération sur les touches. Object.keys(this.props.data).map(k => <PostItem post={this.props.data[k]} />.
Gotcha! Il fonctionne parfaitement
Si vous utilisez Lodash ou un trait de Soulignement, des fonctions comme map et filter itérer sur un objet propre des propriétés, ainsi que des tableaux, qui peut être extrêmement utile dans de telles situations.

OriginalL'auteur Dan Prince
1

Si je comprends bien, vous rencontrez des difficultés à obtenir le poste que vous voulez.

Tout d'abord, d'Avoir votre réducteur également mettre à jour le tableau et l'objet, le rend difficile à lire et à maintenir. Je vous suggère de regarder cette courte vidéo l'expliquant, réducteur de composition avec des tableaux.
Vous pouvez simplifier votre code en utilisant la technique décrite.

Dans votre cas, vous avez un posts réducteur et une post réducteur, tandis que posts réducteur appelle la post réducteur.

Que pour trouver le bon objet pour travailler sur, Dan Prince de la suggestion de la rend plus facile.
Un objet de la carte au lieu d'un tableau à rendre plus facile pour vous. Pertinentes de l'extrait de code de Dan réponse:
```
const initialState = {
  items: {
    3: {id:3, title: '1984', isFetching:false},
    6: {id:6, title: 'Mouse', isFetching:false}
  ];
}
```
OriginalL'auteur Moti Azu

Vous devez vous connecter pour publier un commentaire.

Avec Des Tableaux

Avec Des Objets