Заменяют ли useSelector() и useDispatch() mapStateToProps() и mapDispatchToProps()?

Я новичок в React и Redux, и многим руководствам, которыми я пользовался, уже пару лет. Кажется, что хуки как в React, так и в Redux относительно новы, и общие рекомендации, которые я видел, заключаются в том, чтобы заменить компоненты класса в React функциональными компонентами и useState().

Когда я выполняю упражнения Redux, мне неясно, актуальны ли mapStateToProps(), mapDispatchToProps() и connect(), или я могу теперь заменить их хуками useSelector() и useDispatch().

В настоящее время с настройкой mapStateToProps() и mapDispatchToProps() у меня есть родительский компонент, который отправляет состояние моего хранилища Redux нескольким дочерним элементам через несколько уровней. Всякий раз, когда я добавляю новую переменную состояния в свой магазин, это включает в себя сверление этого нового состояния через все эти компоненты, что становится вдвойне громоздким из-за того, что я использую Typescript и должен обновлять все свои ownProps типы.

Одним из вариантов может быть connect() каждый дочерний компонент непосредственно в хранилище. Могу ли я вместо этого использовать useSelector() и useDispatch() для каждого из дочерних компонентов, где я фактически использую переменную состояния? Какие будут минусы в этом?

Спасибо!

Это не ответ на ваш вопрос, но на самом деле я собираюсь перевести приложение с Redux на React Query в эти выходные. Я полагаю, это зависит от сложности вашего приложения, но я столкнулся с кучей бесполезного глобального состояния, странным кодом useEffect для реагирования на различные изменения состояния и т. д. React Query легко решает все это.

Tony Drummond 18.12.2020 23:18

FWIW, мы фактически только что выпустили первую альфа-версию новой библиотеки под названием RTK Query, которая представляет собой библиотеку запросов на основе Redux, созданную поверх Redux Toolkit. Сейчас мы работаем над некоторыми обновлениями. Как только мы будем довольны окончательным API, мы объединим его обратно в Redux Toolkit. Возможно, вы тоже захотите это проверить.

markerikson 18.12.2020 23:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
2
4 096
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Да. С помощью useSelector и useDispatch вы можете полностью исключить Container, целью которого было отображение состояния и действий в вашем дочернем компоненте. Вам просто нужно присвоить состояние переменной внутри вашего компонента и отправить действие на избыточность, например. как в этом примере:

export default function AccountScreen(props) {
   const user = useSelector(state => state.account);

    const handleSubmit = () => {
        dispatch(updateProfile(user._id, firstName, lastName, alergies, dob, medicalCondition));
        props.navigation.navigate('HomeTab');
    }
Ответ принят как подходящий

Да, согласно другому ответу, API хуков React-Redux заменяет существующий API connect, и мы особенно рекомендуем использовать API хуков по умолчанию:

Часть этого заключается в том, что мы рекомендуем использовать TypeScript с Redux, а API хуков намного проще использовать с TS, чем connect:

Другие вопросы по теме