problem with selector in react.js . If i use selector in react.js and if i export in one of the component it shows error in that selector part

Question

export const initialState = {
  basket: [],
};

// reducer takes care about adding and removing items from the basket

// selector
export const getBasketTotal = (basket) =>
  basket?.reduce((amount, item) => item.price + amount, 0);

// the above code helps us tally the total amount of products

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD TO BASKET":
      return {
        ...state,
        basket: [...state.basket, action.items],
      };
    // the above code helps us to push items to the basket with current elemnts in the basket
    default:
      return state;
  }
};
export default reducer;

the error it is shows is in export const getBasketTotal and the error it shows is anonymous function

Answer 1

Selectors typically receive the entire state object. I suspect you want to access a state.basket.

export const getBasketTotal = (state) =>
  state.basket?.reduce((amount, item) => item.price + amount, 0);

Something else that looks a little suspect to me is the "ADD TO BASKET" action:

basket: [...state.basket, action.items],

action.items IMO implies multiple items, so I think you may want to spread the items into the basket array.

basket: [...state.basket, ...action.items],