Redux Toolkit存储FileList数组：如何消除非序列化值警告？

你遇到的警告是因为Redux要求状态必须是可序列化的值（如普通对象、数组、字符串、数字等），而File对象是浏览器提供的特殊实例，包含不可序列化的方法和内部属性，直接存入Redux Store会触发序列化检查警告。

以下是两种优化方案：

方案一：只存储文件元数据（推荐） #

通常业务中不需要把完整的File对象存入Store，只需保存用于展示或后续处理的关键信息即可，这样既符合Redux的序列化要求，也能满足业务需求。

修改Slice代码 #

const initialState = {
  listOfSelectedFiles: [] // 初始化改为空数组，移除测试用的[0]
};

export const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    addFileToList: (state, action) => {
      // 存储文件元数据的普通对象
      state.listOfSelectedFiles.push(action.payload);
    }
  }
});

修改组件中的文件处理函数 #

提取File对象的元数据，生成预览URL（如果需要），然后将普通对象存入Store：

const HandleSelectedFiles = event => {
  const file = event.target.files[0];
  if (!file) return;

  // 提取文件元数据，生成预览URL
  const fileMeta = {
    name: file.name,
    size: file.size,
    type: file.type,
    previewUrl: URL.createObjectURL(file)
  };

  dispatch(addFileToList(fileMeta));
};

注意：如果后续需要上传文件，建议在组件中通过useRef保存原始File对象，或者在提交时重新从input获取，避免依赖Store中的数据。

方案二：禁用特定路径的序列化检查（仅在必须存File对象时使用） #

如果你确实需要将完整的File对象存入Store，可以通过Redux Toolkit的配置忽略该路径的序列化检查，但此方案可能导致状态无法持久化（如使用redux-persist时），需谨慎使用。

修改Store配置 #

在创建Store时，通过getDefaultMiddleware指定忽略的Action或State路径：

import { configureStore } from '@reduxjs/toolkit';
import { modalSlice } from './modalSlice';

export const store = configureStore({
  reducer: {
    modal: modalSlice.reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略该Action的序列化检查
        ignoredActions: ['modal/addFileToList'],
        // 忽略该State路径的序列化检查
        ignoredPaths: ['modal.listOfSelectedFiles']
      }
    })
});

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