過濾redux道具時更新反應狀態

Question

我是新來的人，對我的反應和抵觸感到很陌生，並且在過濾我所謂的見解（文章，案例研究，報告）時遇到了一些麻煩。 我想按行業進行篩選，但我無法以過濾后的見解達到狀態更新的地步。

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

我正在將visibleFilter設置為“ 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));

請注意，此方法僅設置InsightsPage的本地組件狀態，而不是Redux存儲的狀態 。

要實現后者：

您必須在減速器上使用新狀態。 因此：在點擊時分派動作，該動作會觸發使用過濾狀態的reducer。 然后，更改將沿組件樹向下傳播