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

Question

Github link: https://github.com/safiullah7/legan Branch: Redux

In my slice file, I have initial state of type IHome:

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

When I update the bannerContent:IBannerContent in the view after taking user input, I'm trying to pass the updated object to the function "updateHomeContent" I get the compiler error:

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

here is my slice file:

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;

here is my store.ts file:

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;

here is my store.hooks.ts file:

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

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

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

I'm new to redux toolkit and I would appreciate your help and concept clearance. Also, if there are better ways to do what I want to do,, please suggest.

Answer 1

Your return action.payload would replace that whole slice. But it seems you only want to update state.bannerContent.

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