Redux-toolkit state becomes undefined after performing filter on a empty state array-CodePudding

I just started using Redux-toolkit in my project. One thing I came across is stated in the title.

Slice Component

import { createSlice } from '@reduxjs/toolkit'

const followingSlice = createSlice({
    name: 'followings',
    initialState:{
        followings_list: []
    },
    reducers:{
        addFollowing(state, action) {
            const user = action.payload.user
            state.followings_list.push(user)
        },
        removeFollowing(state, action){
            const id = action.payload.user.id_str
            return state.followings_list.filter(following => 
                following.id_str!==id)
        }
    }
})

export const { addFollowing, removeFollowing} = followingSlice.actions

export const selectFollowings = (state) => state.following.followings_list

export default followingSlice.reducer

Store Component

import { configureStore } from '@reduxjs/toolkit'
import FollowingsReducer from '../reducers/FollowingsSlice'

export default configureStore({
    reducer:{
        following: FollowingsReducer
    }
})

Essentially there are two buttons, one is to add an item to the followings_list, another one is to remove from it. But if I remove an 'item', even before there is an item in the followings_list, my followings_list state becomes undefined or at least it disappears from the following reducer?

import {useDispatch } from 'react-redux';
import{
  removeFollowing,
} from "../reducers/FollowingsSlice";

const dispatch = useDispatch()
// this line is called when the button is clicked, I omit other codes
dispatch(removeFollowing({something}))

Before I called the remove action:

After I called the action:

CodePudding user response：

Hi~
Have you already solved it?

I checked your code.
in your Slice Component code

import { createSlice } from '@reduxjs/toolkit'

const followingSlice = createSlice({
    name: 'followings',
    initialState:{
        followings_list: []
    },
    reducers:{
        addFollowing(state, action) {
            const user = action.payload.user
            state.followings_list.push(user)
        },
        removeFollowing(state, action){
            const id = action.payload.user.id_str
            return state.followings_list.filter(following => 
                following.id_str!==id)
        }
    }
})

export const { addFollowing, removeFollowing} = followingSlice.actions

export const selectFollowings = (state) => state.following.followings_list

export default followingSlice.reducer

The part corresponding to the following in the above slice component code

removeFollowing(state, action){
            const id = action.payload.user.id_str
            return state.followings_list.filter(following => 
                following.id_str!==id)
        }

Instead of 'return' the filter value right away, you should assign the filtered result value to the state. You can do it by changing the code like below

removeFollowing(state, action){
            const id = action.payload.user.id_str;
            let filtered = state.followings_list.filter(following => 
                following.id_str!==id);
            
            state.followings_list = filtered;
        }

Hope this helps you!