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

Question

В настоящее время существует два понятия, как подключить компонент React к хранилищу редуксов: connect () и Redux Hooks . Мне было интересно, считается ли использование хуков хорошим дизайном программного обеспечения.

• Это вредит принципу единой ответственности, потому что компонент отвечает не только за рендеринг данных, но и за подключение к хранилищу.
• Существует тесная связь между компонентом и Redux. Будет сложно повторно использовать компонент или переключиться с Redux на другое решение для управления состоянием.

Есть ли какие-либо преимущества перехватчиков перед connect() в отношении качества программного обеспечения?

Answer 1

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

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

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

Answer 2

Лично я настоятельно рекомендую использовать хуки над 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);