Help with expense tracker redux toolkit project

Hello,

I’m working on the expense tracker project but I ran into a problem to the point of being stuck .
I have completed point 4 , but the app doesn’t render. The code and console error messages are below:
code :

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

export const CATEGORIES = ['housing', 'food', 'transportation', 'utilities', 'clothing', 'healthcare', 'personal', 'education', 'entertainment'];
const initialState = CATEGORIES.map(category => ({ category: category, amount: 0 }))

const budgetsSlice = createSlice({
  name: 'budgets',
  initialState: initialState,
  reducers: {
    editBudget: (state, action) => {
      return state.map((budget) => {
        if (budget.category === action.payload.category) {
          budget.amount = action.payload.amount;
        };
        return budget;
      });
    }
  }
});

export const {editBudget} = budgetsSlice.actions;
export default budgetsSlice.reducer; 

/*export const editBudget = (budget) => {
  return {
    type: 'budgets/editBudget',
    payload: budget
  }
}

const budgetsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'budgets/editBudget':
      const newBudgets = state.map(budget => {
        if (budget.category === action.payload.category) {
          return action.payload;
        }
        return budget;
      })
      return newBudgets;
    default:
      return state;
  }
}

export const selectBudgets = (state) => state.budgets;
export default budgetsReducer;
*/

console error messages :
react-16-redux-4-bundle.min.js:121 You are currently using minified code outside of NODE_ENV === “production”. This means that you are running a slower development build of Redux. You can use loose-envify (GitHub - zertosh/loose-envify: Like envify but much faster) for browserify or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) to ensure you have the correct code for your production build.
d @ react-16-redux-4-bundle.min.js:121
(anonymous) @ react-16-redux-4-bundle.min.js:121
require.redux._process @ react-16-redux-4-bundle.min.js:121
t @ react-16-redux-4-bundle.min.js:35
(anonymous) @ react-16-redux-4-bundle.min.js:35
require.358…/wrapMapToProps @ react-16-redux-4-bundle.min.js:79
t @ react-16-redux-4-bundle.min.js:35
(anonymous) @ react-16-redux-4-bundle.min.js:35
require.357…/components/connectAdvanced @ react-16-redux-4-bundle.min.js:79
t @ react-16-redux-4-bundle.min.js:35
(anonymous) @ react-16-redux-4-bundle.min.js:35
require.react-redux…/components/Context @ react-16-redux-4-bundle.min.js:121
t @ react-16-redux-4-bundle.min.js:35
o @ index.compiled.js:1
(anonymous) @ index.compiled.js:1
14…/…/components/TransactionForm @ index.compiled.js:643
o @ index.compiled.js:1
(anonymous) @ index.compiled.js:1
6…/features/budgets/Budgets @ index.compiled.js:225
o @ index.compiled.js:1
(anonymous) @ index.compiled.js:1
16…/app/App @ index.compiled.js:763
o @ index.compiled.js:1
r @ index.compiled.js:1
(anonymous) @ index.compiled.js:1

react-16-redux-4-bundle.min.js:79 Uncaught Error: You must pass a selector to useSelector
at react-16-redux-4-bundle.min.js:79:17898
at Transactions (index.compiled.js:554:45)
at dd (react-16-redux-4-bundle.min.js:58:70313)
at ws (react-16-redux-4-bundle.min.js:58:85418)
at Bs (react-16-redux-4-bundle.min.js:58:95454)
at HTMLUnknownElement.o (react-16-redux-4-bundle.min.js:58:146816)
at Object.op (react-16-redux-4-bundle.min.js:58:147781)
at s (react-16-redux-4-bundle.min.js:46:723)
at Sv (react-16-redux-4-bundle.min.js:58:216430)
at fl (react-16-redux-4-bundle.min.js:58:121669)
(anonymous) @ react-16-redux-4-bundle.min.js:79
Transactions @ index.compiled.js:554
dd @ react-16-redux-4-bundle.min.js:58
ws @ react-16-redux-4-bundle.min.js:58
Bs @ react-16-redux-4-bundle.min.js:58
o @ react-16-redux-4-bundle.min.js:58
op @ react-16-redux-4-bundle.min.js:58
s @ react-16-redux-4-bundle.min.js:46
Sv @ react-16-redux-4-bundle.min.js:58
fl @ react-16-redux-4-bundle.min.js:58
cl @ react-16-redux-4-bundle.min.js:58
Uu @ react-16-redux-4-bundle.min.js:58
Du @ react-16-redux-4-bundle.min.js:58
Cc @ react-16-redux-4-bundle.min.js:58
(anonymous) @ react-16-redux-4-bundle.min.js:58
Ku @ react-16-redux-4-bundle.min.js:58
Bc @ react-16-redux-4-bundle.min.js:58
n.render @ react-16-redux-4-bundle.min.js:58
16…/app/App @ index.compiled.js:771
o @ index.compiled.js:1
r @ index.compiled.js:1
(anonymous) @ index.compiled.js:1
react-16-redux-4-bundle.min.js:58 The above error occurred in the component:
in Transactions (created by App)
in header (created by App)
in div (created by App)
in App
in o
in StrictMode

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
Js @ react-16-redux-4-bundle.min.js:58
Zs @ react-16-redux-4-bundle.min.js:58
Pu.o.callback @ react-16-redux-4-bundle.min.js:58
ba @ react-16-redux-4-bundle.min.js:58
va @ react-16-redux-4-bundle.min.js:58
du @ react-16-redux-4-bundle.min.js:58
vl @ react-16-redux-4-bundle.min.js:58
o @ react-16-redux-4-bundle.min.js:58
op @ react-16-redux-4-bundle.min.js:58
s @ react-16-redux-4-bundle.min.js:46
bl @ react-16-redux-4-bundle.min.js:58
T @ react-16-redux-4-bundle.min.js:114
Nr @ react-16-redux-4-bundle.min.js:58
yl @ react-16-redux-4-bundle.min.js:58
Wu @ react-16-redux-4-bundle.min.js:58
Uu @ react-16-redux-4-bundle.min.js:58
Du @ react-16-redux-4-bundle.min.js:58
Cc @ react-16-redux-4-bundle.min.js:58
(anonymous) @ react-16-redux-4-bundle.min.js:58
Ku @ react-16-redux-4-bundle.min.js:58
Bc @ react-16-redux-4-bundle.min.js:58
n.render @ react-16-redux-4-bundle.min.js:58
16…/app/App @ index.compiled.js:771
o @ index.compiled.js:1
r @ index.compiled.js:1
(anonymous) @ index.compiled.js:1
react-16-redux-4-bundle.min.js:58 Uncaught Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
at Object.op (react-16-redux-4-bundle.min.js:58:147853)
at s (react-16-redux-4-bundle.min.js:46:723)
at Sv (react-16-redux-4-bundle.min.js:58:216430)
at fl (react-16-redux-4-bundle.min.js:58:121669)
at cl (react-16-redux-4-bundle.min.js:58:121542)
at Uu (react-16-redux-4-bundle.min.js:58:119142)
at Du (react-16-redux-4-bundle.min.js:58:115780)
at Cc (react-16-redux-4-bundle.min.js:58:142415)
at react-16-redux-4-bundle.min.js:58:144902
at Ku (react-16-redux-4-bundle.min.js:58:120118)
op @ react-16-redux-4-bundle.min.js:58
s @ react-16-redux-4-bundle.min.js:46
Sv @ react-16-redux-4-bundle.min.js:58
fl @ react-16-redux-4-bundle.min.js:58
cl @ react-16-redux-4-bundle.min.js:58
Uu @ react-16-redux-4-bundle.min.js:58
Du @ react-16-redux-4-bundle.min.js:58
Cc @ react-16-redux-4-bundle.min.js:58
(anonymous) @ react-16-redux-4-bundle.min.js:58
Ku @ react-16-redux-4-bundle.min.js:58
Bc @ react-16-redux-4-bundle.min.js:58
n.render @ react-16-redux-4-bundle.min.js:58
16…/app/App @ index.compiled.js:771
o @ index.compiled.js:1
r @ index.compiled.js:1
(anonymous) @ index.compiled.js:1

1 Like

Hey! Im doing the exact same exercise and I’m getting the exact same error. Any chance you remember how you fixed it? Im thrown off by the fact that at the end of exercise 4 it says Once you’ve completed this task, you should be able to edit budgets and see your changes reflected in the app.
Maybe the UI isn’t supposed to render until something else is fixed down the line and codecademy just made a mistake there?
super stuck, appreciate any help. Thanks!!

Hi,

If I remember correctly it was something simple. I had to update my slices names in the general state.

No worries! I actually found the answer right after I sent you this. I had accidentally deleted the selector “selectBudgets” when editing the exports for action and reducer.
Thanks anyway!

It’s nice when it turns out to be something simple. Good luck!