简介
redux-effects-nes 是一个基于 Redux 框架的中间件，用于实现在浏览器和服务器之间实时通信的需求。它自带了多种实现方式，包括 WebSocket、SSE 等等。
安装
使用 npm 或 yarn 进行安装即可：
npm install redux-effects-nes --save # 或者 yarn add redux-effects-nes
基础使用
首先，我们需要在创建 store 时引入中间件。在这个案例中，我们使用了 createStore 函数进行创建。
import { createStore, applyMiddleware } from 'redux'
import nesMiddleware from 'redux-effects-nes'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(nesMiddleware())
)接下来，在需要使用 Redux 的组件中，我们可以使用 bindNesActions 函数将我们需要的动作绑定到组件的 props 上。
-- -------------------- ---- -------
------ - ------- - ---- -------------
------ - -------------- - ---- -------------------
------ - -------- - ---- ------------
----- --------------- - ------- -- --
-------- -------------
--
----- ------------------ - ---------- -- -
----------------
--------
-- ---------
-
------ ------- --------
----------------
------------------
--------------为了让这个案例更加直观，我们需要在组件中使用一个按钮或者其他的 UI 元素来触发该动作。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----------- - -- -- -
---------------------
-
-------- -
------ -
------- ---------------------------------------
-
-
-到这里，我们就完成了 redux-effects-nes 中间件的最基础使用啦！
进阶使用
在上面的案例中，我们已经实现了使用 redux-effects-nes 中间件来进行 WebSocket 通信的基础用法。这里，我们将介绍一些进阶使用方式和技巧。
自定义 WebSocket 地址
我们在有些场景中可能需要自己指定 WebSocket 的地址。此时，我们可以在 bindNesActions 函数的第二个参数中传入一个配置对象。
const mapDispatchToProps = (dispatch) => (
bindNesActions({
myAction
}, {
url: 'ws://localhost:8080',
dispatch
})
)自定义 initialState
有的时候，我们需要在应用刚刚加载时就获取一些实时数据。此时，我们可以将 initialState 中的数据作为 WebSocket 连接建立前的默认值。
-- -------------------- ---- -------
----- ------------ - -
-------- --
-
----- ----- - ------------
------------
-
---- -
------------
-
--
--------------------------------
-多实例连接
在特定场景下，我们可能需要连接到多个不同的 WebSocket 实例。此时，我们可以用 nes 实例的 ID 来进行区分。
const mapDispatchToProps = (dispatch) => (
bindNesActions({
myAction
}, {
id: 'myNesInstance',
dispatch
})
)动态连接
在不同的场景下，我们需要动态地连接到不同的 WebSocket 地址上。此时，我们可以使用 createWebSocketConnect 函数来创建一个 WebSocket 连接的代理函数。
-- -------------------- ---- -------
------ - ---------------------- - ---- -------------------
----- -------------- - -
--- ----------------------
-
----- -------------- - -----------------------
------- -- --
---- ---------
---
--------------
-
----- ----------- ------- --------------- -
----- - -
---- --
-
------------ - ------- -- -
---------------
---- ------------------
--
-
----------- - -- -- -
----------------
---- ---------------
---------- ----------------------
-----------------------
-
-------- -
------ -
-----
------
-----------
----------------------
----------------------------
--
------- --------------------------------------
------
-
-
-在这段代码中，我们首先调用了 createWebSocketConnect 函数来创建一个动态连接的代理函数。它会根据传入的 props 对象来动态地创建 WebSocket 连接。接下来，在 handleClick 函数中，我们使用这个代理函数来创建 WebSocket 连接，同时指定了使用的自定义协议。这样，在 WebSocket 通信时，WebSocket 连接就会使用这里指定的协议。
示例代码
为了方便大家理解 redux-effects-nes 中间件的使用方法，我们这里提供一个完整的示例代码。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------ --------------- - ---- -------
------ - --------- ------- - ---- -------------
------ -------------- - -------------- - ---- -------------------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ---------
------ -
-------- --------------
-
--------
------ -----
-
-
----- ------------ - -
-------- --
-
----- ----- - ------------
------------
-
---- -
------------
-
--
--------------------------------
-
----- --------------- - ------- -- --
-------- -------------
--
----- ------------------ - ---------- -- -
----------------
------- -- -- --
----- ---------
-------- ------- -------
--
-- ---------
-
----- --- - -- -------- ------ -- -- -
-----
----------------------
------- ------------------------------
------
-
----- ------------ - --------
----------------
------------------
------
----- ---- - -- -- -
--------- --------------
------------- --
-----------
-
------ ------- ----总结
redux-effects-nes 是一个很好用的中间件，可以用于在浏览器和服务器之间实现实时通信的需求。通过本文的介绍，您应该已经掌握了它的基本用法和一些进阶技巧。希望本文对您有所帮助，谢谢您的阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601081e8991b448ddf9e