什么是 electrode-apollo-redux-engine？
electrode-apollo-redux-engine 是一个 npm 包，它提供了一个快速构建服务器端渲染(SSR)的工具。它基于 React、Apollo 和 Redux 技术栈，并使用了 Electrode 框架，为开发者提供了许多便利的功能和设计模式。
使用 electro-apollo-redux-engine，可以以简单的方式创建具有复杂逻辑的应用程序，并使之具有高性能和可扩展性。
安装和配置
安装
使用 npm 安装 electro-apollo-redux-engine：
--- ------- ----------------------------- ------
配置
在项目根目录的 config 目录下创建文件 default.js，添加以下配置：
---- --------
-------------- - -
-- ---
---------- -
-- ---
-------------------------------- -
---------- -
--------- -
-- ------ --
--
-------- -
-- ----- --
-
-- -----
-
-
-- ---
-
-- ---
--在以上配置中，我们为 electro-apollo-redux-engine 添加了 options 选项用于配置 apollo 和 redux，还可以添加其他配置项用于定制化我们的应用程序。
示例代码
让我们看一个最基本的示例，使用 electro-apollo-redux-engine 来创建一个 SSR 的应用程序。
创建一个 express 应用程序
首先，在项目根目录的 index.js 中，创建一个 express 应用程序，并将 electro-apollo-redux-engine 模块引入：
---- --------
----- ------- - -------------------
----- -------------------------- - -----------------------------------------
----- --- - ----------
-- --------------- ------ ------- ----------
-- --------------- ------- ------- --------------------------
--------
---------------------------------------------
------- -------------------
--
--
---------------- -- -- -
------------------- -- --------- -- ---- -------
---在以上代码中，我们将 electrode-apollo-redux-engine 模块的 createMiddleware 方法作为 express 的 middleware 应用到 app 上。
注意，在 createMiddleware 方法的 options 参数中，我们引入了一个路由表，这个路由表是由一个 express 路由生成的。
编写一个简单的路由
在项目的根目录中创建一个文件 routes.js，编写一个简单的 express 路由：
---- -------- ----- ------- - ------------------- ----- ------ - ----------------- --------------- ----- ---- -- - -- ---------- ------ ----- --------------------------- ------- --- -------------- - -------
添加 Apollo 配置
在项目的根目录的 config/default.js 配置文件中，我们添加 apollo 配置：
---- --------
-------------- - -
-- ---
---------- -
-- ---
-------------------------------- -
---------- -
--------- -
----------- -
---- ----- -
-------- -------
-
------ -
------ -----
-
--
------------ -
-------- -
---------- -- -- ------- --------
-
-
-
-
-
-- ---
-
-- ---
--在以上配置中，我们为 apollo 添加了 typeDefs 和 resolvers，这是一个最简单的 graphql 配置，它定义了一个 Query 类型，包含了一个 message 字段，返回字符串 "Hello, Apollo!"。
注意，在最后我们导出了 entireConfig 对象。该对象应包含我们在 config 目录下创建的所有配置文件。
现在我们可以重新启动服务并访问 http://localhost:3000，你会看到浏览器中输出了 "Hello SSR!" 和 "Hello, Apollo!"。通常，这样的应用程序应该返回HTML字符串，但是这个示例演示了如何在 SSR 应用程序中添加 Apollo 配置。
添加 Redux 配置
我们还可以添加 redux 配置，electron-apollo-redux-engine 为我们提供了使用 redux 的便利接口。
在项目的根目录的 config/default.js 配置文件中，我们添加 redux 配置：
---- --------
----- ----------- - ----------------------
-------------- - -
-- ---
---------- -
-- ---
-------------------------------- -
---------- -
-------- -
-------------- ------------
----------- ---------------------
-
-
-
-- ---
-
-- ---
--在以上配置中，我们为 redux 添加了 createStore 和 reducers 配置。createStore 是 redux 应用程序的核心，在服务器端创建一个 store 并将其传递给客户端。reducers 是一个 javascript 模块，其中包含我们应用程序的 reducer 函数。
在以上配置中不仅定义了服务器端的 redux，还将其与客户端的 redux 等生成文件关联起来。因此，我们还需要编写客户端和 redux 配置。
我们需要编写一个客户端的入口文件，在项目的根目录中创建文件 client/index.js：
---- -------- -- ---- ---- ------ ----- ------ ----------------------------- ------ ----- ---- -------- ------ - ------- - ---- ------------ ------ - ------- - ---- -------------- ------ - ----------- - ---- -------- ------ ----------- ---- --------------------- ----- ------------ - --------------------------- ------ --------------------------- ----- ----- - ------------------------ -------------- ----- ------------ - ------------- -- ------- -- ------- -- -- -------------------- -- --------------------- --- ------------------------------------
在以上代码中，我们使用 hydrate 方法从服务器端加载静态 HTML，然后使用 createStore 方法创建客户端的 redux。
在项目的根目录的 config 目录下，创建一个 reducers.js 模块：
---- -------- ------ - --------------- - ---- -------- ----- ----------- - ----------------- --------- -------------------------------------------------------------------------- --- -------------- - ------------
以上我们创建了一个包含 apolloServerReducers 的 reducer 函数来使用接口。
启动
我们现在可以启动服务器，并查看结果：
--- -----
浏览器打开 http://localhost:3000，页面应该显示了 "Hello, SSR!" 和 "Hello, Apollo!" 表示我们的服务器端渲染应用程序正在工作。
总之，electrode-apollo-redux-engine 提供了一种快速创建 SSR 应用程序的便捷方式，我们可以利用该工具来构建具有复杂逻辑的应用程序，并使之具有高性能和可扩展性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ea381e8991b448dbfef