触发相关组件的刷新

如何解决触发相关组件的刷新

我有一个React-Redux应用程序，该应用程序在用户首次登录时显示仪表板页面。仪表板显示许多统计信息/图形等，其中大多数（不是全部）组件都是根据状态站点值进行过滤的。该网站值最初是在用户登录时设置的，并且是从其个人资料中得出的。

大多数组件都遵循使用 componentDidMount 生命周期事件来调用thunk方法的模式。在thunk方法中，从redux状态检索站点值，并将其传递到数据库查询中。然后，Reducer将结果添加到状态。标准的东西。还原状态相当平坦，即统计信息/图表等的状态未嵌套在所选站点下，而是它们自己的对象不在根目录下。

信息中心上还有一个下拉列表，其中包含所有站点。最初，此设置为用户默认站点。此下拉菜单旨在允许用户查看默认网站以外的网站的统计信息/图表。

我希望所有（特定于站点的）仪表板组件在用户从下拉列表中选择其他站点时刷新。我遇到的问题是如何使这些组件刷新？或更具体地讲，如何刷新其状态。

更新：我尝试了两种不同的方法。

在用于处理站点更改效果的thunk操作（ changeSite ）中，我向每个组件thunk操作添加了dispatch调用。尽管这行得通，但我不喜欢 changeSite thunk需要了解其他组件以及调用什么动作的事实。即重击动作看起来像：

    changeSite: (siteId: number): AppThunkAction<any> => async (dispatch) => {

        const promiseSiteUpdate = dispatch({ type: 'CHANGE_SITE',siteId });
        await Promise.all([promiseSiteUpdate]);

        dispatch(AncillariesStore.actionCreators.requestExpiring(siteId));
        dispatch(AncillariesStore.actionCreators.requestExpired(siteId));
        dispatch(FaultsStore.actionCreators.requestFaults(siteId));
        
        dispatch(AssetsStore.actionCreators.requestAssetsCount(siteId));
        dispatch(LicencesStore.actionCreators.requestLicencesCount(siteId));
        dispatch(MaintenancesStore.actionCreators.requestMaintenancesCount(siteId));
        dispatch(FaultsStore.actionCreators.requestFaultsCount(siteId));
    }

在从属组件中，将Site值包含在组件属性中，并钩接到componentDidUpdate生命周期事件中。检查站点是否已更改，然后调用thunk操作以更新组件状态。我更喜欢这种方法，因为它可以将业务逻辑保留在组件中，因此 changeSite 重击现在可以成为一个简单的reducer调用。依赖（站点故障）组件的示例如下所示：

type FaultsProps =
    {
        faults: FaultsStore.FaultsItem[],currentSiteId: number
    }
    & typeof FaultsStore.actionCreators;

const mapStateToProps = (state: ApplicationState) => {
    return {
        faults: state.faults?.faults,currentSiteId: state.sites?.currentSiteId
    }
}

class FaultyListContainer extends React.PureComponent<FaultsProps> {

    public componentDidMount() {
        // First load.
        this.props.requestFaults(this.props.currentSiteId);
    }

    public componentDidUpdate(prevProps: FaultsProps) {
        // Update state if site has changed.
        if(prevProps.currentSiteId !== this.props.currentSiteId) {
            this.props.requestFaults(this.props.currentSiteId);
        }
    }

    public render() {
        return React.createElement(FaultsList,{faults: this.props.faults});
    }
}

export default connect(
    mapStateToProps,FaultsStore.actionCreators
)(FaultyListContainer as any);

＃2是最好的方法吗？有更好的方法吗？

触发相关组件的刷新

如何解决触发相关组件的刷新

相关推荐