So I'm having a problem wherein my reducer is undefined and I don't freaking understand what it means. It's working when it is not array but when array it is not working.
My code should be like this.
In my groupSlice.ts it is something like this
export interface GroupState {
grouplist: (string)[];
}
const groupInitialState: GroupState = {
grouplist:['Binary','Jhonny Sins']
}
export const createGroup = createSlice({
name: 'group',
initialState:groupInitialState,
reducers:{
addGroup: (state,action) => {
state.grouplist.push(action.payload)
},
subGroup: ( state,action ) => {
state.grouplist.filter((group) => group != action.payload)
}
}
})
...
And then I store it here at my store.ts
import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import { createGroup } from '../features/counter/groupSlice';
export const store = configureStore({
reducer: {
groupings: createGroup.reducer,
},
});
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action<string>
>;
And then the hook.ts to pass on my state in reducer.
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
but when I pass it here in my Group.tsx it says my grouplist is undefined even I already input a an array at string[]
import React,{ useState,useEffect } from 'react'
import styles from './Group.module.css'
import {
addGroup,
subGroup
} from './groupSlice';
import { useAppSelector, useAppDispatch } from '../../app/hooks';
import { RootState } from '../../app/store';
// HERE IS MY ERROR THAT DOESN"T WORK>
export const selectCount = (state: RootState) => {
console.log(state.groupings?.grouplist)
const groupList = state.groupings?.grouplist
return groupList;
}
const Grouping = () => {
const groups = useAppSelector(selectCount);
const dispatch = useAppDispatch();
const [groupName, setGroupName] = useState('');
return (
...
)
}
export default Grouping
So I'm trying to say that my grouplist is undefined but I don't know why since I already input a list values there. Can anyone spotted the mistake here? Thanks.