首先，让我们了解一下什么是 redux-observables-server-side-rendering。它是一个可以让你在服务器端渲染应用程序时使用 RxJS Observables 的 Redux 中间件。这个包通过确保 Redux actions 和 reducers 在服务器和客户端之间同步的方式，帮助你更容易地支持服务端渲染（SSR）。
安装
你可以通过 NPM 安装 redux-observables-server-side-rendering，并将其作为应用程序的一个中间件：
npm install redux-observables-server-side-rendering --save
然后，在下面的代码中，将其与 Redux 进行配置：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - -------------------- - ---- -------------------
------ - -------------------- - ---- ------------------------------------------
----- -------------- - -----------------------
----- ----- - ------------
------------
-------------
------------------------------- ---------------------
--请确保在服务端和客户端都使用此组合。
使用
由于它是在 Redux 的上下文中运行的，所以在使用此包之前，确保你已经了解了如何使用 Redux 和 RxJS Observables。
然后，创建一个 epic，在初始状态下向你的 Redux Store 发送一个 action：
-- -------------------- ---- -------
------ - ------ - ---- -------------------
------ - ---- - ---- ------------
------ - ---- --------- - ---- -----------------
------ ----- -------- - ------- --
-------------
---------------------
---------------- --
--------------------------------------------------------------------
------------ -- -- ----- --------------------- -------- -------- ---
-
-
--最后，将组合后的 middlewares 应用到你的应用程序上，以便在服务器端和客户端之间同步 actions 和 reducers：
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
------ - -------- - ---- --------------
------ ----- ---- --------
------ - -------------------- - ---- -------------------
------ - -------------------- - ---- ------------------------------------------
------ - ------------ --------------- - ---- --------
------ --- ---- --------
------ -------- ---- -------------
----- -------------- - -----------------------
----- ----- - ------------
---------
-------------
------------------------------- ---------------------
--
----- -------------- - ------ --------------- -- -
------ -
--------- -----
------
------
----- ----------------
------------ ----------- --- ---------------
-------
------
---- -----------------------
--------
-------------------------- - ---------------------------------------------- -----------
---------
------- ---------------------------------
-------
-------
--
--
------ ----- ------------ - ----- ---- -- -
----- ---- - ---------------
--------- --------------
---- --
-----------
--
----- -------------- - -----------------
----------------------------- -----------------
--如果使用上述示例代码，需要注意的是：在客户端使用 hydrate 而不是 render。
ReactDOM.hydrate(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);结论
在本文中，我们学习了如何使用 redux-observables-server-side-rendering 组件，将 RxJS Observables 应用于 Redux 应用程序的服务器端渲染。这是一种支持 SSR 的新方法，可以通过应用此包并跟随上述步骤来完成。使用此组件，您可以更轻松地为您的 React 应用程序编写单一代码库，实现多端渲染并且整体开发效率更高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664081e8991b448e24c2