javascript - Why won't my handleLogout funtion work in my react app?

Question

I am trying to implement user auth, using react, react redux, and axios. My problem right now is when I click my logout button on my header, I want it to remove both access and refresh tokens from local storage, that get set at login. With the code I have now, I get no errors, but nothing happens when logout button gets clicked.

My handleLogout function:

    const history = useHistory();

    const handleLogout = () => {
        logout(history);
    };

my logout action that the above function uses:

export const logout = (history) => (dispatch) => {
    localStorage.removeItem('access_token');
    localStorage.removeItem('refresh_token');
    console.log('Made it here');
    dispatch({
        type: LOGOUT_SUCCESS,
    });
    history.push('/');
};

It seems to never reach this action as my console.log('made it here') never gets outputted.

material ui button with onClick set to use function:

<Button
color="primary"
variant="outlined"
className={classes.link}
onClick={handleLogout}
>
    Logout
</Button>

Answer 1

Since your logout function returns an arrow function, and that function expects an argument dispatch, you also need to pass-in that argument in order to work.

import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';

// inside your component
const history = useHistory();
const dispatch = useDispatch();

function handleLogout() {
    logout(history)(dispatch);
};

Depending on your implementation, you might also import your dispatch dependency directly, and not pass-in it as an argument, so you can avoid returning a function which returns another function.