React Redux 给出错误：无效的挂钩调用。 钩子只能在 function 组件的内部调用

Question

I am new to react and redux, I am trying to call dispatch of redux but I am getting this error.

Invalid hook call. Hooks can only be called inside of the body of a function component.

Here is the scenario, I have separated axios calls to separate file and call it services and importing the same to components wherever it is required. If the service call returns 401, unauthorised, I want to navigate to Login page as well as clear the auth token that i stored in redux store.

Below is my code:

import axios from "axios";
import React from "react";
import { endPoints } from "./endPoints";
import storeSlice from "../Store/storeSlice";
import { updateAuth } from "../Store/storeSlice";
import { useNavigate } from 'react-router-dom';
import { useDispatch } from "react-redux";

export const getIncidentData = async (query, authToken) => {
    return await getData(endPoints.getIncidents + query, authToken)
}

function Logout() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const logout = function (e) {
        dispatch(updateAuth({
            authToken: ""
        }));
        navigate('/Login');
        e.stopPropagation();
    }
    return {logout};
}
const getData = async (url, authToken) => {
    const response = await axios({
        method: "get",
        url: endPoints.baseUrl + url,
        headers: {
            'x-access-token': authToken,
            "Access-Control-Allow-Origin": "*",
            'Content-Type': 'application/json',
            'X-AUTH-TOKEN': authToken
        },
        data: {},
    }).then((response) => {
        if (response.success)
            return response;
        if (response.errorCode == 401)
            Logout().logout();
    }).catch(error => {
        if (error.response.data.errorCode == 401)
            Logout().logout();
        const message = error ? error.code != "ERR_NETWORK" ? error.response.statusText : "Netwrok Error" : "Netwrok Error";
        return {
            data: {
                success: false,
                message: message,
                status: error.response.status
            }
        }
    });
}

Answer 1

useDispatch is only can be used on functional component. So, you should change the code like this.

function Logout() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const logout = function () {
      dispatch(updateAuth({
          authToken: ""
      }));
      navigate('/Login');
  }
  return <Button onClick={() => logout()}>Logout</Button>;
}

its because the functional component must return the view, or html tag component.

But, if you want to use the Logout as a functions, Usually I use this method:

logout.js

import { updateAuth } from '../Store/storeSlice';
import { useNavigate } from 'react-router-dom';

export const logout = () => (dispatch) => {
    dispatch(updateAuth(
        authToken: ''
    ));
    navigate('/login');
};

and for the view or component page:

ExampleView.jsx

import React from 'react';
import { logout } from '../../logout.js';
import { useDispatch } from "react-redux";

function ExampleView() {
    const dispatch = useDispatch();
    return (
        <div>
            <p>Is My Text</p>
            <Button onClick={() => dispatch(logout())}>Logout</Button>
        </div>
    );
};