Что делать когда два React context зависят друг от друга?
В моём приложении есть два контекста: `SectionsContext` (управляет секциями меню) и `DishesContext` (управляет блюдами внутри секций). `DishesContext` использует текущее состояние выбранной секции из `SectionsContext`, поэтому я вложил `DishesProvider` внутрь `SectionsProvider`.
Однако возникла проблема: при удалении секции необходимо также удалять все её блюда. Но так как `DishesProvider` вложен в `SectionsProvider`, `SectionsContext` не может напрямую управлять `DishesContext`, что создаёт зависимость в обратном направлении.
Я рассматриваю три возможных решения:
1. Поднять состояние отвечающее за выбранную секцию на более высокий уровень.
2. Объединить оба контекста в один.
3. Использовать кастомный хук для синхронизации данных.
Какой из этих подходов чаще всего применяется на практике в подобных ситуациях? Или есть другие, более удачные решения?
А зачем тебе управлять блюдами из секций, если за это должен отвечать непосредственно контекст блюд? Ты и так используешь контекст секций в блюдах, так и удаляй все связанные блюда в эффекте, когда список секций изменяется. Но правильнее будет наоборот, отфильтровывать все блюда, чьих секций нет.
Может тогда стоит посмотреть на useReducer и с его помощью реализовать сложную логику? А уже сам стейт от редюсера можно и в контекст положить, если хочется.
Средний
