redux-saga-event-iterator是一款基于redux-saga的npm包，可以帮助我们更加方便地管理事件流。在使用redux-saga时，我们经常需要管理一个事件流，这些事件的触发和响应需要耦合在一起。redux-saga-event-iterator就是为了解决这个问题而打造的，它可以帮助我们轻松地组织和管理一个事件流。
安装
首先，我们需要安装redux-saga-event-iterator。可以通过以下命令进行安装：
npm install redux-saga-event-iterator --save
需要注意的是，redux-saga-event-iterator需要redux-saga的支持，因此我们需要先安装redux-saga。
使用
1. 创建事件迭代器
我们可以通过createEventIterator方法来创建一个事件迭代器。这个迭代器可以接受任意类型的事件，事件可以是一个Promise，也可以是一个Redux action。
-- -------------------- ---- -------
------ --------------------- ---- ----------------------------
--------- -------- -
----- -------- - ----------------------
-- ----
--------
-------------------------- --------------
--------------------------- ---------------
-------------------------- -----------
-
我们可以看到，通过createEventIterator方法创建的迭代器在saga函数内部定义。我们可以通过调用iterator的nextPromise和nextEffect方法来注册事件，这些事件会构成一个完整的事件流。
2. 触发事件
注册事件后，我们就需要在redux中dispatch一个Redux action或者Promise来触发这个事件。
-- -------------------- ---- -------
-- --------------- ----------
--------------------- ----------------
-- ---------------------
----------------
----- -------------
-------- -
------- -----
--
---可以看到，在触发事件时，我们需要使用Redux的dispatch方法来分别触发一个Redux action和一个Promise。
3. 监听事件
当我们触发一个事件后，redux-saga-event-iterator会自动地响应这个事件，触发相应的回调函数。我们可以通过调用iterator的event方法来响应事件。
-- -------------------- ---- -------
--------- -------- -
----- -------- - ----------------------
-- ----
--------
-------------------------- --------------
--------------------------- ---------------
-------------------------- -----------
-- ----
----- ------ -
----- ----- - ----- ---------------------
----------------------- ---------------
-
-我们可以看到，在mySaga函数中，我们通过while(true)来持续监听事件，当有事件触发时，我们可以通过yield call(iterator.event)来获取这个事件的类型和payload。
4. 取消事件
在触发了一个事件后，我们可能需要在某些情况下取消这个事件。我们可以通过调用iterator的cancel方法来取消事件。
-- -------------------- ---- -------
--------- -------- -
----- -------- - ----------------------
-- ----
--------
-------------------------- --------------
--------------------------- ---------------
-------------------------- -----------
-- ----
----- ------ -
----- ----- - ----- ---------------------
-- ----------- --- ------------- -
-- ----
----- ----------------------
-
-
-在上面的代码中，我们通过调用iterator的cancel方法来取消事件，这会阻止接下来的代码被执行。
示例代码
下面是一个完整的使用redux-saga-event-iterator的示例代码。
-- -------------------- ---- -------
------ ------ ---- ---------------------
------ --------------------- ---- ----------------------------
-------- ----------------- -
------ --- ----------------- -- -
------------- -- -
------------- --- ---- ------------
-- ------
---
-
-------- ------------ -
------ --- ----------------- -- -
------------- -- -
----------------- -------- ----------
-- ------
---
-
-------- ------------ -
----------------- ---------
-
--------- -------- -
----- -------- - ----------------------
-- ----
--------
-------------------------- ----------
--------------------------- -----------
-------------------------- ------------
-- ----
----- ------ -
----- ----- - ----- ---------------------
----------------------- ---------------
-- ----------- --- ------------- -
-- ----
----- ----------------------
-
-
-
------ ------- -------在上面的代码中，我们创建了一个事件流，包括FETCH_DATA、FETCH_USERS和SOME_ACTION三个事件。当这些事件被触发后，我们通过监听事件来响应这些事件，同时我们也演示了如何取消一个事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a43