1

我有一个 React-Redux 应用程序，它在用户首次登录时显示仪表板页面。仪表板显示了许多统计信息/图表等，它们是大多数（不是全部）根据状态站点值过滤的组件。此站点值最初是在用户登录时设置的，并且源自他们的配置文件。

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

仪表板上还有一个包含所有站点的下拉列表。最初，这被设置为用户默认站点。此下拉列表旨在允许用户查看除默认站点之外的站点的统计信息/图表。

当用户从下拉列表中选择不同的站点时，我想要刷新所有（站点特定的）仪表板组件。我遇到的问题是如何让这些组件刷新？或者更具体地说，如何让他们的状态刷新。

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

  1. 在用于处理站点更改效果 ( changeSite ) 的 thunk 操作中，我向每个组件 thunk 操作添加了调度调用。虽然这很有效，但我不喜欢changeSite thunk 需要了解其他组件以及要调用的动作创建者这一事实。即 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));
    }
  1. 在依赖组件中，将 Site 值包含在组件属性中，并与 componentDidUpdate 生命周期事件挂钩。检查站点是否已更改，然后调用 thunk 操作以更新组件状态。我更喜欢这种方法，因为它将业务逻辑保留在组件中，因此changeSite thunk 现在可以变成一个简单的 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 是最好的方法吗？有没有更好的办法？

4

0 回答 0