reactjs - Tham số trong hằng số đã khởi tạo

Tôi đang trong tình huống mà tôi muốn phát một sự kiện trong Redux. Tôi nhận thấy việc định nghĩa const trong Javascript hơi rắc rối. Khi tôi thử thêm một tham số trực tiếp vào hàm useAppDispatch, linter báo lỗi.

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;

Nhưng khi tôi đặt hàm dispatch vào một hằng số, tôi có thể thêm một tham số:

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;

Có ai có thể giải thích điều này cho tôi không?

Câu trả lời #1

Về các khai báo const

const dispatch=useDispatch() không phải đang lưu một tham chiếu const tới hàm useDispatch, mà nó đang gọi hàm useDispatch và lưu một tham chiếu const tới giá trị trả về của nó, chính là hàm dispatch.

Trong Javascript (và Typescript) khai báo một biến const chỉ có nghĩa là biến đó không thể bị gán lại giá trị, mặc dù nó có thể bị biến đổi.

const foo = {
  bar: "bizz"
};

foo = { // <-- error, can't reassign foo
  bar: "buzz"
};

foo.bar = "buzz"; // <-- OK, we can mutate the foo object

Trong React, chúng ta khai báo các biến thành phần bằng const để chỉ ra rằng chúng sẽ không được gán lại giá trị trong suốt chu kỳ render của thành phần React, tức là tham chiếu sẽ không thay đổi trong quá trình render của thành phần.

Về hook useAppDispatch

useAppDispatch là một hook của React mà phải được gọi một mình trước tiên trước khi trả về hàm dispatch. Hàm useAppDispatch không nhận bất kỳ đối số nào. Đối tượng action được truyền vào hàm dispatch, không phải hook.

Không hoạt động

useAppDispatch({ type: "ADD_CLICKED" });

Hoạt động

const dispatch = useAppDispatch();

...

dispatch({ type: "ADD_CLICKED" });

Trong khi bạn có thể thử một thứ gì đó như useAppDispatch()({ type: "ADD_CLICKED" }); tôi sẽ không khuyến nghị điều này chút nào vì đây không phải là một mẫu sử dụng phổ biến và có khả năng làm giảm khả năng đọc/duy trì mã và thậm chí có thể vi phạm Quy tắc của Hooks tùy vào nơi bạn có thể đang cố gắng gọi nó.

Câu trả lời #2

useAppDispatch là một hook trả về một tham chiếu tới hàm dispatch từ cửa hàng Redux. Đây là tài liệu.

bạn phải gọi hook trước rồi sau đó bạn có thể sử dụng tham chiếu như thế này:

const dispatch = useAppDispatch()
dispatch({type: "ADD_CLICKED"});