简介
随着 Web 应用技术的发展，前端的应用越来越复杂。针对这种情况，出现了许多框架和库。其中，Redux 是一个非常流行的状态管理库。Redux 的核心思想是将应用程序的状态储存在一个单一的、可预测的状态树中，在应用中唯一存在的 state 对象中，甚至包含了路由信息。
在 Redux 中，使用 Router 来管理应用的路由信息。而 Redux Router Engine Redial 就是一个与 Redux Router 结合使用的中间件，可以使服务器端渲染时的路由信息与 Redux Store 中的状态信息一致。它提供了 redial 函数来处理服务器端 Redux Store 初始化时的事件触发，可以在服务端渲染页面前先获取并处理服务端请求数据，使得页面能够在客户端加载前直接展现出初始化后的页面。本文主要介绍 electrode-redux-router-engine-redial 的使用方法。
安装
使用 npm 进行安装：
npm install electrode-redux-router-engine-redial --save
基本用法
在使用 electrode-redux-router-engine-redial 之前，需要先安装并了解 react-router 和 redux。以下是一个简单的示例：
app.js：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------- - ---- -------------
------ - -------------- - ---- ---------
------ ------------- ---- ------------------------------
------ - --------------- - ---- --------------------
------ ------ ---- ----------
------ - ------------ - ---- ----------------------
------ - -------------- - ---- --------------------------------------
----- ------- - ---------------
----- ------------ - ------------------------
----- ----- - ---------------------------- --------
----- --- - -- -- -
--------- --------------
--------------- ----------------
---------------- ----------------------------------------------------------
-----------------
-----------
-
------ ------- ---store.js：
-- -------------------- ---- ------- ------ - ------------ ---------------- ------- - ---- ------- ------ - ---------------- - ---- -------------------- ------ ----- ---- ------------- ------ ----------- ---- ------------ ------ -------- ---------------------------- -------- - ----- ---------- - ------- -------------------------- ----- ---------------- - ------------------------------------------- -- ------- ----- -------- - ------------------------------------------------ ----- ----- - ------------------------ ------------- --------- ------ ----- -
routes.js：
-- -------------------- ---- -------
------ ---- ---- -------------------
------ ----- ---- --------------------
------ ------- ---- ----------------------
------ - -------- - ---- -----------
----- ------ - -
-
----- ----
------ -----
---------- -----
--------- -- -- ----------
--
-
----- ---------
---------- -----
--
-
----- -----------
---------- -------
-
-
------ ------- ------actions.js：
export function loadData() {
return {
type: 'LOAD_DATA',
payload: Promise.resolve('Data resolved')
}
}Home.js：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
----- ---- - -- ---- -- -- -
-----
-------------
----- -- --------------
------
-
----- --------------- - ----- -- --
----- ----------
--
------ ------- ------------------------------以上代码定义了三个路由（Home、About、Contact），其中 Home 路由定义了一个 loadData 函数。当用户访问首页时，会自动加载数据。
在服务器端，需要使用 redial 函数来处理这个事件：
server.js：
-- -------------------- ---- -------
------ ------------ ---- ----------------------
------ ------- ---- ---------
------ - ------------ --------------- - ---- -------
------ ----- ---- -------------
------ ----------- ---- ------------
------ - ----------- - ---- ---------------------
------ ------ ---- ----------
------ - ------ - ---- --------------------------------------
----- --- - ---------
---------------------------------
------------ ----- ---- -- -
----- ----- - ------------------------ -----------------------
----- ------ - ------------------- --------
----- ------- - --
---------------------- ---------------
-------- -- -
----- - ---- - - ----------------- ------ --------
-- ------------- -
----------------- ------------
- ---- -
--------------
-
--
------------ -- -
------------------
---------------------- ------ ---------------- --
--
--
---------------- -- -- -
---------------------- -- ---- ------
--以上代码中，使用 matchRoutes 函数来确定当前路由，再使用 Redial.trigger 来触发 loadData 函数。
结语
electrode-redux-router-engine-redial 的基本使用方法已经介绍完毕。通过这个库，可以方便地对应用程序的数据进行初始化，服务端实现渲染的同时，在客户端实现应用程序的初始化，提高应用程序在启动阶段的性能，并且使应用尽量不再出现空白屏幕。
实际项目中，还可以通过 onEnter、onChange 等方法，配合 redial，来触发不同的异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005732c81e8991b448e9547