How to use the react-redux.useDispatch function in react-redux

const DJBar = () => {
  ////
  // Hooks
  //
  const dispatch = useDispatch();
  const room = useSelector(RoomSelectors.currentRoom);
  const activeDjId = room.get('activeDj');
  const peerId = useSelector(BuoySelectors.peerId);

  ////
  // Rendering
  //
  const isDj = room.get('djs').indexOf(peerId) !== -1;

  if (!isDj) {
    return false;
  }

  return (
    <div>
      </div>

export function InsightTool(): JSX.Element {
  const { insightsIndex, recipe } = useSelector((s: AppState) => s);
  const [active, setActive] = React.useState(false);
  const dispatch = useDispatch();
  const classes = useStyles();

  /**
   * Get element to attach insights to.
   */
  function getElement(elements: HTMLElement[]): HTMLElement | undefined {
    // Remove #ast and any ancestors
    elements.splice(
      elements.findIndex((el) => el.id == 'ast'),
      elements.length,
    );

    // Remove non-ast elements
    elements = elements.filter((el) => el.getAttribute('ast') !== null);

    // Reverse list so it's [parent,child]

const DiscoverFiltersSidebar = ({ intl, match, history }) => {
  // redux-store
  const dispatch = useDispatch();
  const wobjects = useSelector(getFilteredObjects);
  const userLocation = useSelector(getUserLocation);
  const filters = useSelector(getAvailableFilters);
  const activeFilters = useSelector(getActiveFilters);
  const hasMap = useSelector(getHasMap);

  if (isEmpty(userLocation)) {
    dispatch(getCoordinates());
  }

  const setSearchArea = map => dispatch(setFiltersAndLoad({ ...activeFilters, map }));

  const handleMapSearchClick = map => {
    setSearchArea(map);
    dispatch(setMapFullscreenMode(false));
  };

export const InstrumentForm = (props) => {
  const {instrument, onChange, path, onDelete} = props;

  const dispatch = useDispatch();
  const classes = useStyles();

  const status = ObjectStatus(instrument.id || 'new', 'Instrument')

  const onSubmit = (values) => {
    console.log(values)
    values = ObjectCheckForInitialValues(instrument, values)
    console.log(values)
    if(isNil(instrument.id)){
      dispatch(Instrument.create(values))
    }else{
      dispatch(Instrument.update(instrument.id, values))
    }
  }

  return (

function GameModalTimesUp(props) {
  const dispatch = useDispatch();

  const [showModal, setShowModal] = useState(false);
  const score = useSelector(state => state.gameStatus.score, shallowEqual);
  const time = useSelector(state => state.gameStatus.time, shallowEqual);

  useEffect(() => {
    if (time === 0) {
      setShowModal(true);
    }
  }, [time, showModal]);

  function handlePlayAgain() {
    setShowModal(false);
    dispatch({
      type: gameConstants.RESTART
    });

export default function MultipleSlot({pos, options}) {
  const dispatch = useDispatch();
  return (
    <div style="{{top:">
      {options.map(option =&gt; (
        <option> dispatch(option.action())} /&gt;
      ))}
    </option></div>
  );
}

const Navbar = ({ history }) => {
  const [activeItem, setActiveItem] = useState("");
  const { user, isAuthenticated } = useSelector(state => state.auth);
  const dispatch = useDispatch();

  const handleItemClick = (_e, { name }) => {
    setActiveItem(name);
    history.push(`/${name}`);
  };

  const handleResultSelect = result =>
    history.push(`/games/${result.slug}`, result.slug);

  return (
    <menu>
      <div>
      
            <img src="/earth.svg" alt="logo"></div></menu>

function Home({componentId}: HomeProps) {
  function renderInner(props) {
    return (
      
    );
  }

  const dispatch = useDispatch();
  return 
  return (
    
  );
  return (