更新项目数组中的单个值 反应redux

Question

我有一个待办事项列表，如果用户单击“完成”，希望将数组中该项目的状态设置为“完成”。

这是我的动作：

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

这是我的减速器：

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

我遇到的问题是新状态在所选项目上不再具有与该待办事项相关的文本，并且ID不再存在。这是因为我要覆盖状态并忽略以前的属性吗？我的对象项onload看起来像这样：

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

如您所见，我要做的就是将完成值设置为true。

Answer 1

您需要转换待办事项数组以更新适当的项目。Array.map是执行此操作的最简单方法：

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

有一些库可以帮助您进行这种深度状态更新。您可以在此处找到此类库的列表：https :
//github.com/markerikson/redux-ecosystem-links/blob/master/immutable-
data.md#immutable-update-utilities

就我个人而言，我使用ImmutableJS（https://facebook.github.io/immutable-
js/
）来解决其updateIn和setIn方法的问题（对于具有大量键和数组的大型对象，它们和普通对象和数组相比效率更高，但对于小孩子则较慢）。