时间戳

首页 > 解决方案 > 我不知道如何在 react redux todo app 中使用 visibilityFilters

reactjs - 我不知道如何在 react redux todo app 中使用 visibilityFilters

问题描述

我有一个 todo 应用程序，它可以执行所有 4 个 crud 操作，但我无法根据它们的当前状态过滤它们，这是 codesandbox 上的应用程序。

import { SET_VISIBILITY_FILTER } from "../actionTypes";

const initialState = {
  filters: ["SHOW_ALL"]
};

const visibilityFilter = (state = initialState, { type, payload }) => {
  switch (type) {
    case SET_VISIBILITY_FILTER:
      return { payload };
    default:
      return state;
  }
};

export default visibilityFilter;

任何解释将不胜感激。

我还检查了其他 react redux todo app github repos，但它们中的大多数都是旧的，而且看起来他们不是以最好的方式编写的，所以我正在努力寻找更好的方式（到目前为止失败了）

标签： reactjsreduxreact-redux

解决方案

几个问题

  1. filters是一个处于初始状态的数组，但您在操作之后发送单个值，并且在使用它进行过滤时也使用单个值。

  2. 你期望payload在你的减速器中，但你发送的数据并没有包装东西payload

    dispatch({
   type: SET_VISIBILITY_FILTER,
   filter
 });

  3. 继续上述内容，您应该使用已定义的操作setFilter来设置过滤器，该过滤器将数据正确包装在payload属性中。

解决这 3 个问题，您会得到https://codesandbox.io/s/problems-with-redux-forked-hv36h，它按预期工作。

推荐阅读