title: React Redux toolkit: type is not assignable to type 'CaseReducer<type, { payload: any; type: string; }>
body: <p>Github link: <a href="https://github.com/safiullah7/legan" rel="nofollow noreferrer">https://github.com/safiullah7/legan</a>
  Branch: Redux</p>
  <p>In my slice file, I have initial state of type IHome:</p>
  <pre><code>export interface IHome {
    bannerContent: IBannerContent,
    expertiseContent: IExpertiseContent,
    industryExpertise: IIndustryContent
  }
  </code></pre>
  <p>When I update the bannerContent:IBannerContent in the view after taking user input, I'm trying to pass the updated object to the function &quot;updateHomeContent&quot; I get the compiler error:</p>
  <pre><code>Type 'IBannerContent' is not assignable to type 'void | IHome | WritableDraft&lt;IHome&gt;'.
  
  </code></pre>
  <p>here is my slice file:</p>
  <pre><code>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&lt;IBannerContent&gt;) =&gt; {
             return action.payload;
         }
     }
  });
  
  export const { updateHomeContent } = homeSlice.actions;
  
  export const getHomeContentSelector = (state: RootState) =&gt; state.homeSlice;
  
  export default homeSlice.reducer;
  </code></pre>
  <p>here is my store.ts file:</p>
  <pre><code>import homeSlice from './features/home/home.slice';
  
  const store = configureStore({
      reducer: {
          homeSlice
      }
  });
  
  export type RootState = ReturnType&lt;typeof store.getState&gt;
  
  export type AppDispatch = typeof store.dispatch;
  
  export default store;
  </code></pre>
  <p>here is my store.hooks.ts file:</p>
  <pre><code>import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
  
  export const useAppDispatch = () =&gt; useDispatch&lt;AppDispatch&gt;();
  
  export const useAppSelector: TypedUseSelectorHook&lt;RootState&gt; = useSelector;
  </code></pre>
  <p>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.</p>