Redux typescript 出口 state 减速机阵列

Question

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.

Answer 1

In the subGroup reducer:

state.grouplist.filter(...)

This only returns the filtered array, it doesn't change it in place (unlike push ), so you need to reassign it:

state.grouplist = state.grouplist.filter(...)