Правильная организация хранилища с использованием useContext и useReducer
В прошлом уроке мы избавились от props drilling с помощью useContext. В этом уроке мы разгрузим наш компонент — вынесем отдельно первоначальное состояние, редьюсер-функцию, контекст, напишем кастомные хуки.
Теперь вы сможете масштабировать своё приложение на React. Что следует запомнить:
— Объедините reducer с контекстом, чтобы позволить любому компоненту читать и обновлять состояние верхнего уровня.
— Чтобы предоставить состояние и функцию dispatch компонентам ниже:
1) Создайте два контекста (для состояния и для dispatch функции).
2) Предоставьте оба контекста компоненту, который использует reducer.
3) Используйте любой из контекстов в компонентах, которым необходимо их прочитать.
— Вы можете еще больше упростить компоненты, перенеся всю kjubre в один файл:
1) Вы можете экспортировать компонент типа TasksProvider, который предоставляет контекст.
2) Вы также можете экспортировать пользовательские хуки типа useTasks и useTasksDispatch для его чтения.
— В вашем приложении может быть множество пар context-reducer.
Материалы урока: https://react.dev/learn/scaling-up-wi...
Подпишитесь, чтобы не пропустить выход новых видео. Ставьте лайк, чтобы поддержать канал.
Мои статьи по веб-разработке доступны на http://devsurge.ru/.