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

Question

[Максим Никулин]

Всем привет. Имеется реакт-компонент со списком эллементов, я хочу реализовать возможность удаления эллемента после модального окна с подтверждением.
Два способа реализации:
Способ первый:
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...

Answer 1

[xtalen]

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;

Comments

[Максим Никулин]

Большое спасибо

Answer 2

[Никита Гущин]

Лучше все это делать через редьюсеры. Флаг открытия модального окна, id айтема - все там хранить. Только в 4м пункте в модалку можно передать dropId из state, а на закрытие окна повесить общий обработчик - dropItem(id).

Comments

[Максим Никулин]

Большое спасибо

Answer 3

[Максим]

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

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

Comments

[mi1ami1a]

maxfarseer, наконец-то я нашла как с тобой связаться.
Во-первых, большое спасибо за твои туториалы! Все очень доступно написано.
Во-вторых, у меня есть вопрос по поводу Redux. здесь https://maxfarseer.gitbooks.io/redux-course-ru/con... return { ...state, year: action.payload } троеточие вызвало у меня вопрос который мне не удалось для себя прояснить с помощью гугла.
Аналогичная ситуация с +e.target.innerText в том же разделе. что делает "+"?

[Максим]

Привет =) указана же почта и твиттер в учебнике. По воросу:
1. Оператор "..." это что-то типа "склонируй и измени указанное свойство". Грубо говоря, у вас есть каша {масло: сливочное, варенье: клубничное}, вы пишите: ...каша, варенье: вишневое. На выходе, вы получаете не измененную первую кашу, а НОВУЮ (это важно) кашу, с маслом сливочным, но вареньем вишневым. Как указано в курсе, ... (spread оператор) похоже на Object.assign
2. + превращает строку в число, если это возможно. Например: "12" и 12 разные, не так ли? "12" - это строка, а 12 - это число. +"12" => 12
Добавлять плюсик, это очень распространенное поведение прямиком из основ языка. Почитайте здесь - https://learn.javascript.ru/operators