javascript - 如何在Redux中使用 Action 和约化器按类别过滤数据？

我正在构建一个过滤器，用户可以根据自己想要的类别类型（例如，餐馆，酒吧，咖啡馆等）过滤数据。用户可以通过选择类别是否为true来使用过滤器（例如，是否显示该特定类别），然后将其发送给我的操作和减速器。您将如何设置reducer来过滤数据，以便仅显示正确的类别？

这是我的filter.js文件（其中shop和food是true还是false）：

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'
    },
]

上面的结果只是清除所有数据。

最佳答案

您可以通过过滤数据来访问对象键：

state.myRecommendations.filter(item => action.payload[item.type])