如何为多相似Grid编写Redux模块化初始状态？

这问题问到点子上了！用单个Reducer维护多个相似Grid的状态，绝对是践行DRY原则的明智选择，而模块化的初始状态其实可以通过「基础模板+动态组合」的思路来实现，既简洁又灵活。下面给你一步步拆解实用方案：

首先把一个Grid需要的通用默认状态（比如表头、数据、分页、加载状态这些）抽成一个可复用的模板对象，这是模块化的核心：

// 单个Grid的基础初始状态模板，涵盖所有通用字段
const baseGridInitialState = {
  columns: [],       // 默认表头配置
  data: [],          // 默认数据集
  pagination: {
    current: 1,
    pageSize: 10,
    total: 0
  },
  filters: {},       // 默认筛选条件
  isLoading: false   // 默认加载状态
};

接下来，你可以维护一个需要初始化的Grid名称列表，通过遍历这个列表，把每个Grid名称作为key，对应的值用基础模板的副本（注意避免引用共享）来生成完整的初始状态：

// 业务中需要的Grid名称列表，可随业务扩展
const gridNames = ['catalog', 'users', 'products'];

// 生成最终的模块化初始状态
const gridInitialState = gridNames.reduce((acc, gridName) => {
  // 用扩展运算符做浅拷贝，如果模板有嵌套对象，建议用深拷贝（比如JSON.parse(JSON.stringify())或lodash.cloneDeep）
  acc[gridName] = { ...baseGridInitialState };
  return acc;
}, {});

生成后的初始状态结构完全符合你的需求：

{
  catalog: { columns: [], data: [], ... },
  users: { columns: [], data: [], ... },
  products: { columns: [], data: [], ... }
}

如果某个Grid需要特殊的默认值（比如users Grid默认每页显示20条数据），可以定义一个个性化配置映射，在生成初始状态时自动合并覆盖：

// 个性化初始配置，仅定义与基础模板不同的字段
const gridCustomConfigs = {
  users: {
    pagination: {
      ...baseGridInitialState.pagination,
      pageSize: 20
    }
  }
};

// 合并基础模板与个性化配置
const gridInitialState = gridNames.reduce((acc, gridName) => {
  acc[gridName] = {
    ...baseGridInitialState,
    ...gridCustomConfigs[gridName] // 优先使用个性化配置
  };
  return acc;
}, {});

最后把生成好的初始状态传入你的共用Reducer，在处理action时，根据传入的gridName定位对应的状态节点进行修改：

function gridReducer(state = gridInitialState, action) {
  switch (action.type) {
    case 'UPDATE_GRID_COLUMNS': {
      const { gridName, columns } = action.payload;
      return {
        ...state,
        [gridName]: {
          ...state[gridName],
          columns
        }
      };
    }
    // 其他修改Grid状态的逻辑（比如更新数据、分页、筛选等）
    case 'UPDATE_GRID_DATA': {
      const { gridName, data } = action.payload;
      return {
        ...state,
        [gridName]: {
          ...state[gridName],
          data
        }
      };
    }
    default:
      return state;
  }
}

如果你的Grid不是一次性全部渲染，而是用户切换到对应页面才加载的，可以在Reducer中加入自动初始化逻辑——当某个Grid首次被修改时，如果状态中还没有这个节点，就自动用基础模板初始化：

function gridReducer(state = {}, action) {
  const { gridName } = action.payload || {};
  
  // 自动初始化不存在的Grid节点
  if (gridName && !state[gridName]) {
    state = {
      ...state,
      [gridName]: { 
        ...baseGridInitialState, 
        ...gridCustomConfigs[gridName] 
      }
    };
  }

  switch (action.type) {
    case 'UPDATE_GRID_COLUMNS': {
      const { columns } = action.payload;
      return {
        ...state,
        [gridName]: {
          ...state[gridName],
          columns
        }
      };
    }
    // 其他case...
    default:
      return state;
  }
}

这种方式不用提前维护所有Grid名称，更适合动态生成Grid的复杂场景。

内容的提问来源于stack exchange，提问作者Hovadko