Redux Expense Tracker Exercise 7

This exercise requires you to use the toolkit to create a slice. I understand that Redux Toolkit uses Immer, however, what I don’t understand is that in exercise 7, the hints recommend you to ‘filter out’ an element to delete it from an array.

Filtering an array doesn’t mutate it though, so the proxy that Immer creates won’t get modified if you simply filter the array.

For my deleteTransaction reducer, I spliced the state array to remove the transaction at the desired index but I’m assuming this isn’t the correct way to go about it?

deleteTransaction = (state, action) => {

      const transactionIndexToDelete = state[action.payload.category].findIndex(transaction => transaction.id === action.payload.id);

      if (transactionIndexToDelete) {

        state[action.payload.category].splice(transactionIndexToDelete, 1)

      }

    }

I was under the impression that using methods to mutate the state parameter was desirable because Immer was being used under the hood. If I simply return a filtered array, it seems I’m getting no use out of Immer.

You need to return a new state from the reducer.

Edit: sorry, I can’t read today this is redux toolkit, that’s what you get for skimming.

It’s hard to tell without seeing the full code, e.g. you might not be using createReducer.