reactjs - 可以在同一个组件中多次调用 React-Redux 的 useDispatch() 吗？

Question

我见过人们像这样制作 Action 创建器(返回 Action 对象以避免拼写错误的函数):

// ReduxStuff.js

export const makeJuice = flavor => ({type: "MAKE_JUICE", load: flavor})

现在当一个组件需要制作果汁时，你可以这样做:

// MangoJuiceMaker.js

import { useDispatch } from "react-redux";
import { makeJuice } from "ReduxStuff";

const MangoJuiceMaker = () => {
    const dispatch = useDispatch();

    return <button onClick={dispatch(makeJuice("mango"))}>Make Mango Juice!</button>
}

我看到这种模式的问题是，每次组件需要更新状态时，必须进行两次导入，一次用于 useDispatch()，一次用于操作，因此我想出了以下解决方案:

// ReduxStuff.js

import { useDispatch } from "react-redux";

const useMakeJuice = flavor => {
    const dispatch = useDispatch();
    return () => {
        dispatch({type: "MAKE_JUICE", load: flavor})
    }
}

现在，当我的组件需要更新状态时，我只需执行一次这样的导入:

// MangoJuiceMaker.js

import { useMakeJuice } from "ReduxStuff";

const MangoJuiceMaker = () => {
    const makeJuice = useMakeJuice();

    return <button onClick={makeJuice("mango")}>Make Mango Juice!</button>
}

这个自定义钩子(Hook)实际上很好用。我根本没有任何问题。但是有一件事会磨我的齿轮。如果同一个组件以多种方式更新存储，则多次调用 useDispatch()。例子:

// MangoJuiceAndBreadMaker.js

import { useMakeJuice, useMakeBread } from "ReduxStuff";

const MangoJuiceAndBreadMaker = () => {
    const makeJuice = useMakeJuice(); // This calls useDispatch()
    const makeBread = useMakeBread(); // This calls useDispatch() again

    return(
        <div>
            <button onClick={makeJuice("mango")}>Make Mango Juice!</button>
            <button onClick={makeBread()}>Make Bread!</button>
        </div>
    )
}

尽管这个解决方案到目前为止工作正常，但我觉得这是一种反模式，应该避免。我没有看到人们在他们的代码中使用它(我用谷歌搜索和谷歌搜索并没有发现使用这种方法的一个实例)这一事实让我感到不安全。

你对此有何看法？

Answer 1

我不相信这有什么问题，useDispatch不是一些昂贵的操作或任何东西，它实际上只是给那个钩子(Hook)/组件/任何对 dispatch 的引用。功能。就像在不同的文件中导入相同的组件/脚本一样，这完全没问题。

需要注意的一点，基于 react redux docs here , 是在创建使用 dispatch 的回调时，应该用 useCallback 来内存它们。