Comment mettre à jour une valeur unique à l'intérieur d'un élément de tableau spécifique dans Redux

J'ai un problème où le re-rendu de l'état provoque des problèmes d'interface utilisateur et il a été suggéré de ne mettre à jour qu'une valeur spécifique dans mon réducteur pour réduire la quantité de re-rendu sur une page.

c'est un exemple de mon état

{
 name: "some name",
 subtitle: "some subtitle",
 contents: [
   {title: "some title", text: "some text"},
   {title: "some other title", text: "some other text"}
 ]
}

et je suis en train de le mettre à jour comme ça

case 'SOME_ACTION':
   return { ...state, contents: action.payload }

où action.payloadest un tableau entier contenant de nouvelles valeurs. Mais maintenant, j'ai juste besoin de mettre à jour le texte du deuxième élément dans le tableau de contenu, et quelque chose comme ça ne fonctionne pas

case 'SOME_ACTION':
   return { ...state, contents[1].text: action.payload }

où action.payloadest maintenant un texte dont j'ai besoin pour la mise à jour.

Vous pouvez utiliser les assistants React Immutability

import update from 'react-addons-update';

// ...    

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      1: {
        text: {$set: action.payload}
      }
    }
  });

Bien que j'imagine que vous feriez probablement quelque chose de plus comme ça?

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      [action.id]: {
        text: {$set: action.payload}
      }
    }
  });

Vous pouvez utiliser map. Voici un exemple d'implémentation:

case 'SOME_ACTION':
   return { 
       ...state, 
       contents: state.contents.map(
           (content, i) => i === 1 ? {...content, text: action.payload}
                                   : content
       )
    }

Vous n'êtes pas obligé de tout faire en une seule ligne:

case 'SOME_ACTION':
  const newState = { ...state };
  newState.contents = 
    [
      newState.contents[0],
      {title: newState.contnets[1].title, text: action.payload}
    ];
  return newState

Très tard à la fête mais voici une solution générique qui fonctionne avec chaque valeur d'index.

1. Vous créez et étendez une nouvelle matrice de l'ancienne matrice à celle que indexvous souhaitez modifier.

2. Ajoutez les données souhaitées.

3. Créez et diffusez un nouveau tableau à partir de celui que indexvous vouliez modifier jusqu'à la fin du tableau

let index=1;// probabbly action.payload.id
case 'SOME_ACTION':
   return { 
       ...state, 
       contents: [
          ...state.contents.slice(0,index),
          {title: "some other title", text: "some other text"},
         ...state.contents.slice(index+1)
         ]
    }

Mettre à jour:

J'ai fait un petit module pour simplifier le code, il vous suffit donc d'appeler une fonction:

case 'SOME_ACTION':
   return {
       ...state,
       contents: insertIntoArray(state.contents,index, {title: "some title", text: "some text"})
    }

Pour plus d'exemples, jetez un œil au référentiel

signature de fonction:

insertIntoArray(originalArray,insertionIndex,newData)

Je crois que lorsque vous avez besoin de ce type d'opérations sur votre état Redux, l'opérateur de diffusion est votre ami et ce principe s'applique à tous les enfants.

Imaginons que c'est votre état:

const state = {
    houses: {
        gryffindor: {
          points: 15
        },
        ravenclaw: {
          points: 18
        },
        hufflepuff: {
          points: 7
        },
        slytherin: {
          points: 5
        }
    }
}

Et vous voulez ajouter 3 points à Serdaigle

const key = "ravenclaw";
  return {
    ...state, // copy state
    houses: {
      ...state.houses, // copy houses
      [key]: {  // update one specific house (using Computed Property syntax)
        ...state.houses[key],  // copy that specific house's properties
        points: state.houses[key].points + 3   // update its `points` property
      }
    }
  }

En utilisant l'opérateur de diffusion, vous ne pouvez mettre à jour que le nouvel état en laissant tout le reste intact.

Exemple tiré de cet article étonnant , vous pouvez trouver presque toutes les options possibles avec d'excellents exemples.

Dans mon cas, j'ai fait quelque chose comme ça, basé sur la réponse de Luis:

...State object...
userInfo = {
name: '...',
...
}

...Reducer's code...
case CHANGED_INFO:
return {
  ...state,
  userInfo: {
    ...state.userInfo,
    // I'm sending the arguments like this: changeInfo({ id: e.target.id, value: e.target.value }) and use them as below in reducer!
    [action.data.id]: action.data.value,
  },
};

Voici comment je l'ai fait pour l'un de mes projets:

const markdownSaveActionCreator = (newMarkdownLocation, newMarkdownToSave) => ({
  type: MARKDOWN_SAVE,
  saveLocation: newMarkdownLocation,
  savedMarkdownInLocation: newMarkdownToSave  
});

const markdownSaveReducer = (state = MARKDOWN_SAVED_ARRAY_DEFAULT, action) => {
  let objTemp = {
    saveLocation: action.saveLocation, 
    savedMarkdownInLocation: action.savedMarkdownInLocation
  };

  switch(action.type) {
    case MARKDOWN_SAVE:
      return( 
        state.map(i => {
          if (i.saveLocation === objTemp.saveLocation) {
            return Object.assign({}, i, objTemp);
          }
          return i;
        })
      );
    default:
      return state;
  }
};

J'ai peur que l'utilisation de la map()méthode d'un tableau puisse être coûteuse car tout le tableau doit être itéré. Au lieu de cela, je combine un nouveau tableau composé de trois parties:

• head - éléments avant l'élément modifié
• l'élément modifié
• tail - éléments après l'élément modifié

Voici l'exemple que j'ai utilisé dans mon code (NgRx, pourtant le machanisme est le même pour les autres implémentations Redux):

// toggle done property: true to false, or false to true

function (state, action) {
    const todos = state.todos;
    const todoIdx = todos.findIndex(t => t.id === action.id);

    const todoObj = todos[todoIdx];
    const newTodoObj = { ...todoObj, done: !todoObj.done };

    const head = todos.slice(0, todoIdx - 1);
    const tail = todos.slice(todoIdx + 1);
    const newTodos = [...head, newTodoObj, ...tail];
}