90
rated 0 times
[
93]
[
3]
/ answers: 1 / hits: 6404
/ 3 Years ago, fri, august 13, 2021, 12:00:00
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.
More From » reactjs
