如何在Immutable JS中将除指定项外的所有状态项设为none？

我完全懂你的痛点——用initialState.set(...)虽然能实现效果，但后续状态新增的非模态框数据会被直接覆盖掉，这肯定不是你想要的。这里有个既灵活又不依赖初始状态的解决方案：

方案一：基于命名约定自动识别模态框项 #

如果你的模态框状态key都遵循xxxModal的命名规则（比如loginModal、registerModal），可以用ImmutableJS的map方法遍历并处理每个状态项：

import { fromJS } from 'immutable';
import { SET_MODAL_VISIBLE } from './constants';

const initialState = fromJS({
  loginModal: 'none',
  registerModal: 'none',
  passwordModal: 'none',
  // 后续新增的非模态框状态，比如userProfile: null、theme: 'light'等
});

function modalReducer(state = initialState, action) {
  switch (action.type) {
    case SET_MODAL_VISIBLE:
      return state.map((value, key) => {
        // 只处理以Modal结尾的状态项
        if (key.endsWith('Modal')) {
          return key === action.modal ? 'block' : 'none';
        }
        // 非模态框状态保持原数值不变
        return value;
      });
    default:
      return state;
  }
}

export default modalReducer;

方案二：维护明确的模态框key列表 #

如果你的模态框命名没有统一规则，或者想更精准地控制哪些状态需要重置，可以维护一个模态框key的数组：

import { fromJS } from 'immutable';
import { SET_MODAL_VISIBLE } from './constants';

// 维护所有需要重置的模态框key
const MODAL_KEYS = ['loginModal', 'registerModal', 'passwordModal'];

const initialState = fromJS({
  loginModal: 'none',
  registerModal: 'none',
  passwordModal: 'none',
  // 新增的非模态框状态会被保留
  userInfo: null,
});

function modalReducer(state = initialState, action) {
  switch (action.type) {
    case SET_MODAL_VISIBLE:
      return state.map((value, key) => {
        if (MODAL_KEYS.includes(key)) {
          return key === action.modal ? 'block' : 'none';
        }
        return value;
      });
    default:
      return state;
  }
}

export default modalReducer;

方案优势 #

• 不依赖initialState：所有修改都基于当前的state对象，后续新增的非模态框状态会被完整保留，不会被意外重置。
• 扩展性强：方案一新增模态框时只要遵循命名规则就无需修改reducer；方案二只需往MODAL_KEYS数组里添加新key即可。
• 状态隔离清晰：只修改模态框相关的状态，不会影响其他业务状态。

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