Question

编辑：

根据安德鲁的建议更改代码。

我正在使用redux创建一个todo应用程序。我面临着过滤器的问题（显示所有待办事项，显示活动待办事项，显示已完成）。过滤器正在返回新状态。例如，如果我在我的州有6个Todo任务，并且其中2个已完成。现在，如果我点击show completed过滤器，它将返回2个正确的任务。但是，如果我单击show active或show all filter，它将返回这两个任务的值，而不是之前的6个任务。

我的应用状态是

state: {todo: []}

我的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}
  }
};

减速

// Sample reducer

case SHOW_COMPLETED:
  return action.payload;
break;

Answer 1

在前端处理过滤器本身就是一种很好的做法。它可以使用map / filter函数完成。示例：

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

如何使用react和redux创建的这个todo应用程序中的过滤器工作？

1 个答案: