如何在React中使用Redux Toolkit实现文本输入框失焦？解决Action中非可序列化值的报错问题

这个问题其实是Redux Toolkit（RTK）默认的序列化检查机制在起作用——哪怕你没把事件对象存进state，RTK也会检查action的payload是否可序列化，因为action会被Redux DevTools记录，非序列化值（比如DOM事件对象、元素引用）会导致devTools无法正常追踪状态变化，甚至引发潜在的bug。

接下来给你几个可行的解决方案，按推荐程度排序：

1. 最佳实践：组件内处理DOM操作，只传序列化数据给Redux #

Redux的核心职责是管理应用状态，而DOM元素的操作（比如让输入框失焦）属于组件的副作用，应该留在组件层面处理，而不是放到reducer里。这样既避免了序列化报错，又符合职责分离的设计原则。

修改你的组件代码：

export function ColorComponent ({color}: {color: TColor}) {
  let textInputRef = useRef(null);
  
  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      // 先在组件内完成失焦操作
      e.currentTarget.blur();
      // 只传递序列化的colorId给Redux，完全避开非序列化值
      store.dispatch(colorTextKeyPressAction({colorId: color.id}));
    }
  }

  return (
    <input 
      key={color.id} 
      ref={textInputRef} 
      type="text" 
      value={color.text}
      onKeyPress={handleKeyPress}
    />
  );
}

对应的reducer也可以简化，不再需要处理事件对象：

.addCase(a.colorTextKeyPress, (state, action) => {
  const {colorId} = action.payload;
  doUsefulStuff(colorId);
})

2. 用状态控制聚焦（替代直接调用blur()） #

如果你更倾向于用React的状态驱动方式，可以通过useState配合autoFocus属性来控制输入框的聚焦状态，这样也不需要传递事件对象：

export function ColorComponent ({color}: {color: TColor}) {
  const [shouldFocus, setShouldFocus] = useState(true);
  
  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      // 通过状态切换让输入框失焦
      setShouldFocus(false);
      store.dispatch(colorTextKeyPressAction({colorId: color.id}));
    }
  };

  // 点击输入框时重新设置聚焦状态
  const handleFocus = () => setShouldFocus(true);

  return (
    <input 
      key={color.id} 
      type="text" 
      value={color.text}
      onKeyPress={handleKeyPress}
      onFocus={handleFocus}
      autoFocus={shouldFocus}
    />
  );
}

不过这种方式在某些场景下可能不如直接调用blur()即时，但胜在符合React的状态驱动理念。

为什么不推荐传递ref或事件对象给Redux？ #

你提到的把textInputRef传给reducer的思路，本质上还是传递了非序列化的DOM元素引用，RTK的序列化检查依然会报错。而且Redux的reducer应该是纯函数，不应该直接操作DOM——这会打破Redux的纯函数原则，导致代码难以调试和维护。

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