How to properly share responsibility between interface state and state tree state in React and REDUX?

Question

JavaScript

Hello. I have a react component with a list of elements, I want to implement the ability to remove the element after the confirmation modal.
Two ways to implement:
Method one:
1. I hang an onClick event on each element of the list and pass the corresponding "dropID" to the react component's state and cause the modal window to open
2. If it agrees, I call the action and pass this.state.dropID there.
Method two:
1. I create a new dropID field in the corresponding reducer
2. I add the payload window opening action in the form of currentDropID,
3. When the window opening action is called in the reducer, I change the dropID: currentDropID
4. When I click in the modal window, I read the corresponding dropID store field
Actually a question: how it is more correct to implement the given function?
In this case, I implemented 1 way.
I heard that if you use redux, then in most cases you can forget about the setState function.

I also apologize in advance if I didn’t explain it clearly, the code is here:
https://github.com/maximusnikulin/REDUX-MYBLOG/blo...

Answer 1

dropID in state in this case is not necessary to store, why recalculate the DOM once again. It is enough to store in the object: this.dropID = p.id, because no one will change it while the modal opens.
Option 2 is more correct - bind 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;

Answer 2

I heard that if you use redux, then in most cases you can forget about the setState function.

Not always, but usually not necessary. More details can be found in a small tutorial .