简介
在现代的前端开发中，Redux 已经成为了一个不可或缺的状态管理库。在 Redux 应用中，一个常见的困扰是如何在不同的模块中共享 Redux 的 store 及其 action 和 reducer。而这时，@hasnat/redux-injector 包就能派上用场了。
@hasnat/redux-injector 是一个可重用的插件，它通过注入 redux reducer 和其他依赖来共享 store，同时仍然让模块代码保持干净易读。
安装
安装 @hasnat/redux-injector 依赖：
npm install @hasnat/redux-injector --save
使用
1. 配置 Redux Store
首先，我们需要创建一个 redux 的 store。假设我们的 store.js 文件中已经完成了 store 的配置和创建，包括初始化 state、注入 reducer、注入 middleware 等：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ ----- ---- -------------- ------ ------------ ---- ------------------------ ----- ----------- - ----------------- ------ ------------- --- ----- ----------- - -------- ----- ----- - ------------------------ --------------------------------- ------ ------- ------
2. 使用 injectReducer 函数
接下来，我们需要在模块中动态注入一个 reducer。使用 injectReducer 函数，将我们需要合并到 store 中的 reducer 进行注入：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
------ ----- ---- -----------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ ------
--------
------ ------
-
--
-------------------- - ---- ----------- ------- ---injectReducer 函数接收 2 个参数：store 和一个对象，该对象的 key 表示 reducer 被注入到 store 的命名空间，value 则为一个 reducer 函数。
示例代码
下面是一个完整的示例代码，演示了如何在 React 中使用 @hasnat/redux-injector 包：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------------
------ ----- ---- -----------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ ------
--------
------ ------
-
--
----- -------- ------- --------------- -
------------------- -
-------------------- - ---- ----------- ------- ---
-
-------- -
------ ------------- ----------------
-
-
------ ------- ---------总结
@hasnat/redux-injector 是一个非常有用的 npm 包，可以方便地在多个模块之间共享 redux store。在 Redux 应用开发中，使用 @hasnat/redux-injector 包可以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2c81e8991b448dae37