Redux или простой React для управления навигацией

Question

Я очень новичок в React и Redux, и сейчас я пытаюсь обдумать, как разделять состояния через пользовательский интерфейс.

У меня довольно простой вариант использования.

Изображение контейнер с тремя столбцами:

1. Левое боковое меню с четырьмя кнопками
2. Центральный раздел содержимого
3. Правый контейнер с некоторым другим содержимым

Когда я нажимаю одну из четырех кнопок, я хочу, чтобы произошло три вещи:

1. Класс на кнопке обновляется, поэтому он имеет границы
2. Класс на другой кнопки обновляются, поэтому, если они были нажаты до удаления их класса границы
3. Содержимое в одной части среднего раздела обновляется. Для этого содержимого требуются данные из бэкэнда (Django Rest)

Вот мои вопросы:

1. Должен ли я разделить это взаимодействие на пользовательский интерфейс, относящийся только к a Управляемый данными или оба с одним состоянием?
2. Поскольку кнопки совместно используют родительский компонент, а не с центральным компонентом, было бы лучше использовать Redux, если я не хочу определять состояние на самом верхнем уровне Контейнера?
3. Поскольку я новичок и кажется, что Hooks - это путь к go Я пытаюсь использовать хуки, а не классы, имеет ли смысл разделять компоненты и контейнеры ?

Answer 1

Вы можете использовать библиотеку Reaction-router-Dom для достижения желаемого. для вашего левого бокового меню вы можете создать активный класс в css, а затем проверить текущий маршрут с помощью свойства location.pathname response-router-dom и, если это для этой кнопки, для него установлен активный класс. а для вашего основного раздела вы можете получить данные в хуке useEffect. Я думаю, что хорошо разделять данные и пользовательский интерфейс, но для кнопок то, что я говорю, хорошо. и вы можете хранить данные в избыточном для вашего основного раздела.