Можно ли вызывать функцию useDispatch () в React-Redux несколько раз в одном и том же компоненте?

Question

Я видел, как люди делают создателей действий (функции, которые возвращают объект 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>
}

Этот пользовательский хук отлично работает на самом деле. У меня не было никаких проблем вообще. Но есть одна вещь, которая затирает мои шестерни. Если один и тот же компонент обновляет хранилище несколькими способами, то 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 - это не какая-то дорогая операция или что-то в этом роде, она буквально просто дает этому хуку / компоненту / какой-либо ссылке на функцию dispatch. Как и при импорте одного и того же компонента / скрипта в разные файлы, это совершенно нормально.

Следует отметить, что на основе реагирует на редукционные документы , это то, что при создании обратных вызовов, использующих диспетчеризацию, они должны запомните с useCallback