状态vs还原。如何用react路由器实现页面加载和预取数据加载？

Question

我正在使用Redux和React-Router进行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});
    }

    ...
}

中间件调用reducer后设置存储：

PROFILEPAGE_LOADING_SUCCESS:
    return {
        profilePage: action.page
    }

所以我想现在一切都很好，除了一件事。

例如，我们使用id1停留在profile页面，然后转到id3，我们的react-router卸载profilePage[id1]并在加载新数据之前挂载profilePage[id3]，并用旧的[id1]数据呈现它，因为我们没有从存储区中删除旧的数据。嗯。

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

问题：最佳做法是什么？

第二，如果我想在历史推送之前在链接点击时实现预取数据加载。它很容易实现，不需要Redux，只需使用历史推送状态，并在ComponentDidMount中使用该状态。

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

我试过很多解决办法，但都很难看。

问题2：解决方案是什么？

Answer 1

1. 在reducer中的PROFILEPAGE_LOADING_START上，可以将profilePage设置为undefined。Imhoit是最简单最容易的方法。
2. 您可以在push之前分派操作PROFILEPAGE_LOADING_START，并且在ProfilePage中，如果PROFILEPAGE_LOADING_START未定义，则只显示ProfilePage，如果未定义，则只显示loading indicator。