Является ли использование Redux Hooks вместо connect () хорошим дизайном?

И connect, и useSelector/useDispatch - допустимые способы взаимодействия с хранилищем Redux из ваших компонентов React. Однако у них разные компромиссы. Я говорил об этих компромиссах в своем посте Мысли о React Hooks, Redux и разделение проблем, и мой доклад о ReactBoston 2019 на Крючки, HOC и компромиссы.

Подводя итог: да, хуки в целом ведут к компонентам, которые делают больше внутренне, по сравнению с отдельными компонентами, которые делают разные вещи. Оба подхода действительны - это вопрос того, что вы конкретно хотите спроектировать свою систему.

Что касается «преимуществ»: ловушки React-Redux требуют написания меньшего объема кода, чем connect, не добавляют косвенности и их легче использовать с TypeScript.

Лично я настоятельно рекомендую использовать хуки вместо connect()() по следующим причинам:

• Может быть легко вложен в другие пользовательские хуки для создания сложного поведения, чего нельзя сделать с connect()()
• Легче добавлять / удалять компонент во время кодирования и рефакторинга - семантика менее разрушительна (вы по-прежнему экспортируете то же самое)
• Разделение проблем - если ваш компонент использует несколько разных битов состояния редукции, все они поступают через одну mapStateToProps функцию, тогда как вы можете создать несколько хуков для разных битов состояния редукции.
• Упрощает дерево React - connect()() эффективно отображает два элемента React: «тупой» элемент и связанный. Это делает ваше дерево вдвое более вложенным!
• Более интуитивно понятный синтаксис - я часто обращаюсь к документации с помощью connect()(), хотя я использовал его сотни раз.

Согласитесь, что хуки немного более связаны, чем connect()() - если вас это беспокоит, вы можете добавить уровень абстракции:

import { useBadgers } from '../reducers/badgers';

function MyBadgerList() {
    const badgers = useBadgers();
}

с участием

// ../reducers/badgers.js
export const useBadgers = () => useSelector(state => state.badgers);