状態変更後にメソッドを呼び出す

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の中であなたは状態のすべてを維持する必要があります。ですから、最初にするべきことは、あなたに国リストを還元することです。次に、価格でフィルタリングされた国のような計算されたプロパティが必要な場合は、reselectライブラリを使用してセレクタを作成します。また、reduxのマニュアルのcorresponding sectionを読むこともお勧めです。最後に

、あなたのアーキテクチャは次のようになります。

• ReduxのminPrice、maxPriceとcountries
• あなたのコンテナコンポーネントの使用セレクタは、状態からデータをretrive得られたデータを計算し、プレゼンテーションにそれを渡すために保持します成分

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