介绍
redux-express 是一个结合了 Redux 和 Express 的 npm 包，它提供了一种方便的方式来将服务端生成的 Redux 状态同步到客户端，以及处理客户端的 Redux 状态更新请求。
安装
你可以使用 npm 或者 yarn 安装 redux-express：
npm install --save redux-express
yarn add redux-express
使用
客户端
在客户端，你需要在 React 应用中使用 redux-express 提供的 ReduxExpressClient 组件包裹你的 App 组件。这个组件的作用是在应用启动时从服务端获取初始状态，并将其初始化到 Redux store 中。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ - ---- -----------
------ - -------- - ---- -------------
------ - ----------- - ---- -------
------ - ------------------ - ---- ---------------
------ ----------- ---- ------------
------ --- ---- ------------------
----- ----- - ------------------------
-------
--------- --------------
--------------------
---- --
---------------------
-----------
-------------------------------
-服务端
在服务端，你需要使用 redux-express 提供的 middleware 将初始 Redux 状态序列化为字符串，以便在 HTML 页面中嵌入初始状态。此外，你还需要将客户端发送的 Redux action 分发给 Redux store，以更新服务端的应用状态。
-- -------------------- ---- -------
------ ------- ---- ---------
------ ---- ---- ------
------ ---------- ---- -------------
------ - ------------ --------------- - ---- -------
------ - ---------------------- - ---- ---------------
------ ----------- ---- ------------
----- --- - ---------
----- ---- - ----
---------------
--------------------------
----- ----- - ------------
------------
----------------
-- - ---------------------- --- ---------- -
------------------------
-
-
-- -------- ----- ------
---------------- ----- ---- -- -
------------------------
-------------------
--
-- - ------------ ----------- ---- ----------
----- ------------ - ----------------
----- ------------------ - ----------------------------
----- ---- - -
--------- -----
------
------
----- ----------------
--------- -----------
-------------------------------- - ------------------------------
-------
------
---- ----------------
------- -------------------------
-------
-------
-
-- -- ---- --
------------ ----- ---- -- -
--------------
--
---------------- -- -- -
---------------- --------- -- --------------------------
--示例应用
下面是一个使用 redux-express 的完整示例应用，以便更好地理解如何使用这个包：
客户端
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ - ---- -----------
------ - -------- - ---- -------------
------ - ----------- - ---- -------
------ - ------------------ - ---- ---------------
------ ----------- ---- ------------
------ --- ---- ------------------
----- ----- - ------------------------
-------
--------- --------------
--------------------
---- --
---------------------
-----------
-------------------------------
-服务端
-- -------------------- ---- -------
------ ------- ---- ---------
------ ---- ---- ------
------ ---------- ---- -------------
------ - ------------ --------------- - ---- -------
------ - ---------------------- - ---- ---------------
------ ----------- ---- ------------
----- --- - ---------
----- ---- - ----
---------------
--------------------------
----- ----- - ------------
------------
----------------
------------------------
-
-
---------------- ----- ---- -- -
------------------------
-------------------
--
----- ------------ - ----------------
----- ------------------ - ----------------------------
----- ---- - -
--------- -----
------
------
----- ----------------
--------- -----------
-------------------------------- - ------------------------------
-------
------
---- ----------------
------- -------------------------
-------
-------
-
------------ ----- ---- -- -
--------------
--
---------------- -- -- -
---------------- --------- -- --------------------------
--Reducer
-- -------------------- ---- -------
----- ------------ - -
-------- -
-
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - -------- ------------- - - -
---- ------------
------ - -------- ------------- - - -
--------
------ -----
-
-
------ ------- -------组件
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
----- --- - -- -------- ---------- --------- -- -- -
-----
------------------
------- ------------------------------
------- ------------------------------
------
-
----- --------------- - ------- -- --
-------- -------------
--
----- ------------------ - ---------- -- --
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
------ ------- ------------------------ ------------------------总结
redux-express 提供了一种方便的方式来将服务端生成的 Redux 状态同步到客户端，并处理客户端的 Redux 状态更新请求。使用 redux-express 可以更好地管理应用状态，以及提高性能和用户体验。建议在需要使用服务端渲染的 React 应用中使用 redux-express。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f91238a385564ab6fd3