用“redux-thunk”实现“useDispatch”钩子的问题答案

【问题标题】：problem implementing "useDispatch" hook with "redux-thunk"用“redux-thunk”实现“useDispatch”钩子的问题
【发布时间】：2019-12-17 00:17:23
【问题描述】：

我尝试使用“useDispatch”钩子实现一个简单的注销功能。我使用 'redux-thunk' 作为中间件。我想在我的状态下使用注销按钮将 isAuthenticated 更改为 false。但我遇到了这个错误：

TypeError: dispatch is not a function


// Logout action:
export const logout = () => dispatch => {
  dispatch({ type: LOGOUT });
};

// Logout reducer:
case 'LOGOUT':
  localStorage.removeItem('token');
   return {
    ...state,
    token: null,
    isAuthenticated: false,
    loading: false
    };

// inside component:
const dispatch = useDispatch();

<a onClick={dispatch(logout)} href='#!'>

当我以异步格式实现 axios 时，这种使用“useDispatch”的方式效果很好。当我将鼠标悬停在 useDispatch 上时会有提示：

redux-thunk 用户注意：返回 dispatch 的返回类型 thunk 的功能不正确。但是，可以获得一个通过创建自己的自定义钩子正确键入调度函数从 store 的 dispatch 函数中输入如下：const useThunkDispatch = () => useDispatch();

我不知道如何解决此错误： TypeError: dispatch is not a function

P.S：这是我在 stackoverflow 中的第一个问题。 :)

非常感谢

【问题讨论】：

标签： react-redux

【解决方案1】：

欢迎来到 SO。看这一行：

<a onClick={dispatch(logout)} href='#!'>

dispatch(logout) 部分正在立即执行，而不是为onClick 提供一个函数来执行。你需要这样做：

<a onClick={() => dispatch(logout)} href='#!'>

这是一个匿名函数，不会立即执行，而只会被onClick 事件执行。

【讨论】：