javascript - 如何使用 redux 中的 action 和 reducer 按类别过滤数据？

Question

我正在构建一个过滤器，用户可以在其中按他们想要的类别类型过滤数据，例如，餐馆、酒吧、咖啡馆等。用户使用过滤器，通过选择类别是否为真false(即是否显示该特定类别)，然后将其发送到我的操作和缩减器。您将如何设置 reducer 来过滤数据，以便只显示真实的类别？

这是我的 filter.js 文件(商店和食物为真或假):

onButtonPress() {
    const { shop, food } 
    = this.state;

this.props.filterRecommendations({ shop, food });

这是我的 action.js 文件:

export const filterRecommendations = ({ shop, food}) => {
    return {
        type: FILTER_RECOMMENDATIONS_BY_TYPE,
        payload: { shop, food }
    };
};

这是我的 reducer.js 文件:

export const reducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
    case FILTER_RECOMMENDATIONS_BY_TYPE:
        return {
            ...state,
                myRecommendations: state.myRecommendations.filter(
            item => item.type === action.payload
            )
        };
};

数据看起来像这样:

myRecommendations: [
    {
      id: '1',
      name: 'Yes Food',
      type: 'food'
    },
            {
      id: '2',
      name: 'Yes Shop',
      type: 'shop'
    },
]

以上结果只是全部数据清空

Answer 1

@Yuvi 建议使用选择器是个好主意。它允许您在不改变 reducer 状态的情况下过滤列表。这对您的情况很重要，因为每次您更改过滤器时使用当前的方法，您都会从您的状态中删除更多数据，即:

1. 选择 food > myRecommendations 现在只包含 food 项
2. 选择 shop > myRecommendations 为空，因为上面删除了 shop 项目

Redux 有文档概述了如何做到这一点 here .如果没有选择器，您将需要一种方法来在过滤器调用之间重新填充您的 myRecommendations 状态。

使用类似 reselect 的东西(参见 here )将通过内存选择器来帮助提高性能，但基本概念是:

1. 将未过滤的结果保留在您所在的州
2. 将您的过滤器选择存储为它自己的状态
3. 根据过滤状态在需要的地方过滤数据

即:

filter.js - 设置选中的过滤器

onButtonPress() {
  const { shop, food } = this.state;
  this.props.setRecommendationsFilter({ shop, food });
}

无论您在哪里定义 Action 名称

const SET_RECOMMENDATIONS_FILTER = 'SET_RECOMMENDATIONS_FILTER';

action.js

export const setRecommendationsFilter = (filter) => {
  return {
    type: SET_RECOMMENDATIONS_FILTER,
    filter,
};

reducer.js - 存储选定的过滤器而不修改推荐数据

export const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SET_RECOMMENDATIONS_FILTER: {
      return {
        ...state,
        recommendationsFilter: action.filter,
      };
    }
  }
};

在何处使用过滤后的推荐 - 这是选择器的概念

// 1. Bring in myRecommendations and recommendationsFilter from redux

// 2. Filter
/**
 * Get a filtered list of items, where the filter that matches
 * the recommendation 'type' is set to 'true'
 */
const filteredRecommendations = myRecommendations.filter(
  (item) => recommendationsFilter[item.type]
);

// 3. Now use filteredRecommendations as you would have used myRecommendations

当使用 reselect 之类的东西时，您可以将创建 filteredRecommendations 的逻辑与从 redux 获取所需数据的逻辑放在一个选择器中，然后在您的 mapStateToProps 中使用该选择器(如 here 所述)。