redux小道具をフィルタリングするときに反応状態を更新する

Question

私は反応することに新しいです& reduxと私は洞察（記事、ケーススタディ、レポート）と呼んでいるものをフィルタリングするのに少し問題があります。業界別にフィルタリングしたいのですが、フィルタリングされた洞察で状態が更新されているところまでは到達できません。

InsightsPage.js 


const FilterLink = ({ 
    filter, 
    data, 
    children 
}) => { 
    return(
     <a href="#" 
      onClick={e => { 
       e.preventDefault(); 
       getVisibleInsights(
        data, 
        filter 
       ) 
      }} 
     >{children} 
     </a>  
    ); 
}; 

const getVisibleInsights = (
    insights, 
    filter 
) => { 
    switch (filter) { 
     case 'SHOW_ALL': 
      return insights; 
     case 'SHOW_AEROSPACE': 
      return insights.filter(
       i => i.industry == 'aerospace');  
     case 'SHOW_HEALTHCARE': 
      return insights.filter(
       i => i.industry == 'healthcare'); 
    } 
} 


class InsightsPage extends React.Component { 
    render() { 
     const insights = this.props.insightsPageData.insights; 
     return(
      <div className="col-md-12"> 
       <h2>{this.props.insightsPageData.header}</h2> 
       <div className="col-md-4"> 
        <InsightsList insights={this.props.visibleInsights} /> 
       </div> 
       <div className="col-md-8"> 
        {this.props.children} 
       </div> 
       <p> 
        Show: 
        {' '} 
        <FilterLink filter="SHOW_ALL" data={insights}>All</FilterLink> 
        {' '} 
        <FilterLink filter="SHOW_AEROSPACE" data={insights}>Aerospace</FilterLink> 
        {' '} 
        <FilterLink filter="SHOW_HEALTHCARE" data={insights}>Healthcare</FilterLink> 
       </p> 
      </div> 
     ); 
    } 
} 

InsightsPage.propTypes = { 
    insightsPageData: PropTypes.object.isRequired 
}; 

function mapStateToProps(state, ownProps) { 
    return { 
     insightsPageData: state.insightsPageData, 
     visibilityFilter: state.insightsPageData.visibilityFilter, 
     visibleInsights: getVisibleInsights(state.insightsPageData.insights, state.insightsPageData.visibilityFilter) 
    } 
} 
function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(actions, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(InsightsPage); 

私はvisibilityFilterと私の状態を初期化していますが、だから、「SHOW_ALL」

initialState.js 

export default { 
    employeesPageData: {employees: [], page_info:{stats: []}}, 
    insightsPageData: {insights:[], visibilityFilter: 'SHOW_ALL'}, 
    newsArticlesPageData: {news_articles:[], page_info:{}}, 
} 

に設定され、私のInsightsPageの状態を更新するための最良の方法は何ですか？それらはすべて最初から表示されるので、InsightsListは機能しています。本当にありがとう。

Answer 1

<FilterLinks>機能コンポーネントには3つの小道具が必要です。あなたが最初に押し込んでいますが、あなたはデータのために小道具を押していません。次のようにそうするように、それを修正：

<FilterLink filter="SHOW_AEROSPACE" data={this.props.insightsPageData} updateInsights={this.updatInsights.bind(this)} >Aerospace</FilterLink> 

// Where updateInsights is something like: 

function updateInsights (updated_insights){ 
    this.setState({insights: updated_insights}); 
} 

あなたはその後、コールするのonClickを変更することができます。

this.props.updateInsights(getVisibleInsights(data, filter)); 

このapprosch のみInsightsPageはなく、あなたの再来のローカルコンポーネントの状態を設定することに注意してください店舗後者を達成するために

：あなたの減速に新しい状態を使用する必要があると思います

。したがって、クリックでアクションをディスパッチすると、そのアクションはフィルタリングされた状態を使用する減速器を起動します。変更によりコンポーネントツリーがプロポジットされます