状态与 Redux。 react-router如何实现页面加载和预取数据加载？

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 的配置文件页面并转到 id3，我们的 react-router 卸载 profilePage[id1] 并安装 profilePage[id3]，并在加载新数据之前使用 old[id1] 数据进行渲染，因为我们不会从存储中删除旧数据。嗯。

我知道我们可以在 componentDidMount 实现页面键或加载状态或清除状态（但在安装之前它仍然使用旧数据呈现） 别的东西，不过有点丑，有副作用。

问题：最佳做法是什么？

其次，如果我想在历史推送之前在链接单击时实现预取数据加载。 不用 Redux 很容易实现，只需要使用历史推送状态并在 componentDidMount 中使用这个状态。

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

我尝试了很多解决方案，它们都有效，但都丑得要命。

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

Answer 1

1. 在 reducer 中的 PROFILEPAGE_LOADING_START 上，您可以将 profilePage 设置为未定义。恕我直言，这是最简单和最简单的方法。
2. 您可以在推送之前调度操作 PROFILEPAGE_LOADING_START，如果 ProfilePage 未定义，则仅显示 profilePage，如果未定义，则显示加载指示器。