Error: You must pass a function as a selector to useSelector

Question

It showing error on useSelector ... image

const Header = (props) => {
  const dispatch = useDispatch();
  const history = useNavigate();
  const userName = useSelector(selectUserName);
  const userPhoto = useSelector(selectUserPhoto);

userName and userPhoto code

Answer 1

useSelector expects you to pass a callback function as a argument and in the callback function you are supposed to return whatever value you want from redux store, so for example your redux store consists of bunch of elements shown below

 {
      user: {
        firstname: "first name",
        lastname: "lastname"
      }
      imgUrl: "https://some-url"
    }

so now lets say if you want to access user field from the entire store you can do userInfo = useSelector((state) => state.user); this will return you the user object from the redux store

so since you were not passing the function as an argument to the useSelector hook, hence the error you must pass function as selector to useSelector so you are basically using the function as a selector to select what part of the redux store you want to access