在前端开发中，Redux 作为一种前端架构的解决方案已经被广泛采用。而 rxjs 的出现，为前端开发人员带来了一种流式编程的思想，能够更好地描述异步数据流。在这样的背景下，Redux-rxjs 库应运而生，将 Redux 和 rxjs 进行了深度融合，为前端开发人员带来了全新的思路和体验。
安装
在安装 Redux-rxjs 之前，需要先安装好 Redux 和 rxjs。可以使用 npm 来安装。
npm install redux rxjs --save
然后，再安装 Redux-rxjs。
npm install rxjs-redux --save
使用 Redux-rxjs
以下是 Redux-rxjs 的基本使用方法：
创建 store
首先，我们需要创建一个 Redux store，其中使用了 RxJS 操作符から生成的中间件，将 Action 转换为流（Observables）。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ------------------- ------ - ------------ - ---- ---------------------------- ------ - ------------ - ---- ------------------- ------ - -------------------- - ---- ------------------- ------ - -------- - ---- ------------- ------ - ----- -- ---------- - ---- ---------- ----- -------- - ------------- -------------- -- ----- -------------- - ----------------------- ----- ---------- - - --------------- -- ----- ----- - ------------ --------- ------------------------------- -- ----------------------------- ------ ------- ------
创建 Actions
然后，我们需要定义一些 Action。使用 rxjs 的 from 操作符将普通事件流转换为 redux-actions。
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ------------ - ---- ----------------
------ ----- ---------------- - -------------------
------ ----- ---------------- - -------------------
------ ----- ---------------- - -------------------
------ ----- -------------------- - -------------
-----------------
------ -- -- ---- --
--
------ ----- -------------------- - -------------------------------
------ ----- -------------------- - -------------
-----------------
------- -- -- ----- --
--
------ ----- ----------- - --------- --
--------------------------------------
------------ ------- -- -- ------------------------------------
------ -- ------------------------
------------------ -- ---------------------------------
--
--创建 Reducers
接着，我们需要定义一些 Reducer。使用 rxjs 的 merge 操作符将事件流转换为 redux-reducers。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
------ - ----- - ---- -------
------ - ----------------- ----------------- ---------------- - ---- ------------
------ ----- ------------ - ---------------
------------------- ------- ------- -- -- --------- ---------- ---- ---
------------------- ------- ------- -- -- --------- ---------- ----- ---
------------------- ------- ------- -- -- --------- ---------- ------ ------ -------------------- ---
-- - ---------- ----- ---
------ ----- ----------- - --------- ------ --
------
------------------------- -- --------------------------- ------------ --------------- --------------------
--我们使用 handleActions 函数创建 Redux 的 Reducer，它接受一个对象，这个对象包含了我们的 action 对象。
然后，我们可以使用 merge 合并多个 events，用来控制状态。
组件里的使用
最后，在我们的组件中，我们可以创建一个 observable 对象，用来订阅 store 的事件流，并返回相应的状态数据和操作方法。
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ---- ------ - ---- -----------------
------ - ------- - ---- -------------
------ - -------------------- - ---- -------------------------
------ ----- ----------- - --------------- -- --
------ ------------
----
----- -------- ------- --------------- -
------- - ------- -- -
-----------------------
----- ---- - ---------------------------------
-- ------ -
--------------------------------
------------------------- - ---
-
-
-------- -
------ -
-----
----- ------------------------
------ ----------- --------------- --
-------
------
--
-
-
------ ------- ------------------- -- -
----- -------------- - ------ -- -
-------------------------------------------
--
------ -
---------
---------------
--
-------------我们可以使用 connect 函数来连接 state 和 store，然后创建一个 observable 对象，使用 pipe 函数中的一些操作符进行筛选和处理。
总结
Redux-rxjs 的运用，深度融合了 Redux 和 rxjs，将他们发挥出来的最佳体现。本文给出了 Redux-rxjs 输入流的实现方法，具体实践仍需看自己的项目和开发需求进行适度改进。Redux-rxjs 的学习和使用，需要深入理解 Redux 和 rxjs 的思想，才能更好地掌握和运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f081e8991b448d503b