在前端开发中，有时需要在不同的页面或者不同的浏览器标签页之间进行数据传递或共享数据。传统的做法是使用 cookie 或者 localStorage，但是这种方法存在一些缺点，比如存储容量限制、数据类型限制等等。另外，如果需要频繁地进行数据的同步或更新，这种做法并不够优雅。
为了解决这个问题，可以使用 @vkammerer/redux-postmessage-raf 这个 npm 包进行跨页面数据通信。这个包已经帮我们封装了很多常用的逻辑和方法，使用起来非常方便。
安装依赖
先进入你的项目目录，在命令行中运行以下命令进行安装：
--- ------- ------ --------------------------------
初始化
在你的应用中需要使用这个包的地方，引入相应的代码：
------ ------------------------------ ---- -----------------------------------
然后使用这个代码中的 createMessageChannelMiddleware 方法来创建一个 middleware，并添加到你的 redux store 的 middleware 数组中：
----- ----- - ------------
------------
----------------
--------------------------------
-
--这个方式会把一个动态生成的 iframe 插入到你的页面中，并在这个 iframe 中运行一个名为 messageChannel 的全局对象，用于进行数据的通信。
向另一个页面发送数据
现在假设你有两个同时打开的页面，一个是源页面（source），一个是接收页面（receiver），需要在这两个页面之间传递数据。
首先，在源页面中，你需要通过调用 store.getState() 获取当前状态，然后使用 postMessage() 方法向 messageChannel 发送消息：
----- ----- - ----------------- ----------------------------------- ----- --------------------- -------- ----- ---
这里要注意，由于 postMessage 是异步的操作，所以不能直接使用 store.dispatch() 来发送消息。而是需要通过 postMessage() 方法发送。
发送的消息是一个对象，其中 type 字段用于标识消息类型，payload 字段则是具体要传递的数据。
接收另一个页面发送的数据
在接收页面中，你需要先监听 messageChannel 上的消息事件，并在事件中处理接收到的数据：
------------------------------------------------- ------- -- -
----- - ----- ------- - - -----------
------ ------ -
---- ---------------------
----------------- --------------- ----
------
--------
------
-
---到这里，使用 @vkammerer/redux-postmessage-raf 进行跨页面数据通信的基本流程已经介绍完了。
实例
下面是一个简单的示例，演示在两个页面之间进行计数器的同步。
源页面（source）代码：
------ ------ - --------- --------- - ---- --------
------ - ------------ --------------- - ---- --------
------ ------------------------------ ---- -----------------------------------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ------------
--------
----------------
--------------------------------
-
--
-------- -------- -
----- ------- --------- - ------------
------------ -- -
------------------ -- -
----- ----- - -----------------
----------------------
----------------------------------- ----- --------------------- -------- ----- ---
---
---
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
------ -
-----
---------------
---------- ------ -----------
------- -------------------------------------------
------- -------------------------------------------
------
-
-
------ ------- -------接收页面（receiver）代码：
------ ------ - --------- --------- - ---- --------
------ - ----------- - ---- --------
------ ------------------------------ ---- -----------------------------------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------------------
------ - --------- ----------------- --
--------
------ ------
-
-
----- ----- - ------------
--------
----------------
--------------------------------
-
--
-------- ---------- -
----- ------- --------- - ------------
------------ -- -
------------------ -- -
----- ----- - -----------------
----------------------
---
---
------ -
-----
-----------------
---------- ------ -----------
------
-
-
------ ------- ---------在这个示例中，源页面和接收页面都是用 React 编写的。在源页面中点击 Increase 或 Decrease 按钮都会触发一个 dispatch，更新应用的状态，并向接收页面发送一个数据更新通知。而在接收页面中，只需要订阅状态的变化即可，当接收到消息时更新状态并重新渲染视图。
总结
通过使用 @vkammerer/redux-postmessage-raf 这个 npm 包，我们可以轻松地实现跨页面数据通信，从而解决了一些常见的应用场景。当然，这个包本身也有一些缺点和限制，比如数据的安全性问题以及只能在同一域名下使用等。但是总体来说，这是一种优雅而快速的跨页面通信方式，适用于多数应用场景。
如果你对这个包还不是很熟悉，请务必查看 github 上的文档和使用说明，避免出现意外问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ab081e8991b448d8422