Redux 中支持多个数据源的解决方案及实现技巧-JavaScript中文网-JavaScript教程资源分享门户

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。

// javascriptcn.com 代码示例
// userModule.js
const initialState = {
  id: null,
  name: '',
  age: null,
};

const SET_USER = 'SET_USER';
export const setUser = user => ({ type: SET_USER, payload: user });

export default (state = initialState, action) => {
  switch (action.type) {
    case SET_USER:
      return action.payload;
    default:
      return state;
  }
};

// productModule.js
const initialState = {
  list: [],
};

const SET_PRODUCT_LIST = 'SET_PRODUCT_LIST';
export const setProductList = productList => ({
  type: SET_PRODUCT_LIST,
  payload: productList,
});

export default (state = initialState, action) => {
  switch (action.type) {
    case SET_PRODUCT_LIST:
      return { ...state, list: action.payload };
    default:
      return state;
  }
};

// rootReducer.js
import { combineReducers } from 'redux';
import user from './userModule';
import product from './productModule';

export default combineReducers({
  user,
  product,
});

在这个示例中，我们创建了两个模块，一个负责管理 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