Javascript 从 Redux 状态中删除项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37777525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delete an item from Redux state
提问by Balázs édes
I'm wondering if you could help me with this problem if possible. I am trying to delete an item from the Redux state. I have passed in the ID of the item that the user clicks via action.datainto the reducer.
我想知道如果可能的话，你是否可以帮助我解决这个问题。我正在尝试从 Redux 状态中删除一个项目。我已将用户单击的项目的 IDaction.data传入减速器。
I'm wondering how I can match the action.datawith one of the ID's within the Redux state and then remove that object from the array? I am also wondering the best way to then set the new state after the individual object has been removed?
我想知道如何将action.data与 Redux 状态中的 ID 之一匹配，然后从数组中删除该对象？我还想知道在删除单个对象后设置新状态的最佳方法是什么？
Please see the code below:
请看下面的代码：
export const commentList = (state, action) => {
switch (action.type) {
case 'ADD_COMMENT':
let newComment = { comment: action.data, id: +new Date };
return state.concat([newComment]);
case 'DELETE_COMMENT':
let commentId = action.data;
default:
return state || [];
}
}
回答by Balázs édes
Just filter the comments:
只需过滤评论：
case 'DELETE_COMMENT':
const commentId = action.data;
return state.filter(comment => comment.id !== commentId);
This way you won't mutate the original statearray, but return a new array without the element, which had the id commentId.
这样你就不会改变原始state数组，而是返回一个没有元素的新数组，它有 id commentId。
To be more concise:
更简洁：
case 'DELETE_COMMENT':
return state.filter(({ id }) => id !== action.data);
回答by Zakher Masri
You can use Object.assign(target, ...sources)and spread all the items that don't match the action id
您可以使用Object.assign(target, ...sources)和传播所有与操作 ID 不匹配的项目
case "REMOVE_ITEM": {
return Object.assign({}, state, {
items: [...state.items.filter(item => item.id !== action.id)],
});
}
回答by Shah
For anyone with a state set as an Object instead of an Array:
对于任何将状态设置为对象而不是数组的人：
I used reduce() instead of filter() to show another implementation. But ofc, it's up to you how you choose to implement it.
我使用 reduce() 而不是 filter() 来展示另一个实现。但是，这取决于您选择如何实施它。
/*
//Implementation of the actions used:
export const addArticle = payload => {
return { type: ADD_ARTICLE, payload };
};
export const deleteArticle = id => {
return { type: DELETE_ARTICLE, id}
*/
export const commentList = (state, action) => {
switch (action.type) {
case ADD_ARTICLE:
return {
...state,
articles: [...state.articles, action.payload]
};
case DELETE_ARTICLE:
return {
...state,
articles: state.articles.reduce((accum, curr) => {
if (curr.id !== action.id) {
return {...accum, curr};
}
return accum;
}, {}),
}
回答by ispirett
You can use Try this approach.
您可以使用尝试这种方法。
case "REMOVE_ITEM":
return {
...state,
comment: [state.comments.filter(comment => comment.id !== action.id)]
}
回答by Javier Ramírez
In my case filter worked without () and {} and the state was updated
在我的情况下，过滤器在没有 () 和 {} 的情况下工作，并且状态已更新
case 'DELETE_COMMENT':
return state.filter( id => id !== action.data);
