Question

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

TypeError：分派不是函数


// 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的用户的说明：返回的调度的返回类型恶作剧功能不正确。但是，有可能获得通过创建自己的自定义钩子来正确键入调度函数从商店的分派函数键入，如下所示： const useThunkDispatch =（）=> useDispatch（）;

我不知道如何解决此错误： TypeError：调度不是函数

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

非常感谢

Answer 1

欢迎来到SO。看这一行：

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

dispatch(logout)部分正在立即执行，而不是提供onClick执行的功能。您需要这样做：

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

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

使用“ redux-thunk”实现“ useDispatch”钩子时出现问题

1 个答案: