javascript - 调用两次的函数反应 redux 工具包

Question

我正在创建一个能够使用电子打开文件夹的 JavaScript 应用程序。前端是用 Typescript、React 和 redux 工具包编写的。
每当我单击按钮以显示打开对话框时，它会出现两次，一个接一个。
我试过调试，发现减速器只被调用一次，但 ipcRenderer 函数被调用了两次。
下面是代码

// Api that talks to electron
export function openFolder() {
  const files: Directory = ipcRenderer.sendSync("open-folder");
  return files;
}

// component that initiates the whole process
const Sidebar: React.FC = () => {

  const { mainDir } = useSelector(getEditor);

  const dispatch = useDispatch();

  const handleDirLoad = () => {
    dispatch(openDir());
  }

  return (
    <div className="sidebar-container" onClick={handleDirLoad}>
      <SidebarMenu dir={mainDir}/>
    </div>
  )

}

// The slice reducer
const editorSlice = createSlice({
  name: "editor",
  initialState,
  reducers: {

    openDir: (state) => {
      let folder = openFolder();
      return {
        ...state,
        mainDir: folder
      }
    }

  }
});