Чтобы сначала понять REDUX с хуками, мы должны знать, почему избыточность, хуки были в react-JS, чтобы мы могли понять это:

РЕДУКС:

Redux был создан в 2015 году Дэном Абрамовым и Эндрю Кларком как решение для управления и предоставления состояния во всем приложении React. Redux создает глобальное состояние с именем Store и позволяет вам подключать компоненты к Store, чтобы получить доступ к глобальному состоянию.

  • Redux помогает предотвратить сверление реквизита и значительно упрощает управление состоянием многих компонентов.

При работе с React-Redux нужно понимать 3 вещи:

Redux состоит из Actions, Reducers, State и Store. Каждая вещь выполняет определенную задачу.

  • Действия. Действия — это объекты, которые должны иметь два свойства. Один описывает тип действий, а второй описывает, каким должно быть изменение состояния.
  • Редукторы: это чистые функции, которые принимают действия и предыдущее состояние приложения. Задача редьюсера — вернуть приложению новое состояние.
  • state:состояние компонента — это объект, который содержит некоторую информацию, которая может меняться в течение срока службы компонента.
  • Магазин. Он просто управляет состоянием приложения. Он объединяет действия и редьюсеры. Он хранит и изменяет состояние всего приложения. Для всего приложения будет только один магазин.

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

КРЮЧКИ:

Хуки — это новое дополнение к React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса. Хуки — это функции JavaScript, но при их использовании необходимо соблюдать два правила.

Правила использования хуков:

1. Мы можем использовать React Hooks только внутри функциональных компонентов.

2. Вызывать хуки только на верхнем уровне.

Ниже приведены хуки React:

  • состояние использования
  • использовать эффект
  • использовать контекст
  • использовать обратный вызов
  • использовать памятку
  • использовать ссылку
  • использовать Редуктор
  • пользовательские крючки

*Основными преимуществами реагирующих хуков являются возможность писать меньше, делать больше и повторно использовать логику с отслеживанием состояния.

Теперь у нас есть общее представление о Redux и Hooks, давайте перейдем к комбинации под названием Redux with Hooks.

Как использовать редукцию с хуками:

React Redux теперь включает хуки use selector() и use dispatch(), которые можно использовать вместо connecting.

селектор использования аналогичен подключению карты State-To-Props. Вы передаете ему функцию, которая принимает состояние хранилища Redux и возвращает интересующие вас фрагменты состояния.

use Dispatch заменяет карту подключения Dispatch-To-Props, но имеет меньший вес. Все, что он делает, это возвращает метод отправки вашего магазина, чтобы вы могли отправлять действия вручную. Мне нравится это изменение, так как создатели действий привязки (подключения) могут немного сбивать с толку новичков в React-Redux.

редукс с подключением:

Компонент класса использует метод connect() для подключения к хранилищу избыточности.

Функция connect() подключает компонент класса React к хранилищу Redux. Он предоставляет подключенному компоненту части данных, которые ему нужны из хранилища, и функции, которые он может использовать для отправки действий в хранилище.

Использование connect:

Редукс с хуками:

* Redux использует неизменность для упрощения разработки приложений и логики. Путем принудительной неизменяемости всех элементов в состоянии.

useSelector( ) :

const result: any = useSelector(селектор: функция, равенствоFn?: функция)
Позволяет извлекать данные из состояния хранилища Redux с помощью функции селектора.

useDispatch( ) :

const dispatch = useDispatch()
Этот хук возвращает ссылку на функцию отправки из хранилища Redux. Вы можете использовать его для отправки действий по мере необходимости.

Теперь с новыми хуками React Redux вместо connect:

Заключение :

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