Question

我的州看起来完全像这样：

{
  categories: {
    "unique-category-id" {
      "data": {
        // All kind of data (name, description ,etc )
        "products": [
          {
            // Products that belong to this category with the current filter
          }
        ]
      },
      "readyState": "CATEGORY_FETCHED",
      "query": { // This object holds all the params that the filter allows to choose from
        "brands": [],
        "options": {
          "usb": true
          "minPrice": 200
        }
      }
    }
  
  }
}

这适用于正确获取数据。现在是时候实现过滤功能了。我试图让它像这样工作，不确定这是否是“redux”做事方式。

1.-在类别页面上的每个过滤器上，我们分配一个点击处理程序：

<li onClick={this.toggleFilterField} key={item.VALUE}>{item.NAME}</li>

toggleFilterField通过mapDispatchToProps传递到容器中：

const mapDispatchToProps = (dispatch) => {
  return {
    toggleFilterField: (category, filter) => {
      dispatch(toggleFilterField(category, filter))
    }
  }
}

export { CustomTagFilter };

export default connect(null, mapDispatchToProps)(CustomTagFilter);

2.-我的toogleFilterField应该只返回一个像这样的动作：

return {
  type: CHANGE_FILTER,
  category,
  filter
}

然后我的category_reducer.js应该处理此操作并更新以下状态键

state.categories[unique-category-id].query

现在这没关系，但是现在，在将过滤器应用到状态后，我将不得不从类别中重新获取数据。

如何以及在何处根据之前的行动成功触发新动作？

这是处理来自分页API的redux中过滤元素的正确方法吗？

Redux - 可过滤的产品类别 - 行动＆amp;过滤

0 个答案: