Reactjs 我能'；我不知道如何在react redux todo应用程序中使用visibilityFilters

我有一个todo应用程序，可以执行所有4个crud操作，但我无法根据它们的当前状态对它们进行筛选

如有任何解释，将不胜感激

---

我还检查了其他react redux todo应用程序github repos，但大多数都是旧的，看起来它们不是以最好的方式编写的，因此我正在尝试找到一种更好的方式（目前为止还没有成功）

当您在组件中变异redux状态变量时，您所做的是一种反模式，如下所示：

const getVisibleTodos = (todos, filter) => {
    switch (filter) {
      case "SHOW_ALL":
        return todos;
      case "SHOW_COMPLETED":
        return todos.filter((t) => t.completed);
      case "SHOW_ACTIVE":
        return todos.filter((t) => !t.completed);
      default:
        return todos;
    }
  };

相反，您应该做的是，在

toDoReducer.js

上收听

SET\u VISIBILITY\u FILTER

操作：

 //import SET_VISIBILITY_FILTER action

 case SET_VISIBILITY_FILTER:
     let toDoClone = [...state.todos]
     //if(filter = something)
     toDoClone.filter(t => //your condition)
     return {
       ...state,
       todos: toDoClone
     }

几个问题

filters

是处于初始状态的数组，但您在操作中随后将单个值发送到该数组，并且在使用它进行筛选时也将其用作单个值

您希望减速机中有

有效负载

，但您发送的数据没有将内容包装在

有效负载

dispatch({
   type: SET_VISIBILITY_FILTER,
   filter
 });

继续上面的内容，您应该使用已经定义的操作

setFilter

来设置过滤器，该过滤器可以正确地将数据包装到

有效负载

属性中

---

修复这3个问题，您可以得到预期的效果。

visibilityFilterreducer必须做什么？在Todolist组件中有一个开关，其中redux状态发生了变化。这也应该是固定的。这解决了问题，非常感谢，但在不改变redux存储并保持两个还原器分开的情况下，调度set filter action*的正确方法是什么？

dispatch({
   type: SET_VISIBILITY_FILTER,
   filter
 });