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).