Обновление состояния реакции при фильтрации редукционных редуктов

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 и не ваш Redux магазин.

Для достижения последнего:

Вы должны были бы использовать новое состояние на вашем редукторе. Итак: отправьте действие по щелчку, это действие вызывает редуктор, который использует фильтрованное состояние. Затем изменение будет протаиваться по дереву компонентов