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