javascript - React Redux 工具包 : type is not assignable to type 'CaseReducer

Question

Github链接:https://github.com/safiullah7/legan分支:Redux

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

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

当我在获取用户输入后更新 View 中的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

您的返回action.payload将替换整个切片。但看来您只想更新 state.bannerContent。

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