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，那么它绝对可怕。首先，我需要以任何丑陋的方式解决第一个问题，其次，我需要以某种方式将数据存储在存储中并通过React Router进行渲染。否则需要实现shouldComponentUpdate逻辑，该逻辑也很丑陋，在某些情况下不会触发。

我尝试了很多解决方案，它们都可以工作，但是都很难看。

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

Answer 1

在reducer的PROFILEPAGE_LOADING_START中，您可以将profilePage设置为undefined。 IMHOit是最简单，最简单的方法。
您可以在推送之前调度操作PROFILEPAGE_LOADING_START，并且在ProfilePage中仅显示profilePage（如果未定义）或加载指示符（如果未定义）。

国家vs Redux。如何使用React Router实现页面加载和预取数据加载？

1 个答案: