Как установить активное состояние для разных компонентов?

Как можно реализовать добавление класса "active" к элементам списка при клике на них, если у нас есть один компонент ItemsList, но два разных набора данных, для которых нужно отслеживать состояние "active"? Я хочу использовать Redux для сохранения текущего активного элемента для каждого набора данных.
  • 25 октября 2023 г. 11:58
Ответы на вопрос 1
Для реализации добавления класса "active" к элементам списка при клике на них и сохранения текущего активного элемента для каждого набора данных с использованием Redux, вам понадобится следовать нескольким шагам:

1. Создайте действия (actions) для обновления состояния активного элемента для каждого набора данных. Например, для первого набора данных вы можете создать действие `setActiveItem` с параметром `itemId`, а для второго набора данных - действие `setActiveItem2` с параметром `itemId2`.

2. Создайте редьюсеры (reducers) для обработки действий. Например, для первого набора данных вы можете создать редьюсер `activeItemReducer` для обработки действия `setActiveItem`, а для второго набора данных - редьюсер `activeItemReducer2` для обработки действия `setActiveItem2`. В редьюсерах нужно обновить состояние, чтобы они хранили текущий активный элемент для каждого набора данных.

3. Создайте хранилище Redux и примените редьюсеры. Создайте хранилище с помощью функции `createStore` из пакета Redux и передайте ему комбинированный редьюсер, который объединяет оба редьюсера. Например, вы можете использовать функцию `combineReducers` из пакета Redux, чтобы объединить `activeItemReducer` и `activeItemReducer2` в один комбинированный редьюсер.

4. Подключите компоненты к хранилищу Redux. Импортируйте функцию `connect` из пакета `react-redux` и оберните ваши компоненты в функцию `connect`, чтобы они получали состояние и действия из хранилища Redux.

5. В компонентах списков (ItemsList) добавьте обработчик клика, который будет вызывать соответствующее действие для обновления активного элемента в хранилище Redux. В обработчике вы можете передать идентификатор (itemId или itemId2) активного элемента для обновления состояния.

6. В компонентах, которым требуется добавлять класс "active" к элементам списка, добавьте логику для проверки текущего активного элемента из состояния Redux и добавления класса "active" в зависимости от этого состояния.

7. Для получения состояния и действий из хранилища Redux в ваших компонентах, используйте функции `mapStateToProps` и `mapDispatchToProps` при подключении компонентов с помощью функции `connect`. В `mapStateToProps` вы можете указать, какие свойства из состояния вам нужны в компоненте, а в `mapDispatchToProps` - какие действия вы хотите получить в компоненте.

Следуя этим шагам, вы сможете реализовать добавление класса "active" к элементам списка при клике на них и сохранение текущего активного элемента для каждого набора данных с использованием Redux.
Похожие вопросы