[英]Trouble with updating ngrx state
I have an ngrx state like this:我有一个像这样的ngrx state:
company: {
id: '1',
name: 'myCompany',
task: [{id: 1, name: 'task1', date: '20-01-2021', endDate: '22-01-2021'}, {id: 2, name: 'task2', date: '23-01-2021', endDate: '24-01-2021'}]
}
I have a function reducer that needs to update only some property of the task array.我有一个 function 减速器,它只需要更新任务数组的某些属性。
the action object contains a property task that's an object that contains only the property I need to edit, and the id to match into the array.动作 object 包含一个属性任务,它是一个 object ,它只包含我需要编辑的属性,以及要匹配到数组中的 id。 This is the function buy I got error because the object is read only.
这是 function 购买我收到错误,因为 object 是只读的。
on(
CompanyAction.editTask,
(state, action): CompanyState => {
const index = state.company.tasks.findIndex(el => el.id === action.taskId);
// here I want to update the task that I've edited But I got error
state.company.tasks[index] = { ...state.company.tasks[index], ...action.task };
return {
...state,
company: {
...state.company,
tasks: state.company.tasks,
},
};
}),
Any suggestion?有什么建议吗?
PS附言
I tried in this way, but if in the action I have only a single prop example name: string and I do this:我尝试过这种方式,但是如果在操作中我只有一个道具示例名称:字符串,我会这样做:
on(
CompanyAction.editTask,
(state, action): CompanyState => {
const newTasks = state.company.tasks.map(item => {
if (item.id === action.taskId) {
item.name = action.name // this gives me a read only error
} else {
return item;
}
})
return {
...state,
company: {
...state.company,
tasks: newTasks,
},
};
}),
It gives me the same read only error.它给了我同样的只读错误。
Isn't correct to pass in the ngrx action a prop with only a single value to update a single property of the object?在ngrx动作中传递一个只有一个值的道具来更新object的单个属性是不正确的吗?
Try this:尝试这个:
on(
CompanyAction.editTask,
(state, action): CompanyState => {
const index = state.company.tasks.findIndex(el => el.id === action.taskId);
let companyTasks = {...state.company.tasks};
let editingTask = companyTasks[index];
companyTasks = companyTasks.filter((task, idx) => {return idx !== index});
editingTask = {...editingTask, ...action.task};
companyTasks.push(editingTask);
return {
...state,
company: {
...state.company,
tasks: companyTasks,
},
};
}
First after finding index of desired task, Create a copy of all tasks named companyTasks
.首先在找到所需任务的索引后,创建名为
companyTasks
的所有任务的副本。
then pick the task based on index ( editingTask
) and remove it from companyTasks
.然后根据索引(
editingTask
)选择任务并将其从companyTasks
中删除。 after editing it push it to companyTasks
.编辑后将其推送到
companyTasks
。 and in returning state apply companyTasks
to tasks
.并在返回 state 时将
companyTasks
应用于tasks
。
Could not test it but you can try this.无法测试它,但你可以试试这个。
on( CompanyAction.editTask, (state, action): CompanyState => { const newTasks = state.company.tasks.map(item => { if (item.id === action.taskId) { // write code for what you wnat to do when id matches } else { return item; } }) return {...state, company: {...state.company, tasks: newTasks, }, }; } ),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.