React Redux 工具包：类型不可分配给类型 'CaseReducer<type, { payload: any; type: string; }>

Question

Github link: https://github.com/safiullah7/legan 分支：Redux

在我的切片文件中，我有 IHome 类型的初始状态：

export interface IHome {
  bannerContent: IBannerContent,
  expertiseContent: IExpertiseContent,
  industryExpertise: IIndustryContent
}

当我在获取用户输入后更新视图中的 bannerContent:IBannerContent 时，我试图将更新后的对象传递给函数“updateHomeContent”，但出现编译器错误：

Type 'IBannerContent' is not assignable to type 'void | IHome | WritableDraft<IHome>'.

这是我的切片文件：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { IHome } from '../../models/home';
import { RootState } from '../../store';

const initialState: IHome = {
   bannerContent: {
       heading: 'Legal asdad',
       mainText: 'The asdasdasdasd',
       bottomText: 'You can asdadsad you shortly',
   },
   expertiseContent: {
       heading: 'LEGAL asdsad',
       mainText: 'Our niche is solutions.',
       contentList: [
           {
           heading: 'DATA',
           subHeading: 'GDPR ',
           panel: 'panel1',
           icon: 'rocket',
           list: [
               'GDPR',
               'International',
               'Privacy',
               'Data',
               'Compliance',
               'Canada',
           ],
           },
           {
           heading: 'TECH CONTRACTS',
           subHeading: 'EULA',
           panel: 'panel2',
           icon: 'world',
           list: [
               'GDPR',
               'International',
           ],
           },
           {
           heading: 'INTELLECTUAL PROPERTY',
           subHeading: 'Trademark',
           panel: 'panel3',
           icon: 'intellectual',
           list: [
               'GDPR end-to-end compliance (Data mapping)',
               'International transfers of perso'
           ],
           },
           {
           heading: 'INTERNET LAW',
           subHeading: 'Website Take-Downs | DMCA | UDRP',
           panel: 'panel4',
           icon: 'rocket2',
           list: [
               'GDPR end-to',
           ],
           },
       ]
   },
   industryExpertise: {
       heading: 'INDUSTRY EXPERTISE',
       mainText: 'Our sindustries.',
       contentList: [
           {
           heading: 'SOFTWARE',
           id: 0,
           list: [
               'Lorem',
           ],
           },
           {
           heading: 'MOBILE APPs',
           id: 1,
           list: [
               'voluptas illum ',
               'Lorem ipsum illum ',
           ],
           },
           {
           heading: 'START-UPs',
           id: 2,
           list: [
               'Lorem illum ',
               'Lorem ipsum illum',
           ],
           },
           {
           heading: 'E-COMMERCE',
           id: 3,
           list: [
               'Lorem illum ',
           ],
           },
           {
           heading: 'VIDEO GAMING',
           id: 4,
           list: [
               'Lorem illum ',
           ],
           },
           {
           heading: 'ARTIFICIAL INTELLIGENCE',
           id: 5,
           list: [
               'Lorem illum ',
           ],
           },
           {
           heading: 'BLOCKCHAIN',
           id: 6,
           list: [
               'Lorem illum ',
           ],
           },
       ]
   }
};

const homeSlice = createSlice({
   name: 'home',
   initialState,
   reducers: {
       updateHomeContent: (state, action: PayloadAction<IBannerContent>) => {
           return action.payload;
       }
   }
});

export const { updateHomeContent } = homeSlice.actions;

export const getHomeContentSelector = (state: RootState) => state.homeSlice;

export default homeSlice.reducer;

这是我的 store.ts 文件：

import homeSlice from './features/home/home.slice';

const store = configureStore({
    reducer: {
        homeSlice
    }
});

export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch;

export default store;

这是我的 store.hooks.ts 文件：

import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';

export const useAppDispatch = () => useDispatch<AppDispatch>();

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

我是 redux 工具包的新手，非常感谢您的帮助和概念许可。另外，如果有更好的方法可以做我想做的事情，请提出建议。

Answer 1

您的 return action.payload 将替换整个切片。但是您似乎只想更新 state.bannerContent.

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

React Redux 工具包：类型不可分配给类型 'CaseReducer<type, { payload: any; type: string; }>

React Redux toolkit: type is not assignable to type 'CaseReducer<type, { payload: any; type: string; }>

javascript

reactjs

redux-toolkit