Redux Toolkit中reducer返回IBannerContent类型不匹配报错如何解决

你的报错核心是updateHomeContent reducer的返回值类型与slice的state类型IHome不匹配。
你当前定义的home slice的state是完整的IHome类型，包含bannerContent、expertiseContent、industryExpertise三个必填属性，但你在reducer中直接返回了类型为IBannerContent的payload，相当于直接把整个home state替换为仅包含banner数据的对象，既不符合类型定义，也会丢失另外两个字段的状态。

直接使用Redux Toolkit内置的Immer能力，修改draft state的对应字段即可，不需要返回值：

const homeSlice = createSlice({
   name: 'home',
   initialState,
   reducers: {
       updateHomeContent: (state, action: PayloadAction<IBannerContent>) => {
           // 直接修改draft的bannerContent属性，RTK会自动处理 immutable 更新
           state.bannerContent = action.payload;
       }
   }
});

如果你更习惯返回全新state的写法，需要保证返回的是完整的IHome类型对象：

updateHomeContent: (state, action: PayloadAction<IBannerContent>) => {
    return {
        ...state,
        bannerContent: action.payload
    }
}

Redux Toolkit的reducer支持两种写法：

• 可变写法：基于Immer封装，直接修改state草稿对象的属性，不需要返回值，这是RTK官方最推荐的写法，代码更简洁，也避免手动处理深拷贝的问题
• 不可变写法：手动返回完整的新state对象，要求返回值必须和state的类型完全一致，不能缺失必填属性

如果后续需要更新home state的不同字段，建议拆分多个职责单一的action，避免单个action承担过多逻辑，也更利于类型校验：

const homeSlice = createSlice({
   name: 'home',
   initialState,
   reducers: {
       updateBannerContent: (state, action: PayloadAction<IBannerContent>) => {
           state.bannerContent = action.payload;
       },
       updateExpertiseContent: (state, action: PayloadAction<IExpertiseContent>) => {
           state.expertiseContent = action.payload;
       },
       updateIndustryExpertise: (state, action: PayloadAction<IIndustryContent>) => {
           state.industryExpertise = action.payload;
       }
   }
});

export const { updateBannerContent, updateExpertiseContent, updateIndustryExpertise } = homeSlice.actions;

调用时根据要更新的字段选择对应action即可，类型安全性更高，也更易于后续维护。

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