我在一个项目中尝试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？
或者,如果无法调用,如何更改状态？

解决方法:

如果您想以通用方式使用redux,则需要将所有陈述保留在redux中,以使其成为唯一的事实来源.因此,您应该做的第一件事就是将国家列表放到redux中.然后,如果您需要一些计算得出的属性,例如按价格过滤的国家/地区,那么该使用reselect库进行选择器了.另外,阅读redux文档的corresponding section是一个好主意.

最后,您的体系结构将如下所示：

> redux保持minPrice,maxPrice和国家
>您的容器组件使用选择器从状态中检索数据,计算派生数据并将其传递给表示性组件