反应Usereducer动作有效负载

问题描述

在下面的代码中，我无法理解action.payload。请以简单的方式清除它。

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，然后使用化简器中返回的对象来更新状态。