在前端开发中，状态管理是一个非常重要的问题。Redux 是一个非常流行的 JavaScript 状态管理库，它可以帮助我们更好地管理组件之间的数据传递。然而，Redux 的一个限制是每个应用只能有一个 store，这意味着每个应用只有一个状态树（state tree），因此状态管理变得混乱且难以维护。
为了解决这个问题，社区中出现了一些支持多个 store 的库。其中一个很好的选择是 redux-multistore。它是 Redux 的一个增强库，可以帮助我们轻松地实现多个 store，从而更好地管理我们的状态树。
安装和使用
通过 NPM 安装：
--- ------- ----------------
使用：
------ - ------------ --------------- - ---- -------- ------ ---------- ---- ------------------- ----- ------ - ---------------------- ----- ------ - ---------------------- ----- ------------ - ------------ ------ ------- ------- ------- --- ----- ----- - --------------------------
上面示例代码中，我们首先引入了 Redux 的 createStore 和 applyMiddleware 方法，并引入了 redux-multistore 库。我们创建了两个 Redux store，然后通过 multiStore 方法创建一个名为 multiReducer 的 reducer。multiStore 方法的第一个参数是一个 object，key 是 store 名称，value 是对应的 Redux store。
最后，我们传入 multiReducer 到 createStore 方法中，就创建了一个支持多个 store 的 Redux store。
文件结构
在实际项目中，我们会有很多组件需要访问多个 store。为了避免混乱，我们可以根据业务逻辑将 store 拆成多个文件。例如：
- ---
- -----
- ----------
- -------counter.js 文件内容：
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
------ ----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
--
------ ----- ------------ - ----------------------------auth.js 文件内容：
------ - ----------- - ---- --------
----- ------------ - -
---------------- ------
--
------ ----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ -
---------
---------------- -----
--
---- -----------------
------ -
---------
---------------- ------
--
--------
------ ------
-
--
------ ----- --------- - -------------------------在组件中使用：
------ - ------------ ----------- - ---- --------------
------ - ------------ - ---- -------------------
------ - --------- - ---- ----------------
----- ------- - -- -- -
----- - ----- - - ------------------- -- -------------
----- --------------- - ------------------- -- ------------------------------
----- -------- - --------------
----- --------------- - -- -- -
---------- ----- ----------- ---
--
----- --------------- - -- -- -
---------- ----- ----------- ---
--
------ -
--
----------- -------------
------- ------------------------------------
------- ------------------------------------
------- -------------- ---------------- - ----- - -----------
---
--
--在 counter.js 文件和 auth.js 文件中，我们分别定义了一个 reducer 和一个对应的 store，并导出了它们。在组件中，我们可以通过 useSelector 来访问多个 store，例如 state.first 和 state.second。这里的 first 和 second 对应了第一个参数传递给 multiStore 方法的 object 中的 key。
最后，我们通过 useDispatch 方法获取 dispath 方法，可以用来派发 action。在这里，我们可以 dispatch 任意一个 store 中定义的 action。
总结
redux-multistore 是一个非常实用的库，为我们的项目带来了更多的灵活性和可维护性。在日常开发中，我们可以根据业务逻辑将 store 拆分成多个文件，更好地组织我们的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067008e361a36e0bce8bb1