在前端开发中，很多时候我们需要异步加载模块或组件，这时我们可以使用 Redux-Async-Injector 这个 NPM 包。Redux-Async-Injector 可以让我们在需要的时候动态地异步地加载我们需要的模块或组件，减少页面加载时间，提高应用性能。
开始
首先，我们需要安装 redux-async-injector 包：
npm install redux-async-injector --save
接下来，我们需要在我们的 Redux store 中添加该中间件。我们可以在createStore中添加applyMiddleware中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------------------- ---- ----------------------- ------ ----------- ---- ------------------- ----- ------------- - ---------------------- ----- ----- - ------------ ------------ ----------------------------------------- --
在上面的代码中，我们首先引入了redux-async-injector包。然后，我们通过createAsyncInjector函数创建了一个异步中间件。最后，我们将其通过 applyMiddleware 中间件添加到了我们的 Redux store 中。
在组件中使用
接下来，在组件中，我们需要使用 asyncComponent 装饰器将我们需要动态加载的组件包装起来：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- -----------------------
-----------------
-- ------
-------- -- -- ------------------------
-- -------- ------- --
----------------- ----------------------
-- ---------- ----- --
--------------- ----------- -- ---- ------------------
-- --------------
-- --- ---- --------
-- --- ----- --------
----------- ------
-- ---------- ------- -
----- --------------
-- ----------
---------- ---------- ------
--
----- ----------------- ------- --------------- -
-------- -
----- ----------- - -----------------------
------ ------------ --------------- ---
-
-在上面的代码中，我们首先使用 asyncComponent 函数将需要异步加载的组件进行包装。然后，我们可以自定义各种加载状态的组件。resolve 字段是必须的，并指定了需要加载的组件。serverMode 选项指示我们希望在服务端还是客户端加载组件。name 选项是用于将 reducer 注入到 Redux 中。
在reducer中使用
最后，我们需要在我们的 reducer 中注册组件：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ------------- - ---- ----------------------- ----- ----------- - ----------------- ----------------- -------------- --- ------ ------- ------------
在上面的代码中，我们首先通过 asyncReducers 导入所有已经注册的动态 reducer，并将它们与我们的其它 reducer 合并。你需要确保在 reducer 中使用相同的名称来指定组件。
示例
下面是一个完整示例：
-- -------------------- ---- -------
-- --------
------ - ------------ ---------------- --------------- - ---- --------
------ -------------------- - ------------- - ---- -----------------------
------ ----------- ---- -------------------
----- ------------- - ----------------------
----- ----- - ------------
-----------------
-----------------
-----------
---
-----------------------------------------
--
------ ------- -------- -------------------- ---- -------
-- --------------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
----- - --------- - - -----------
------ -
-----
--------------------
------------------
------
--
-
-
------ ------- -------------- -------------------- ---- -------
-- --------------------
------ ----- ---- --------
------ - -------------- - ---- -----------------------
------ ----------- ---- ----------------
-----------------
-------- -- -- ------------------------
----------------- ----------------------
--------------- ----------- -- ---- ------------------
----------- ------
----- --------------
---------- ---------- ------
--
----- ----------------- ------- --------------- -
-------- -
----- ----------- - -----------------------
------ ------------ --------------- ---
-
-
------ ------- -------------------- -------------------- ---- ------- -- ----------------- ------ - --------------- - ---- -------- ------ - ------------- - ---- ----------------------- ------ -------------- ---- ------------------- ----- ----------- - ----------------- ----------------- -------------- --- ------ ------- ------------
结论
通过介绍 redux-async-injector，我们可以动态地异步加载我们需要的模块或组件，而不会影响应用程序的性能。当我们的应用程序变得复杂时，使用 Redux-Async-Injector 工具可以使代码更加易于管理和可测试。虽然这个工具简单易用，但需要注意的是，组件必须加载成功才能在客户端进行渲染，否则可能会遇到一些异常。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662f81e8991b448e2107