Когда использовать родной React.useReducer Hook и чем он отличается от Redux - программирование
Подтвердить что ты не робот

Когда использовать родной React.useReducer Hook и чем он отличается от Redux

Итак, крючки доступны из React 16.8. Из их документации крючки являются заменой состояния функциональных компонентов. Основные хуки: useState, useEffect, useContext, но есть также несколько дополнительных хуков, одним из которых является useReducer, и похоже, что он использует ту же архитектуру action-dispatch что и Redux.

Вопросы будут, если он придет в качестве замены Redux из-за сходства?

Это подходит конкретным проектам лучше?

Где это будет соответствовать?

4b9b3361

Ответ 1

Redux - это библиотека, которая стимулирует поток данных определенным образом.

react-redux другой стороны, react-redux реализует подход, дружественный к React, и предоставляет множество промежуточного программного обеспечения и оболочек, чтобы потребителям библиотеки не приходилось настраивать весь процесс самостоятельно.

Хотя useReducer является частью того, как работает Redux, он не является полностью Redux. Для того чтобы вы могли использовать диспетчеризацию и useReducer в useReducer ваши компоненты, вам все равно придется использовать useContext и useReducer в комбинации, которая была бы подобна переизобретению колеса.

Вдобавок к этому useReducer просто предоставляет вам метод dispatch который вы можете использовать для отправки простых старых объектов как действий. Пока нет возможности добавить middlewares такое как thunk, saga и многие другие.

Вы также можете использовать несколько редукторов в своем приложении, используя useReducer но тогда разработчик должен будет управлять способом их объединения в единое хранилище.

Также React docs заявляет, что useReducer является альтернативой useState когда логика состояния сложна

useReducer обычно предпочтительнее useState когда у вас сложная логика состояния, которая включает в себя несколько значений, или когда следующее состояние зависит от предыдущего. useReducer также позволяет оптимизировать производительность компонентов, которые запускают глубокие обновления, поскольку вы можете передавать диспетчеризацию вместо обратных вызовов.

То, что эти крючки как useContext, useReducer делать то, что они устраняют зависимость от Redux для небольших приложений.

Ответ 2

useReducer является локальным для одного компонента - если вы хотите использовать это состояние во всем приложении, вам необходимо передать его (и/или функцию dispatch) через реквизиты. Это фактически просто более структурированная версия useState - фактически, useState реализован с использованием useReducer !

Redux, с другой стороны, делает немного больше - помимо прочего, он делает состояние доступным для всего приложения через контекст, а затем предоставляет API-интерфейсы для подключения глубоко вложенных компонентов к этому состоянию без передачи подпорок.

Итак, другими словами:

  • useReducer предоставляет вам структурированные обновления локальных состояний.
  • Redux предоставляет вам структурированные и централизованные обновления состояния.

Если вы хотите "свернуть свой собственный Redux" с помощью Hooks, вам нужно использовать некоторую комбинацию useReducer и useContext.

Ответ 3

Итак, если Redux и useReducer нужно сравнить

Redux:

  • централизованное государство
  • кует больше разъединения
  • имеет промежуточное ПО: Redux Thunk и Redux Logger
  • действия могут поразить только один магазин
  • может быть больше подходит для больших проектов

useReducer:

  • местное государство
  • нет компонента оболочки
  • нуждается в использовании контекста, чтобы заново изобрести колесо
  • поставляется с другими родными крючками
  • никаких дополнительных зависимостей не требуется
  • возможно несколько магазинов (на самом деле редукторы, которые могут действовать как магазины)
  • может быть больше подходит для небольших проектов