状态改变后调用方法

Question

I am trying Redux in a project. I have a list of countries, all of which have a price, and I want to select the countries with prices between minPrice and maxPrice values. I am doing that in this method:

  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});
  }

Now, I would like this method to be called somehow by the Redux architecture.

I have this reducer:

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;
  }
}

And these actions:

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

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

I am creating a store like this:

const store = createStore(PriceReducer);

And I am calling it like this:

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

So how can I call filterPrice ? Or if I can't call it, how do I change the state?

Answer 1

If you would like to use redux in the common way, you need to keep all you state in redux, to make it a single source of truth. So, the first thing you should do is to put you country list in redux. Then, if you need some calculated properties, like, countries filtered by price, it's time to make selectors, using reselect library. Also, it's a good idea to read corresponding section of redux documentation.

In the end, you architecture will look like this:

• redux keeps minPrice , maxPrice and countries
• your container component use selectors to retrive data from state, calculate derived data and pass it to presentational components

Answer 2

Redux should be the source of state in the component. You should be able to filter the list and changes to minPrice and maxPrice should trigger your rerender.

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>
      })} 
  ....