在 React 应用中，使用 Redux 管理状态是一种非常流行的方式。然而，在初始加载时，如果没有预取数据，渲染的页面可能会出现闪烁的现象。而 Redux-preheat 这个 npm 包则可以用来解决这个问题。
什么是 Redux-preheat
Redux-preheat 是一个可以预取 Redux 数据并将其保存在本地存储中的 npm 包。
安装
npm install redux-preheat --save
创建预取器
Redux-preheat 提供了 createPreheatMiddleware 方法来创建一个预取器。在创建预取器时，需要传入一个包含以下属性的配置对象：
reducerKey- 指定保存预取数据的 reducer 的键。actions- 一个对象，它包含所有需要预取的动作创建器。shouldPreheat- 一个函数，用于判断是否需要预取数据。如果返回 true，则预取动作将被调用。
-- -------------------- ---- -------
------ - ----------------------- - ---- ----------------
----- ----------------- - -------------------------
----------- ----------
-------- -
---------- -- -- -- ----- ------------ --
--
-------------- -- -- ------------------------ --- ---
---将预取器添加到 Redux 中间件
将预取器添加到 Redux 中间件中。
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(preheatMiddleware)
);预取数据
在服务器上，在渲染应用程序之前，使用 Redux 的 thunk 中间件可以调用预取动作。 使用 dispatch 函数调用 fetchUser 动作，然后将状态添加到上下文对象中，以便在应用程序中使用。 在这个例子中，数据将被保存在 window.__PRELOADED_STATE__ 中。
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ------- - ---- ----------------
------ - -------------- - ---- -------------------
------ --- ---- --------
------ - --------- - ---- ------------
----- --------- - ----- ---- -- -
----- ------- - ---
----- ------- - --- ----------
------------------------------------- -- -
----- --------- - ---------------
--------- ---------------------------
---- --
-----------
--
----------
------
------
---- --- ---- -- ---
----- ----------------
----- --------------- ---------------------------- ---------------- ------------------
------------ ------- ---------------
-------
------
---- ----------------------------
--------
-------------------------- - -------------------------------------
---------
------- --------------------------
-------
-------
---
---
--在客户端上，从服务器端渲染的预取数据可以由 Redux-preheat 检测到并导入到客户端的 Redux Store 中。
-- -------------------- ---- -------
------ - ------- - ---- ------------
------ - -------- - ---- --------------
------ - -------------------- - ---- ----------
------ - ------- - ---- ----------------
------ - ----------- - ---- --------
------ ----------- ---- -------------
------ --- ---- --------
----- ------- - --- ----------
-------------------------------------------------- -- -
----- ----- - ------------
------------
-------------- -- ------
--
----- ------- - -----------------------
--------
--------- --------------
---- ----------------- --
------------
-------------------------------
--
---示例代码
完整的示例代码可以在 GitHub 仓库 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d1f