javascript - react - redux saga

Cómo actualizar un valor único dentro de un elemento de matriz específico en redux

Question

Tengo un problema en el que la representación de estado causa problemas de interfaz de usuario y se me sugirió que solo actualice el valor específico dentro de mi reductor para reducir la cantidad de representación en una página.

este es un ejemplo de mi estado

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

y actualmente lo estoy actualizando así

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

donde action.payload es una matriz completa que contiene nuevos valores. Pero ahora solo necesito actualizar el texto del segundo elemento en la matriz de contenido, y algo como esto no funciona

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

donde action.payload ahora es un texto que necesito para actualizar.

Answer 1

Creo que cuando necesita este tipo de operaciones en su estado Redux, el operador de propagación es su amigo y este director se aplica a todos los niños.

Supongamos que este es tu estado:

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

Y quieres sumar 3 puntos a Ravenclaw

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

Al usar el operador de propagación, puede actualizar solo el nuevo estado dejando todo lo demás intacto.

Ejemplo tomado de este increíble artículo , puede encontrar casi todas las opciones posibles con excelentes ejemplos.

Answer 2

En mi caso hice algo como esto, basado en la respuesta de Luis:

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

Answer 3

Muy tarde para la fiesta, pero aquí hay una solución genérica que funciona con cada valor de índice.

1. Puede crear y extender una nueva matriz desde la matriz anterior hasta el index que desea cambiar.

2. Agregue los datos que desee.

3. Cree y extienda una nueva matriz desde el index que desea cambiar hasta el final de la matriz

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)
         ]
    }

Answer 4

No tienes que hacer todo en una línea:

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

Answer 5

Podrías usar los ayudantes Reaccionar inmutabilidad

import update from ''react-addons-update'';

// ...    

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

¿Aunque me imagino que probablemente harías algo más como esto?

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

Answer 6

Puedes usar el map . Aquí hay un ejemplo de implementación:

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