如何使过滤器在使用 react 和 redux 创建的这个待办事项应用程序中工作?

Question

编辑：

按照安德鲁的建议更改代码有效。

我正在使用redux制作一个待办事项应用程序。我遇到过滤器问题(显示所有待办事项，显示活动待办事项，显示已完成(。 筛选器将返回新状态。例如，如果我的州有 6 个待办事项任务，并且其中 2 个已完成。现在，如果我单击显示已完成的过滤器，它将返回 2 个正确的任务。但是，如果我单击显示活动或显示所有过滤器，它会从这 2 个任务而不是前 6 个任务返回值。

我的应用状态为

state: {todo: []}

我的待办事项是

[
{id: 1, text: 'Save Gotham!!', completed: false},
{id: 2, text: 'Buy new jet', completed: true}
]

行动

export function showAllTodo(state){
// state will have id,text and completed flag, this is not same as app state
return {
type: SHOW_ALL_TODO,
payload: state
}
};
export function showCompletedTodo(state){
let completedTodo = state.todo.filter( (item) => item.completed);
return {
type: SHOW_COMPLETED,
payload: {todo: completedTodo}
}
};

export function showActiveTodo(state){
let activeTodo =  state.todo.filter( item => !item.completed)
return {
type: SHOW_ACTIVE,
payload: {todo: activeTodo}
}
};

还原剂

样品减速器

case SHOW_COMPLETED:
return action.payload;
break;

Answer 1

最好在前端本身处理过滤器。它可以使用地图/过滤器功能来完成。例：

let filteredState = { todo: [], visibilityFilter: ''};
if(this.props.visibilityFilter == SHOW_ACTIVE){
filteredState.todo = this.props.todo.filter( item => !item.completed )
}
if(this.props.visibilityFilter == SHOW_COMPLETED){
filteredState.todo = this.props.todo.filter( item => item.completed )
}
if(this.props.visibilityFilter == SHOW_ALL_TODO){
filteredState.todo = this.props.todo;
}
return (
<ToDoItem todo={filteredState} />
)