Redux filter array, UI doesn't update

Question

Using redux filter to remove an item yet it's removing from the DB but the UI isn't updating, not sure if i'm missing something stupid or being dumb.

The expected functionality would be that it removes the item from the database and UI would update

If i manually refresh the page, it's as it should be.

This is inside my goalService

const deleteGoal = async (goalId, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };

  const response = await axios.delete(API_URL + goalId, config);

  return response.data;
};

inside goalSlice

export const deleteGoal = createAsyncThunk(
  "goals/delete",
  async (id, thunkAPI) => {
    try {
      const token = thunkAPI.getState().auth.user.token;
      return await goalService.deleteGoal(id, token);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

export const goalSlice = createSlice({
  name: "goal",
  initialState,
  reducers: {
    reset: (state) => initialState,
  },
  extraReducers: (builder) => {
    builder
      .addCase(deleteGoal.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(deleteGoal.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.goals = state.goals.filter(
          (goal) => goal._id !== action.payload.id
        );
      })
      .addCase(deleteGoal.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload;
      });
  },
});

Edit 1:

goals: {
    goals: [
      {
        user: '624dfed264387649da83d8db',
        text: 'dylanjcain',
        _id: '624f53d6fd65e29ed17506e3',
        createdAt: '2022-04-07T21:12:54.748Z',
        updatedAt: '2022-04-07T21:12:54.748Z',
        __v: 0
      }
    ],
    isError: false,
    isSuccess: true,
    isLoading: false,
    message: ''
  }

Response from API

{
    "_id": "624f554afd65e29ed17506e6",
    "user": "624dfed264387649da83d8db",
    "text": "test123",
    "createdAt": "2022-04-07T21:19:06.435Z",
    "updatedAt": "2022-04-07T21:19:06.435Z",
    "__v": 0
}

Answer 1

Remember that the action payload for the thunk actions is the return value of the thunk. So in the delete case its return await goalService.deleteGoal(id, token); which ultimately resolves to return response.data; which is the response from your API.

So unless the API is returning a shape like { id: 123 } when you make your delete request your filter won't filter anything. Check to see that the API is giving the ID back. Otherwise you'll want to return {id: goalId} rather than response.data from your deleteGoal async function.

Answer 2

Solved:

(goal) => goal._id !== action.payload.id

So turns out i was being dumb, here's what i changed.

(goal) => goal._id !== action.payload._id