Expense Tracker - Seeking help on Step 7 - deleteTransaction


I’m working on the Expense Tracker project under the learning Redux Toolkit, and I can not figure out where I went wrong.

My reducer deleteTransaction in transactionsSlice.js doesn’t actually remove the transaction. I have tried a couple different ways of removing the transaction, but none have worked so far. I also checked the redux developer tool, and it does show the deleteTransaction with the matching payload to the actionTransaction, but it doesn’t actually filter/remove it from the state. What am I missing?


import { createSlice } from '@reduxjs/toolkit';

export const CATEGORIES = ['housing', 'food', 'transportation', 'utilities', 'clothing', 'healthcare', 'personal', 'education', 'entertainment'];
const initialState = Object.fromEntries(CATEGORIES.map(category => [category, []]))

export const selectTransactions = (state) => state.transactions;
export const selectFlattenedTransactions = (state) => Object.values(state.transactions).reduce((a,b) => [...a, ...b], []);

const transactionsSlice = createSlice({
  initialState: initialState,
  reducers: {
    addTransaction: (state, action)=>{

    deleteTransaction: (state, action)=>{
      state[action.payload.category].filter(obj => obj.id !== action.payload.id);


export const {addTransaction, deleteTransaction } = transactionsSlice.actions;
export default transactionsSlice.reducer;

Here is a link to the full code: https://gist.github.com/7d09d52914a0df94c953bd69383700c0

As a quick mention, instead of deleting the original code as requested in the steps, I commented them out and moved them to the bottom so I could reference them.

Any help would be appreciated, thanks!

I found out my issue, it was because I was using the .filter(), which returns a new array instead of mutating the original. I switched it out with the following code, and it works great!

    deleteTransaction: (state, action)=>{
      const index = state[action.payload.category].findIndex( obj => obj.id === action.payload.id)
      state[action.payload.category].splice(index, 1);