Expense Tracker - Seeking help on Step 7 - deleteTransaction

Hello,

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?

transactionSlice.js:

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({
  name:'transactions',
  initialState: initialState,
  reducers: {
    
    addTransaction: (state, action)=>{
      state[action.payload.category].push(action.payload);
    },

    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);
    },
1 Like

Hi @j-neff , can you explain to me how do these two codes work? The in front part state[action.payload.category]? I’m not really understand the code. Thanks in advance.

Hey @eugenegoh ,

I’ll try my best to explain it :slightly_smiling_face:

If we look at our store, we see that transactions is an object that has keys of the different categories. The values for each of these is an array that stores each transaction. So what we want our action to do is find the category within the transaction state object, and then interact (add/delete) with the array for that category.

So breaking it down, using the code example in the project description, the action.payload would return:

{
    housing: [ 
      { 
        category: 'housing', 
        description: 'rent', 
        amount: 400, 
        id: 123 
      }
    ],
    food: [ 
      { 
        category: 'food', 
        description: 'groceries on 1/12/2021', 
        amount: 50, 
        id: 456 
      },
      { 
        category: 'food', 
        description: 'dinner on 1/16/2021', 
        amount: 12, 
        id: 789 
      },
    ]
  }

and action.payload.category would just return the array. If it was for housing, we would see:

[ 
      { 
        category: 'housing', 
        description: 'rent', 
        amount: 400, 
        id: 123 
      }
    ]

Hope this helps!

1 Like