过滤 redux 道具时更新反应状态

Question

我是 React 和 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));

请注意，此方法 仅设置 InsightsPage 的本地组件状态，而不是您的 Redux 存储。

实现后者：

您必须在减速器上使用新状态。所以：点击时调度动作，该动作会触发一个使用过滤状态的减速器。然后更改将传播到组件树

过滤 redux 道具时更新反应状态

updating react state when filtering redux props

javascript

reactjs

redux

react-redux