reactjs - useDispatch using lower version of react-redux

Question

I am encountering a function not found using useDispatch. Supposedly, I should be using react-redux, unfortunately, my version is 6.0.0 and what's needed is 7.0.0 and above. I'd like to explore useDispatch or related hook to dispatch an action function inside a function component. How do I do this given that I cannot upgrade my react-redux & still use function component?

My alternative is to use class component, but again, I'd like to see this work in function component. Let me know what other details needed.

Here's my code.

import React, { useDispatch } from 'react';
import {
    Tooltip,
    IconButton,
    Icon,
} from '@material-ui/core';
import { logout } from './auth/store/actions';

const QuickLogout = () => {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(logout());
  };

  return (
    <Tooltip title="Logout" placement="bottom">
        <IconButton className="w-64 h-64" onClick={handleClick}>
            <Icon>exit_to_app</Icon>
        </IconButton>
    </Tooltip>
  );
};

export default QuickLogout;

And here's the error when compiling.

TypeError: Object(...) is not a function
QuickLogout
webpack-internal:///.....onents/QuickLogout.js:18:75

Edit: I mentioned exploring useDispatch or related hooks given that I cannot upgrade. I felt that this is a gray statement as I really just wanted my code to work. That means, solution is not limited to useDispatch or other hooks. Hence, I chose the answer that did not use useDispatch or hooks because it was plain simple. Apologies for the vague statement. I'll take note on improving my writing skills.

question from:https://stackoverflow.com/questions/65933001/usedispatch-using-lower-version-of-react-redux

Answer 1

If you can't upgrade your react-redux version to one with the useDispatch and useSelector React hooks you can still use the connect Higher Order Component to inject dispatch, or to even more simply wrap your action creators with a call to dispatch.

import { connect } from 'react-redux';

const QuickLogout = ({ logout }) => { // <-- destructure logout prop
  return (
    <Tooltip title="Logout" placement="bottom">
      <IconButton
        className="w-64 h-64"
        onClick={logout} // <-- assign to click handler
      >
        <Icon>exit_to_app</Icon>
      </IconButton>
    </Tooltip>
  );
};

const mapDispatchToProps = {
  logout, // <-- inject logout action as prop already wrapped by dispatch!
};

const ConnectedQuickLogout = connect(
  null, // <-- this is typically mapStateToProps, but we don't need it
  mapDispatchToProps,
)(QuickLogout);

export default ConnectedQuickLogout;

If you prefer to keep the code closer to as-is then you can simply connect it to the redux store and a dispatch prop is still injected.

import { connect } from 'react-redux';

const QuickLogout = ({ dispatch }) => {
  const handleClick = () => {
    dispatch(logout());
  };

  return (
    <Tooltip title="Logout" placement="bottom">
        <IconButton className="w-64 h-64" onClick={handleClick}>
            <Icon>exit_to_app</Icon>
        </IconButton>
    </Tooltip>
  );
};

export default connect()(QuickLogout);