React.js中实现可变Immutable Record：兼容现有DatasourceState的方案

你遇到的问题是Immutable.js的Record特性导致的——Record是固定键集合的不可变数据结构，只能设置预定义在初始值（iDSS）里的键，所以动态键会触发"unknown key"错误。既然这个DatasourceState已经在多处使用，我们可以通过修改类的get/set方法，让它无缝支持动态键，同时完全兼容现有代码。

最优解决方案：扩展Record的方法，自动转发动态键到data字段 #

我们可以修改DatasourceState的get和set方法，让它把未知的动态键自动存储到data这个Map属性中，而预定义的键（_id、error、loading）仍然保持原有逻辑。这样现有代码的所有调用都不需要改动，同时能支持动态键。

修改后的代码如下：

import {Map, Record} from 'immutable';
export interface State {
  _id?: string;
  data: Map<string, any>;
  error: Error | null;
  loading: boolean;
}
export const iDSS: State = {
  _id: null,
  data: Map({}),
  error: null,
  loading: false
};
export class DatasourceState extends Record(iDSS) {
  constructor(params: Partial<State> = {}) {
    super(params);
  }
  get<T extends keyof State | string>(key: T): any {
    // 优先处理预定义键
    if (Object.keys(iDSS).includes(key as string)) {
      return super.get(key as keyof State);
    }
    // 动态键从data Map中获取
    return this.get('data').get(key as string);
  }
  set<T extends keyof State | string>(key: T, value: any): DatasourceState {
    // 预定义键直接调用Record的set
    if (Object.keys(iDSS).includes(key as string)) {
      return super.set(key as keyof State, value);
    }
    // 动态键存入data Map，并返回新的不可变实例
    return super.set('data', this.get('data').set(key as string, value));
  }
}

为什么这个方案可行？ #

1. 完全兼容现有代码：原来对_id、error、loading的get/set调用逻辑完全不变，不需要修改任何使用DatasourceState的地方。
2. 支持动态键：现在你可以直接调用state.set('widget-test-2', someValue)，这个键会自动存在data字段里，调用state.get('widget-test-2')也能正常获取值。
3. 保留不可变性：所有操作仍然返回新的实例，符合Immutable.js的设计原则，不会引入可变状态的问题。

备选方案：改用Map替代Record（需少量适配） #

如果不想修改Record的方法，也可以直接用Immutable的Map来替代DatasourceState类，Map天然支持动态键。只需要把类换成一个创建Map的工厂函数：

import {Map} from 'immutable';
export interface State {
  _id?: string;
  data: Map<string, any>;
  error: Error | null;
  loading: boolean;
}
export const iDSS: State = {
  _id: null,
  data: Map({}),
  error: null,
  loading: false
};
// 用工厂函数创建带默认值的Map
export type DatasourceState = Map<string, any>;
export const createDatasourceState = (params?: Partial<State>) => {
  return Map(iDSS).merge(params || {});
};

这个方案的缺点是如果现有代码中有new DatasourceState(params)的调用，需要改成createDatasourceState(params)，但胜在实现简单，没有额外的方法逻辑。

临时 workaround：直接操作data字段（不推荐） #

如果只是临时需要设置动态键，不想修改类的话，可以直接用setIn操作data字段：

// 设置动态键
const newState = state.setIn(['data', 'widget-test-2'], yourValue);
// 获取动态键
const value = state.getIn(['data', 'widget-test-2']);

但这个方案需要修改所有动态键的操作代码，不符合你"不改动其余实现"的需求，所以只作为临时应急方案。

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