Задать вопрос
@max_nikulin
javascript

Как правильно разделить ответственность между состоянием интерфейса и дерева состояния в React и REDUX?

Всем привет. Имеется реакт-компонент со списком эллементов, я хочу реализовать возможность удаления эллемента после модального окна с подтверждением.
Два способа реализации:
Способ первый:
1. Я вешаю на каждый эллемент списка событие onClick и передаю в state реакт компонента соответствующий "dropID" и вызываю открытие модального окна
2. При согласии вызываю экшн и передаю туда this.state.dropID.
Способ второй:
1. Создаю в соответствующем редьюсере новое поле dropID
2. Добавляю в экшн открытия окна payload в виде currentDropID,
3. При вызове экшна открытия окна в reducer изменяю dropID: currentDropID
4. При клике в модальном окне читаю соответствующее поле стора- dropID

Собственно вопрос: как правильнее реализовать данную функцию?
В данном случае я реализовал 1 способ.
Слышал что если используешь redux то про функцию setState в большинстве случаев можно забыть.

Также заранее извеняюсь если непонятно объяснил, код здесь:
https://github.com/maximusnikulin/REDUX-MYBLOG/blo...
  • Вопрос задан
  • 643 просмотра
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 2
@xom9lk
dropID в state в данном случае хранить необязательно, зачем лишний раз пересчитывать DOM. Достаточно хранить в объекте: this.dropID = p.id, т.к. его никто не изменит, за то время, пока открывается modal.

2 вариант более правильный - биндить dropID
<Button onClick = {openModal.bind(null, p.id)}>Drop</Button>

// actions/pageChoice.js
export function openModal(dropId){
        return {type:'OPEN_DROP_MODAL', dropId}
}

// reducers/pageChoice.js
case 'OPEN_DROP_MODAL':
                      return {
                              ...state,
                              dropId: action.dropId,
                              modalOpen:true
                      }
                      break;
Ответ написан
1 комментарий
1 комментарий
iNikNik
@iNikNik
Лучше все это делать через редьюсеры. Флаг открытия модального окна, id айтема - все там хранить. Только в 4м пункте в модалку можно передать dropId из state, а на закрытие окна повесить общий обработчик - dropItem(id).
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Слышал что если используешь redux то про функцию setState в большинстве случаев можно забыть.

Не всегда, но обычно это не нужно. Подробнее можете ознакомиться в небольшом учебнике.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать ретопологию 3D моделей в Blender
25 апр. 2024, в 15:13
3000 руб./за проект
Тестирование безопасности веб-приложения
25 апр. 2024, в 15:13
100000 руб./за проект
Требуется разработка ботов для авторизации сбора информации
25 апр. 2024, в 15:07
100000 руб./за проект
Ещё заказы