Question

我在项目中尝试Redux。我有一个国家/地区列表，所有这些国家都有价格，我想选择价格介于minPrice和maxPrice之间的国家/地区。我在这个方法中这样做：

  filterPrice: function(minPrice, maxPrice) {
    var newCountries = [];
    _.forEach(this.props.countries, function(country) {
        var price = country["price"];
        if(minPrice <= price && price <= maxPrice) {
            newCountries.push(country);
        }
    });
    this.setState({countries: newCountries});
  }

现在，我希望Redux架构以某种方式调用此方法。

我有这个减速器：

const initialState = {
  minPrice: 0,
  maxPrice: Constants.PRICE_RANGE
};


export default function PriceReducer(state = initialState, action) {
  switch (action.type) {

    case types.UPDATE_MAX:
      return {
        maxPrice: action.maxPrice
      }
    case types.UPDATE_MIN:
      return {
        minPrice: action.minPrice
      }

    default:
      return state;
  }
}

这些行动：

export const updateMax = (maxPrice) => {
  return {
    type: types.UPDATE_MAX,
    maxPrice: maxPrice
  };
}

export const updateMin = (minPrice) => {
  return {
    type: types.UPDATE_MIN,
    minPrice: minPrice
  };
}

我正在创建这样的商店：

const store = createStore(PriceReducer);

我这样称呼它：

store.dispatch({type: types.UPDATE_MIN, minPrice: 10});

那我该如何致电filterPrice？或者，如果我无法调用它，我该如何更改状态？

Answer 1

如果你想以常用的方式使用redux，你需要让你所有的状态都在redux中，以使它成为单一的事实来源。所以，你应该做的第一件事就是把你的国家列表放在redux中。然后，如果您需要一些计算的属性，例如按价格过滤的国家/地区，则需要使用reselect库来制作选择器。另外，阅读redux文档的corresponding section是一个好主意。

最后，您的架构将如下所示：

redux保留minPrice，maxPrice和countries
您的容器组件使用选择器从状态中检索数据，计算派生数据并将其传递给表示组件

Answer 2

Redux应该是组件中的状态源。您应该能够过滤列表并更改为minPrice，maxPrice应该触发您的重新呈现。

filteredByPrice: function() {
   return this.props.countries.filter(function(country){
      return this.props.minPrice <= this.props.country.price && 
        this.props.country.price <= this.props.maxPrice
   }
}
... 
render: function(){
  return ....
      {this.filteredByPrice().map(function(country){
        return <div> {country.name} </div>
      })} 
  ....

状态改变后调用方法

2 个答案: