Redux 是一个非常流行的前端状态管理工具，它可以帮助我们更好地组织和管理应用中的数据流。当我们需要处理多个数据源时，Redux 提供的默认方案可能会显得有些力不从心，但是，我们可以通过一些技巧来实现支持多个数据源的 Redux 应用。
Redux 处理单一数据源的原理
在 Redux 中，应用的状态由一个 store 维护。store 中存储了应用的所有状态和一个 reducer，通过 reducer 计算出新的状态。当一个组件需要改变 store 中的状态时，它会 dispatch 一个 action，action 可以是一个简单的对象，包含 type 和 payload 两个属性，也可以是一个函数，接收 dispatch 和 getState 两个参数。
支持多个数据源的解决方案
如果应用有多个数据源需要维护，我们可以考虑采用以下两种方式实现。
方案一：多个 Redux 实例
最简单的解决方案是创建多个 Redux 实例，每个实例负责管理一个数据源。当需要访问一个数据源时，我们就使用对应的实例就可以了。
这种方式的优点在于简单易行，每个实例互相独立，可以方便地在团队中分工协作。缺点在于数据源之间无法直接共享状态，增加了代码的复杂度，可能会导致多余的网络请求。
方案二：Redux Modules
Redux Modules 是一种实现多个数据源的解决方案。我们将一个数据源看做一个独立的模块，每个模块有自己的 reducer，action，和 initialState。我们将所有的模块传递给 combineReducers 函数，生成一个根的 reducer。
-- -------------------- ---- -------
-- -------------
----- ------------ - -
--- -----
----- ---
---- -----
--
----- -------- - -----------
------ ----- ------- - ---- -- -- ----- --------- -------- ---- ---
------ ------- ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ ---------------
--------
------ ------
-
--
-- ----------------
----- ------------ - -
----- ---
--
----- ---------------- - -------------------
------ ----- -------------- - ----------- -- --
----- -----------------
-------- ------------
---
------ ------- ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ - --------- ----- -------------- --
--------
------ ------
-
--
-- --------------
------ - --------------- - ---- --------
------ ---- ---- ---------------
------ ------- ---- ------------------
------ ------- -----------------
-----
--------
---在这个示例中，我们创建了两个模块，一个负责管理 user 数据源，另一个负责管理 product 数据源。我们将这两个模块合并成一个 rootReducer，并传递给 createStore 函数，完成了多个数据源的管理。
实现技巧
当我们遇到多个数据源需要管理时，有一些技巧可以帮助我们更好地实现。
使用 nameSpacing
如果在多个模块中，有相同的 action 常量，为了避免冲突，我们可以给不同的数据源添加一个命名空间。这个命名空间可以是字符串形式的标识符，加上命名空间后，相同的 action 常量就变得不同了。
const SET_USER = 'user/SET_USER'; const SET_PRODUCT_LIST = 'product/SET_PRODUCT_LIST';
使用 redux-thunk
我们可以使用 redux-thunk 提供的异步 action 创建函数来实现异步请求的功能。在 redux-thunk 中，action 可以是一个函数，而不一定是一个对象。
export const fetchProductList = () => async (dispatch, getState) => {
const response = await http.get('/api/product/list');
dispatch(setProductList(response.data.list));
};在这个示例中，我们使用了 redux-thunk 提供的 API，它允许我们在 action 中进行异步请求，并在数据请求完成后 dispatch 一个 action 来改变 store 中的状态。
总结
当我们需要管理多个数据源的时候，Redux 提供了多种解决方案。我们可以使用多个 Redux 实例来分别管理不同的数据源，也可以使用 Redux Modules 来分别管理不同的模块。在实现多个数据源时，我们需要注意 action 常量的冲突问题，并可以使用 redux-thunk 来实现异步请求的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658595bcd2f5e1655d03044a