如何在页面之间进行通信

时间:2016-09-12 14:18:23

标签: reactjs react-router single-page-application react-redux

我在webview中有一个单页面应用程序。

我有3页AB和C,A是列表页面,B是编辑页面,C是B的子页面。单击A中的一个列表项目,转到页面B,B从远程服务器获取数据和显示数据,当点击B的一个字段,进入页面C时,用户可以在页面C中编辑,然后单击页面C中的“保存”按钮,然后返回到页面B.

过程就像这样

点击页面A =>

中的一项

B从远程服务器获取数据并显示=>

点击B的一个字段,转到C =>

在C中编辑数据并点击“保存”按钮=>

转到第B页,B显示部分新数据

我的问题

C必须使用“ browserHistory.goBack()”才能转到B.

当用户从C返回时,

B不应该获取数据。

B应显示来自C的数据。

B不知道它是来自A还是C.

目前我通过使用redux状态和操作修复了这些问题。但我认为这不是一个好的解决方案。如果C是公共页面,C不应该知道B的存在。

有人有更好的解决方案吗?

1 个答案:

答案 0 :(得分:0)

动作 - >商店的方法是要走的路。如果组件安装时,您的页面A,B和C应该监听该存储并获取数据(如果它尚未存在)。

如果C是公共页面,当它加载时,它将尝试使用Store中的数据,因为它不存在,它将触发一个动作来为您获取该数据并将其放入存储中。同时,您的“C”页面将显示经典的“正在载入...”消息。