如何为指定数据结构创建Redux可用的TypeScript类型并解决相关语法问题？

1. 定义正确的TypeScript类型/接口 #

先为数据结构里的子对象定义接口，再用Record类型描述整个状态结构，满足ESLint对替代索引签名的要求：

// 单个页面控制项的接口
interface PageControl {
  pageId: string;
  rowControls: any[]; // 如果rowControls有固定结构，替换为对应具体类型即可
}

// 整个状态的类型：键为字符串格式的审计ID，值为PageControl数组
type AuditState = Record<string, PageControl[]>;

2. 初始化状态 #

按照定义好的AuditState类型初始化，无需多余的空字符串键：

const initialState: AuditState = {};

3. 修复Reducer中的语法错误 #

你之前的reducer写法存在对象扩展语法错误，根据使用场景有两种正确写法：

场景1：使用Redux Toolkit（推荐，内置Immer支持直接修改状态） #

Redux Toolkit的Immer允许直接修改state，内部会自动生成不可变副本：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const auditSlice = createSlice({
  name: 'audit',
  initialState,
  reducers: {
    setAuditId: (state, action: PayloadAction<string>) => {
      state[action.payload] = [];
    },
  },
});

export const { setAuditId } = auditSlice.actions;
export default auditSlice.reducer;

场景2：纯Redux（手动处理不可变更新） #

如果不用Immer，需要手动创建新状态对象，保证不可变性：

function auditReducer(state = initialState, action: PayloadAction<string>) {
  switch (action.type) {
    case 'audit/setAuditId':
      return {
        ...state, // 复制原状态所有属性
        [action.payload]: [] // 新增或更新目标审计ID对应的空数组
      };
    default:
      return state;
  }
}

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