随着前端技术的不断发展，应用程序的复杂性也在不断提高。在应对这些复杂性时，管理应用程序状态成为了前端开发中的一个重要问题。Redux 是一个广泛使用的 JavaScript 应用程序状态管理工具，它通过使用单一原则（Single Source of Truth）来简化应用程序的状态管理。在 Redux 中，所有的状态都被保存在一个单一的存储区域中，从而使得状态修改变得简单而且可靠。为了帮助开发者更好的管理这些复杂的应用程序状态，Redux 团队发布了一个名为 redux-observable 的 npm 包。
Redux-observable 是 Redux 的一个中间件，它能够让开发者在 Redux 应用程序中使用 RxJS（Reactive Extensions for JavaScript）。RxJS 是一个强大的库，能够让开发者轻松的处理任何类型的异步事件流，从而简化应用程序逻辑。这篇文章将为你介绍如何使用 redux-observable 来简化管理复杂的应用程序状态。
安装 redux-observable
应用 redux-observable 需要两个npm 包：redux-observable 和 rxjs。你可以使用 npm 来安装这两个包：
npm install redux-observable rxjs
配置 redux-observable
Redux-observable 需要被添加到 Redux 应用程序中的中间件列表中。只需要使用 applyMiddleware 来添加即可：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ------------------- ------ ----------- ---- ------------- ------ - -------- - ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------------------ --------------------------------- ----------------------------- ------ ------- ------
createEpicMiddleware() 方法会返回一个 Redux 中间件，它会拦截 action，并把它们发送到 rootEpic 中。rootEpic 是一个 Epic，它是一个能够处理事件流的对象，我们将在下面的示例中继续讨论它。
创建一个 Epic
Epic 是一个能够将输入的事件流转化为输出的事件流的对象。它接收整个应用程序的状态（state$）流，以及能够监视应用程序中所有 action 的事件流（action$）。它返回一个事件流，其中包含了应该被派发的 action 。
下面是一个非常简单的 Epic 示例：
-- -------------------- ---- -------
------ - ------ - ---- -------------------
------ - ----- - ---- -----------------
------ ----- ---------- - ------- --
-------
------
------------------------
------- ----- ------------------------- --
-以上代码展示了一个简单的 Epic。它会在当 action.type 是 'SIMPLE_ACTION' 时，创建一个新的 action (type: 'SIMPLE_ACTION_COMPLETED')。这个 Epic 只是一个简单的示例，实际上情况会更复杂。
将 Epic 添加到 rootEpic 中
在上面的示例中，我们创建了一个名为 simpleEpic 的 Epic，但是我们仍然需要将它添加到 rootEpic 中。rootEpic 是一个能够组合多个 Epic 的方法，让你能够将应用程序的状态管理拆分成多个独立的部分。下面的代码展示了我们如何创建 rootEpic：
import { combineEpics } from 'redux-observable';
import { simpleEpic } from './simpleEpic';
export const rootEpic = combineEpics(simpleEpic);以上代码将 simpleEpic 添加到了 rootEpic 中，然后通过 createEpicMiddleware() 方法将 rootEpic 注册到了主应用程序中。你可以根据需要添加任意数量的 Epics。
运行你的应用程序
现在你可以运行你的应用程序来测试你的 Epic 是否有效。在应用程序中派发一个 'SIMPLE_ACTION' action 就可以了。当它被派发时，simpleEpic 将会创建一个新的 'SIMPLE_ACTION_COMPLETED' action。你可以使用 Redux DevTools 来调试你的应用程序状态。
总结
Redux-observable 是一个强大的工具，在处理异步行为方面提供了很大的帮助。将它添加到你的 Redux 应用程序中，你将能够更轻松的处理异步事件流。这篇文章提供的教程将帮助你了解如何配置 redux-observable，并将简单的 Epic 添加到你的应用程序中。同时，这篇文章也只是一个简单的入门教程，如果你想深入了解 Redux-observable，需要自己学习更多的内容。
完整的示例代码如下，供大家参考：
-- -------------------- ---- -------
----------
------ ------ - --------- - ---- --------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ - ------------ - ---- ------------
----- --- ------- --------- -
-------- -
------ -
--------- --------------
-----
--------- -----------
------- ----------- -- --------------------------------
----- ---
---------
------
-----------
--
-
-
----------- --- ---------------------------------
------------
------ ----- ------------- - ----------------
------ ----- ------------ - -- -- -- ----- ------------- ---
---------------
------ - ------ - ---- -------------------
------ - ----- - ---- -----------------
------ ----- ---------- - ------- --
-------------
----------------------
------- ----- ------------------------- --
--
----------
------ - ------------ - ---- -------------------
------ - ---------- - ---- ---------------
------ ----- -------- - -------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c6c