Reactjs 州对州。如何使用react路由器实现页面加载和预取数据加载？

我正在用Redux和React路由器制作React应用程序

例如，我有600万个个人资料页面

/id1
/id2
...
/id6000000

它们都应该由ProfilePage组件绘制。 所以我只是做了一些类似的事情：

class ProfilePage extends Component {
    componentDidMount() {
        httpApi.getProfileData(this.props.match.params.id)
        .then(response => {
            this.setState({
                page: response
            })
        })
    }

    ...
}

它的效果很好

但是接下来我想使用Redux实现同样的功能（为了便于阅读，我将直接调用dispatch）

此外，我们还需要了解，我们不需要全局存储中的页面数据，除非在底层组件中使用连接的道具（我们可以轻松地用createContext替换它）。我们只是使用Redux在外层空间移动逻辑和请求

class ProfilePage extends Component {
    static propTypes = {
        page: propTypes.object // from connect
    }

    componentDidMount() {
        dispatch({type: 'PROFILEPAGE_LOADING_START', id: this.props.match.params.id});
    }

    ...
}

在中间件之后调用减速机并设置存储：

PROFILEPAGE_LOADING_SUCCESS:
    return {
        profilePage: action.page
    }

所以我认为现在一切都很好，除了一件事

例如，我们使用id1停留在配置文件页面，然后转到id3，我们的react路由器卸载配置文件页面[id1]并装载 profilePage[id3]，并在加载新数据之前使用旧[id1]数据对其进行呈现，因为我们不会从存储中删除旧数据。嗯

我知道我们可以在componentDidMount上实现页面键、加载状态或清除状态（但在装载之前它仍然使用旧数据呈现） 还有别的，但它有点难看而且有副作用

问题：最佳实践是什么

第二，如果我想在历史推送之前单击链接实现预取数据加载。 无需Redux即可轻松实现，只需使用历史推送状态，并在componentDidMount中使用此状态

但是如果我使用Redux，那绝对是件可怕的事情。 首先，我需要以任何丑陋的方式解决第一个问题，其次，我需要以某种方式将存储中的数据更改连接在一起，并通过react路由器进行渲染。否则需要实现shouldComponentUpdate逻辑，这也很难看，在某些情况下不会触发

我尝试了很多解决方案，但都很难看

问题2：解决方案是什么

在PROFILEPAGE_LOADING_START in reducer上，您可以将PROFILEPAGE设置为undefined。这是最简单最简单的方法

您可以在推送之前调度操作配置文件页面\加载\启动，如果未定义，则在配置文件页面中仅显示配置文件页面，如果未定义，则显示加载指示器

---

你是否正在检查来自redux的新道具是否与旧道具不同？你能扩展什么以及在哪里？我试着用不同的概念检查道具。用于页面键、数据的位置或存在。但是它们都有例外，需要更难看的代码。我的意思是，当

id

发生变化时，组件得到更新，您可以尝试使用

componentdiddupdate（）

更简单的Api来shouldComponentUpdate。然后将以前的道具与新道具进行比较，仅当组件是新道具1时才重新渲染。这看起来是一个很好的解决方案，但我还没有尝试，因为主要是预取数据加载路由。但我不明白第二个答案：（我们没有任何加载指示器，我们只是将一页替换为另一页，作为与历史推送一起加载的数据。因此，生命周期和react路由器触发器中存在的主要问题。以一种或另一种方式呈现错误。主要是因为我们有不同的加载页方式，通过冷加载、重新加载、默认链接或自定义预取链接。和cA只有一个真相来源。是的，我用SCU和一些检查做了，但它看起来太麻烦了，我不想用它）我有这样的想法：@moetsy加载指示器是可选的。你可以只显示空页面或没有数据的页面。这取决于你。不管怎样，如果我理解正确，你说只需拆分位置推送和数据更改，但这会导致大量的属性检查，就像我在previos pastebin示例中一样，也许某处存在更好的示例idk.For使用just state加载prefech的示例是一个字符串，我正在寻找相同的简单重复解决方案：