简介
redux-postmessage-middleware 是一个 Node.js 模块，它提供了一种简单的方式来在 Redux 应用程序中使用 postMessage API。postMessage API 允许不同的窗口进行跨域通信。这个 middleware 提供了一种快速而简单的方法，帮助你在 Redux 应用程序中实现跨窗口通信。
安装
要在你的项目中使用 redux-postmessage-middleware，你需要先安装它。使用下面的命令可以很容易地将它添加到你的项目中：
npm install redux-postmessage-middleware --save
使用
接下来是如何在 Redux 应用程序中使用 redux-postmessage-middleware。
- 在 middleware 中使用 redux-postmessage-middleware。在创建 store 实例之前，使用 applyMiddleware 函数应用 middleware:
import { createStore, applyMiddleware } from 'redux';
import postMessageMiddleware from 'redux-postmessage-middleware';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(postMessageMiddleware)
);- 创建一个 postMessageAction：
import { createAction } from 'redux-actions';
export const postMessageAction = createAction('POST_MESSAGE_DATA');- 在组件中使用创建的 action 将数据发送到另一个窗口:
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----------------- - ---- -------------
----- ----------- ------- --------------- -
----------- - -- -- -
----- - ----------- - - -----------
----------------- --------- -----
--
-------- -
------ ------- ------------------------------- -----------------
-
-
----- ------------------ - -
------------ -----------------
--
------ ------- ------------- ---------------------------------- 在另一个窗口接收这个数据：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------------- ---- -------------------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
--------------------------------------
--
------------------ -- -
----- - --------------- - - -----------------
-- ----------------- -
-----------------------------
-
---原理
redux-postmessage-middleware 在 Redux 应用程序中使用 window.postMessage API 来进行跨窗口通信。当 Redux 中 dispatch 一个包含 postMessage 数据的 action 时，redux-postmessage-middleware 将这个 action 包装成一个 postMessage，然后将这个 postMessage 发送到指定的窗口。在接收窗口中，redux-postmessage-middleware 监听 postMessage 事件，并在接收到 postMessage 事件时，将接收到的数据作为 redux 中的 action 处理。
示例代码
想要更深入地了解 redux-postmessage-middleware 的使用和实现原理，可以参考这个简单的示例代码：
-- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ --------------------- ---- -------------------------------
------ --- ---- --------
------ ----------- ---- -------------
----- ----- - ------------
------------
---
--------------------------------------
--
----------------
--------- --------------
---- --
------------
-------------------------------
--
-- ----------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------------- - ---- ------------
----- --- ------- --------------- -
----------- - -- -- -
----- - ----------- - - -----------
----------------- --------- -----
--
-------- -
------ -
-----
------- ------------------------------- ----------------
------
--
-
-
----- ------------------ - -
------------ -----------------
--
------ ------- ------------- -------------------------
-- --------------
------ - ------------ - ---- ----------------
------ ----- ----------------- - ----------------------------------
-- ---------------
------ - ------------- - ---- ----------------
------ - --------------- - ---- --------
----- --------------- - --------------
-
------------------ ------- ------- -- --------------
--
----
--
------ ------- -----------------
---------------
---结论
redux-postmessage-middleware 是一个用于 Redux 应用程序中实现跨窗口通信的 Node.js 模块。通过使用 redux-postmessage-middleware，你可以在 Redux 应用程序中快速地实现跨窗口通信，使你的应用程序更加灵活和强大。希望这篇教程能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d07