Многие коллеги задавали мне варианты одного и того же вопроса:
«Если мы будем использовать хуки в нашем проекте, нам вообще понадобится Redux?»
«Неужели перехватчики React не делают Redux устаревшим? Разве я не могу делать то же самое, что Redux делает с хуками? »
Быстрый поиск в Google покажет, что люди задают эти вопросы по всему Интернету.
Быстрый ответ на вопрос «Заменяют ли перехватчики React Redux?» "не совсем".
Более подробный, но вежливый ответ: «Ну, это действительно зависит от типа проекта, над которым вы работаете».
Ответ, который я склонен говорить людям: «Я не уверен, что вы понимаете, о чем говорите». Есть несколько причин, по которым «React-хуки заменяют Redux?» это в корне ошибочный вопрос. Начать с:
Redux был и всегда был необязательным!
По словам Дэна Абрамова (одного из создателей Redux), Redux может и не понадобиться. Вам не нужно что-то заменять, если вам не нужно это использовать с самого начала.
Redux - это библиотека JavaScript, и если вы работаете с React (другая библиотека JavaScript), React-Redux - это еще одна библиотека JavaScript, которую вам необходимо импортировать в свое приложение, чтобы использовать Redux. Использование библиотек в ваших проектах увеличивает размер вашего пакета, что может увеличить время, необходимое вашему приложению для загрузки. Из-за этого вам не следует использовать какие-либо библиотеки, такие как jQuery, Redux, MobX (другая библиотека управления состоянием) или даже React, если у вас нет реальной причины их использовать.
Когда люди спрашивают, заменяют ли хуки Redux, они часто думают, что их приложениям на React необходимо использовать одно или другое. Это не так. Если вы пишете приложение, у которого нет большого количества состояний, которые необходимо сохранить, или если ваша иерархия компонентов достаточно проста, чтобы избежать чрезмерного бурения опор, тогда нет смысла использовать всю библиотеку управления состоянием. . Ваше состояние достаточно управляемо с тем, что может предложить React, с хуками или без них.
И даже если у вас есть огромное состояние приложения или иерархия компонентов React, которая изгибается и разветвляется, как корни древнего дерева, вам все равно не нужно использовать библиотеку управления состоянием. Бурение опор может быть утомительным, но старый добрый React дает вам множество вариантов управления состоянием, а хуки определенно могут помочь вам сохранить ваше состояние организованным. Redux - это легкая библиотека, но ее сложно настроить, она увеличивает размер пакета и требует различных компромиссов. Есть множество причин, по которым вы можете не использовать его в своем проекте, и все эти причины действительны. Redux не всегда нужен.
При этом есть много причин использовать Redux. Если ваш проект использовал Redux с самого начала, вероятно, для этого была веская причина, связана ли это с организацией (наличие предсказуемого единого источника истинности для состояния приложения может быть полезно в сложных приложениях), промежуточного программного обеспечения или Мощные инструменты разработчика и возможности отладки Redux. Если у вас была причина использовать Redux, хуки React не аннулируют эту причину. Если вам раньше был нужен Redux, он, вероятно, вам все еще понадобится. Это потому что
Перехватчики React и Redux не пытаются решить одни и те же проблемы!
Redux - это библиотека управления состоянием. Хуки являются частью недавнего обновления React и позволяют писать функциональные компоненты, которые делают все, что вам раньше требовалось от компонента класса.
Так почему же возможность писать приложения React без использования классов внезапно делает библиотеки управления состоянием устаревшими?
Нет.
Согласно документации, хуки React были разработаны по трем основным причинам:
- Трудно повторно использовать логику между компонентами класса.
- Методы жизненного цикла часто содержат запутанную смесь несвязанной логики.
- Классы могут быть трудными для понимания машин (и людей).
Обратите внимание, что ни одна из этих мотиваций не имеет прямого отношения к управлению государством.
При этом перехватчики React предоставляют вам несколько новых возможностей для управления состоянием приложения. Примечательно, что методы useState, useReducer и useContext дают вам новые способы поддержания вашего состояния, которые, возможно, лучше и организованнее, чем варианты, которые React давал нам до хуков.
Но в этих крючках нет ничего нового или волшебного, и они не делают библиотеки управления состоянием устаревшими, потому что правда в том,
Хуки React не позволяют вашему приложению React делать то, что раньше было невозможно!
Верно. Теперь вы можете писать функциональные компоненты, которые выполняют то, что раньше требовалось от классов, но эти функциональные компоненты не делают того, чего не могут сделать компоненты класса, за исключением, возможно, лучшей организации и возможности повторного использования кода. Они не обязательно улучшат ваше приложение. Хуки предназначены для улучшения взаимодействия с разработчиками.
useState и useReducer - это просто способы управления состоянием компонента, и они работают примерно так же, как this.state и this.setState в компонентах класса. Вам все равно нужно будет детализировать свой реквизит, используя эти методы.
useContext - это то, что люди, кажется, думают, забивают гвоздь в крышку гроба для Redux, поскольку он позволяет вам обмениваться состоянием приложения между компонентами без дополнительных настроек, но и здесь нет ничего нового. Контекстный API уже давно является частью React. Хук useContext просто позволяет вам использовать контекст без использования <Consumer> оболочки. И хотя некоторые разработчики предпочитают использовать контекст для управления всем состоянием своего приложения, это не совсем то, для чего оно предназначено. Согласно документам,
Контекст предназначен для обмена данными, которые можно считать «глобальными» для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочтительный язык.
Другими словами, то, что не ожидается часто обновляться.
В документации также рекомендуется использовать контекст экономно, поскольку «это затрудняет повторное использование компонентов». Они также предупреждают разработчиков, что можно легко вызвать ненужные повторные рендеры с контекстом, если разработчик не будет осторожен.
Я видел, как проекты успешно используют контекст React для управления состоянием приложения. Возможно. Другой вариант. Но управление состоянием - это не совсем то, для чего был разработан контекст, в то время как Redux и другие библиотеки управления состоянием были разработаны с учетом этой конкретной цели.
Кроме того, перехватчики React определенно не смерть Redux, потому что, если вы взглянете на документацию о последних обновлениях React-Redux, вы увидите, что
У React-Redux тоже есть свои хуки!
Верно. Перехватчики React помогают оживить библиотеку React-Redux и устранить некоторые из ее болевых точек, что далеко от ее «замены».
Подробнее о хуках React-Redux я расскажу в другой статье, но вот в чем суть. Перед перехватами вам нужно было определить функции mapStateToProps и mapDispatchToProps и обернуть компонент в функцию connect, чтобы создать компонент более высокого порядка, который передал бы функции диспетчеризации и части хранилища Redux, указанные вами в функциях сопоставления, в подключенный компонент как реквизит.
Давайте посмотрим на пример чрезвычайно простого приложения-счетчика (слишком простого, чтобы даже в Redux, на самом деле, но это просто информативный обзор). Представьте, что мы определили хранилище Redux и создателей increment и decrement действий где-то еще ( полный код Redux можно найти в статье, на которую я ссылался выше.)
Как раздражает. Было бы неплохо, если бы нам не пришлось заключать наш компонент в компонент более высокого порядка, чтобы получить доступ к хранилищу Redux? Что ж, вот тут-то и пригодятся хуки. Все хуки связаны с повторным использованием кода и устранением необходимости входить в «ад обертки» через компоненты более высокого порядка. Вот тот же компонент, преобразованный в функцию с помощью хуков React-Redux »
Разве это не красиво? Короче говоря, useSelector позволяет вам сохранять части вашего хранилища Redux как переменные в вашем компоненте. useDispatch предельно просто. Он просто дает вам функцию отправки, которую вы можете использовать для отправки обновлений в магазин Redux. Лучше всего то, что вам больше не нужно писать эти уродливые функции сопоставления и оборачивать свой компонент функцией connect. Теперь все прекрасно содержится в вашем компоненте. Он намного короче, поэтому удобнее для чтения и, возможно, лучше организован. Дело в том,
Нет необходимости рассматривать перехватчики React и Redux как конкурирующие технологии.
Очевидно, что эти две технологии могут прекрасно дополнять друг друга. Перехватчики React не «заменяют Redux», они просто дают вам новые и, возможно, более эффективные способы организации приложений React и позволяют писать компоненты с улучшенным подключением, если вы все же решите использовать Redux для управления своим состоянием.
Так что, пожалуйста, перестаньте спрашивать «Заменяют ли перехватчики React Redux?»
Вместо этого начните спрашивать себя «Какое приложение я делаю? Какие у меня потребности в государственном управлении? Есть ли смысл в Redux или это избыточно? Есть ли смысл в крючках, или я должен придерживаться классов? Если я решу использовать перехватчики Redux и React (или перехватчики MobX и React, или Redux с jQuery и без React - все это допустимые варианты, в зависимости от того, что вы делаете), как я могу это сделать? технологии дополняют друг друга и работают вместе в гармонии? »
