Я новичок в React и Redux, и многим руководствам, которыми я пользовался, уже пару лет. Кажется, что хуки как в React, так и в Redux относительно новы, и общие рекомендации, которые я видел, заключаются в том, чтобы заменить компоненты класса в React функциональными компонентами и useState()
.
Когда я выполняю упражнения Redux, мне неясно, актуальны ли mapStateToProps()
, mapDispatchToProps()
и connect()
, или я могу теперь заменить их хуками useSelector()
и useDispatch()
.
В настоящее время с настройкой mapStateToProps()
и mapDispatchToProps()
у меня есть родительский компонент, который отправляет состояние моего хранилища Redux нескольким дочерним элементам через несколько уровней. Всякий раз, когда я добавляю новую переменную состояния в свой магазин, это включает в себя сверление этого нового состояния через все эти компоненты, что становится вдвойне громоздким из-за того, что я использую Typescript и должен обновлять все свои ownProps
типы.
Одним из вариантов может быть connect()
каждый дочерний компонент непосредственно в хранилище. Могу ли я вместо этого использовать useSelector()
и useDispatch()
для каждого из дочерних компонентов, где я фактически использую переменную состояния? Какие будут минусы в этом?
Спасибо!
FWIW, мы фактически только что выпустили первую альфа-версию новой библиотеки под названием RTK Query, которая представляет собой библиотеку запросов на основе Redux, созданную поверх Redux Toolkit. Сейчас мы работаем над некоторыми обновлениями. Как только мы будем довольны окончательным API, мы объединим его обратно в Redux Toolkit. Возможно, вы тоже захотите это проверить.
Да. С помощью 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
:
Это не ответ на ваш вопрос, но на самом деле я собираюсь перевести приложение с Redux на React Query в эти выходные. Я полагаю, это зависит от сложности вашего приложения, но я столкнулся с кучей бесполезного глобального состояния, странным кодом useEffect для реагирования на различные изменения состояния и т. д. React Query легко решает все это.