reactjs - Redux-Cómo agregar una entrada a la matriz en el reductor

ecmascript-6 react-redux

Question

Me quedé con este bit y no puedo progresar. Creo que la solución es simple pero no puedo entenderlo. Estoy tratando de agregar una entrada en el reductor para que los datos en se vean algo así:

state = {
  entryId: {
    entryName: ["something", "something2", "something3" /* and so on... */]
  }
};

Hasta ahora, esto es lo más cerca que estoy, pero, en lugar de agregar una nueva entrada única, está reemplazando la que ya está almacenada. También necesito poder agregar este elemento al estado vacío donde entryId, entryName no existe todavía para evitar el error:

switch(type) {
  case ADD_ENTRY:
    return {
      ...state,
      [entryId]: {
        ...state[entryId],
        [entryName]: {
          [uniqueEntry]: true
        }
      }
    };
}

¿Alguna idea de lo que estoy haciendo mal?

Answer 1

Si está intentando agregar un elemento al final de la matriz entryName , debería hacerlo:

return {
  ...state,
  [entryId]: {
    ...state[entryId],
    [entryName]: [
      ...state[entryId][entryName],
      uniqueEntry
    ]
  }
};

ES6 diseminado con arreglos funciona así:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const eight = 8;

const newArray = [''stuff'', ...array1, ''things'', ...array2, ...[7, eight], 9];
console.log(newArray); // ["stuff", 1, 2, 3, "things", 4, 5, 6, 7, 8, 9]

Echa un vistazo a esta esencia que tiene un ejemplo de algo muy similar a lo que estás haciendo.

También encontré este conjunto de ejemplos extremadamente útil. Muchas cosas geniales aquí:

https://github.com/sebmarkbage/ecmascript-rest-spread

Actualizar:

Si entryName se inicializa como undefined como dices en tu comentario, puedes hacer esto:

return {
  ...state,
  [entryId]: {
    ...state[entryId],
    [entryName]: [
      ...state[entryId][entryName] || [],
      uniqueEntry
    ]
  }
};

Creo que este es un excelente ejemplo de lo doloroso que puede ser trabajar con React / redux utilizando una estructura de datos altamente anidada. FWIW, me han recomendado muchas veces para aplanar su estado tanto como sea posible.