Блог

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

 import React, {useContext} from 'react'
import NotesContext from '../context'

function Note({ note }) {
    const {dispatch}  = useContext(NotesContext)
    return (
        <div className="note">
            <p>{note.text}</p>
            <div className="btn-container">
            <button onClick={() => dispatch({type: 'SET_CURRENT_NOTE', payload:note})} className="edit">Edit</button>
            <button onClick={() => dispatch({type: 'DELETE_NOTE', payload:note.id})} className="delete">Delete</button>
            </div>
        </div>
    )
} 
export default Note



export default function reducer(state, action) {
 switch(action.type) {
         case 'SET_CURRENT_NOTE':
         return {
             ...state,
             currentNote: action.payload
         }
         case 'DELETE_NOTE':
           const deleteNotes = state.notes.filter(
               note => note.id !== action.payload
           )

           return {
               ...state,
               notes: deleteNotes
           }
         default:
         return state;
 }
}
  

Поэтому, когда действие отправляется, оно перехватывается в редукторе. Этот код здесь отправляет действие

 dispatch({type: 'SET_CURRENT_NOTE', payload:note})
  

Это можно записать следующим образом:

 const action = {type: "SET_CURRENT_NOTE", payload: note}

dispatch(action)
  

Теперь в редукторе у вас есть доступ к тому объекту действия, в который вы передали dispatch .
Из этого объекта вы можете получить доступ к свойствам type и payload через точечную нотацию следующим образом:

 action.type
action.payload
  

Затем вы просто перехватываете совпадение action.type в случае переключения, а затем обновляете состояние с помощью возвращаемого объекта из редуктора.