在现代 web 应用中，前端框架和库的使用已经成为了必然趋势。其中，Redux 作为一个 JavaScript 应用状态管理工具，得到了广泛的应用。然而，Redux 的使用依然需要我们手动加载和创建 store、reducers 等相关代码，比较繁琐。如果能有一个自动加载 Redux 相关代码的工具，那么我们将能够更加专注于编写业务代码。此时，@nisbaj/redux-loader 就提供了这样一种可能性。
@nisbaj/redux-loader 是什么
@nisbaj/redux-loader 是一个基于 webpack 打包工具的 Redux 懒加载工具。可以在 store 需要时，自动加载各个 reducer 和 store 中间件。
如何使用 @nisbaj/redux-loader
下面介绍如何在 React 应用中使用 @nisbaj/redux-loader。首先，安装 npm 包：
npm install @nisbaj/redux-loader
接下来，我们需要修改 webpack 的配置文件。假设我们的项目的 webpack 配置文件为 webpack.config.js，我们需要添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- ------
------------ -
------------- -
----- -------------------------------------------------
----- ----------------
--------- ---
-
-
-
-
--其中，我们利用 webpack 的代码分割功能，在 node_modules 中自动生成一个名为 'redux-modules' 的 chunk，用于自动加载 Redux 相关代码。
接下来，在我们的 store 文件中引入 @nisbaj/redux-loader：
import { createStore, applyMiddleware } from 'redux';
import reduxLoader from '@nisbaj/redux-loader';
import rootReducer from './reducers';
const store = createStore(reduxLoader(rootReducer), applyMiddleware());
export default store;可以看到，我们在 createStore 中使用 reduxLoader 函数来创建 store。reduxLoader 接收一个 rootReducer 函数，用于管理所有的 reducer。
最后，在我们的 index.js 文件中，使用 <provider> 组件将 store 传入 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--示例代码
下面是一个完整的示例代码，展示如何使用 @nisbaj/redux-loader：
webpack.config.js：
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- ------
------------ -
------------- -
----- -------------------------------------------------
----- ----------------
--------- ---
-
-
-
-
--reducers.js：
-- -------------------- ---- -------
----- ------------ - -
------ -
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
------ ------- --------store.js：
import { createStore, applyMiddleware } from 'redux';
import reduxLoader from '@nisbaj/redux-loader';
import rootReducer from './reducers';
const store = createStore(reduxLoader(rootReducer), applyMiddleware());
export default store;App.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --- - -- ------ ------------ ----------- -- -- -
--
--------------
------- --------------------------------
------- --------------------------------
---
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
------------ -- -- ---------- ----- ----------- ---
------------ -- -- ---------- ----- ----------- --
---
------ ------- ------------------------ -------------------------index.js：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--结语
通过使用 @nisbaj/redux-loader，我们可以更加方便地管理 React 应用中的 Redux 状态。同时，这个 npm 包的原理也很值得一学习。相信在学习的过程中，会有更深入的收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e2449e7