如何解决反应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
,然后使用化简器中返回的对象来更新状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。