我想在Redux中调度一个事件。我注意到在JavaScript中定义const有点令人困惑。当我试图直接向useAppDispatch函数添加参数时，linter标记了一个错误。
import { PlusCircleIcon } from "@heroicons/react/20/solid";
import React from "react";
import { useAppDispatch } from "../../store/hooks";
const OptionsPanelAddAction = ():JSX.Element => {
const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>):void => {
e.preventDefault();
useAppDispatch({type: "ADD_CLICKED"}); ---> Expected 0 arguments, but got 1
}
return (
<div className="bg-white m-4 p-2 drop-shadow-sm flex justify-center">
<div>
<a><PlusCircleIcon className="h-6 w-6" /></a>
</div>
</div>
)
}
export default OptionsPanelAddAction;但是当我把dispatch函数放在const中时，我可以添加一个参数：
import { PlusCircleIcon } from "@heroicons/react/20/solid";
import React from "react";
import { useAppDispatch } from "../../store/hooks";
const OptionsPanelAddAction = ():JSX.Element => {
const dispatch = useAppDispatch();
const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>):void => {
e.preventDefault();
dispatch({type: "ADD_CLICKED"}); ---> No Error!
}
return (
<div className="bg-white m-4 p-2 drop-shadow-sm flex justify-center">
<div>
<a><PlusCircleIcon className="h-6 w-6" /></a>
</div>
</div>
)
}
export default OptionsPanelAddAction;有人能给我解释一下吗
2条答案
按热度按时间j8yoct9x1#
关于
const声明const dispatch = useDispatch()没有存储const对useDispatch函数的引用，而是调用useDispatch函数并存储const对它的 * 返回值 * 的引用，即dispatch函数。在JavaScript（and Typescript）中，声明变量
const只意味着该变量不能被重新赋值，尽管它可以被改变。在React中，我们声明了组件变量
const，以表明它们在React组件渲染周期内不会被重新分配值，即在组件渲染期间，引用不会改变。关于
useAppDispatch钩子useAppDispatch是一个React钩子，在返回dispatch函数之前，必须先 * 自己调用 *。useAppDispatch函数不消耗任何参数。action对象传递给dispatch函数，而不是钩子。不工作
工作
虽然你可以尝试像
useAppDispatch()({ type: "ADD_CLICKED" });这样的东西，但我不推荐这样做，因为它不是一个常用的模式，可能会损害可读性/可维护性，甚至可能会破坏你可能试图调用它的Rules of Hooks。4ktjp1zp2#
useAppDispatch是一个钩子，它从Redux store返回一个对dispatch函数的引用。医生来了你必须调用钩子，然后你可以像这样使用引用：