javascript - react - Actualizar el valor único en la matriz de elementos | reaccionar redux

redux react native

Question

Tengo una lista de cosas pendientes y quiero establecer el estado de ese elemento en la matriz para "completar" si el usuario hace clic en "completar".

Aquí está mi acción:

export function completeTodo(id) {
return {
type: "COMPLETE_TASK",
completed: true,
id
}
}

Aquí está mi reductor:

case "COMPLETE_TASK": {
return {...state,
todos: [{
completed: action.completed
}]
}
}

El problema que estoy teniendo es que el nuevo estado ya no tiene asociado el texto de ese ítem todo en el ítem seleccionado y la ID ya no está allí. ¿Esto es porque estoy sobrescribiendo el estado e ignorando las propiedades anteriores? La carga de mi objeto objeto se ve así:

Objecttodos: Array[1]
0: Object
completed: false
id: 0
text: "Initial todo"
__proto__: Object
length: 1
__proto__: Array[0]
__proto__: Object

Como puede ver, todo lo que quiero hacer es establecer el valor completado en verdadero.

Answer 1

Debe transformar su conjunto de todos para tener el elemento adecuado actualizado. Array.map es la forma más sencilla de hacer esto:

case "COMPLETE_TASK":
return {
...state,
todos: state.todos.map(todo => todo.id === action.id ?
// transform the one with a matching id
{ ...todo, completed: action.completed } :
// otherwise return original todo
todo
)
};

Hay bibliotecas para ayudarlo con este tipo de actualización profunda. Puede encontrar una lista de dichas bibliotecas aquí: https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities

Personalmente, uso ImmutableJS ( https://facebook.github.io/immutable-js/ ) que resuelve el problema con sus métodos updateIn y setIn (que son más eficientes que los objetos y matrices normales para objetos grandes con muchas claves y para arrays, pero más lento para los pequeños).