Saya membongkar contoh todo Redux untuk mencoba memahaminya. Saya membaca bahwa mapDispatchToProps
memungkinkan Anda untuk memetakan tindakan pengiriman sebagai alat peraga, jadi saya berpikir untuk menulis ulang addTodo.js
untuk menggunakan mapDispatchToProps daripada memanggil pengiriman (addTodo ()). Saya menyebutnya addingTodo()
. Sesuatu seperti ini:
import React from 'react';
import {connect} from 'react-redux';
import addTodo from '../actions';
let AddTodo = ({addingTodo}) => {
let input;
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
addingTodo(input.value)
input.value = ""
}}>
<input ref={node => {
input = node
}} />
<button type="submit">Submit</button>
</form>
</div>
)
}
const mapDispatchToProps = {
addingTodo: addTodo
}
AddTodo = connect(
mapDispatchToProps
)(AddTodo)
export default AddTodo
Namun, ketika saya menjalankan aplikasi, saya mendapatkan error ini: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. Saya tidak pernah mapStateToProps
memulai dengan komponen AddTodo, jadi saya tidak yakin apa yang salah. Naluri saya mengatakan bahwa connect()
mengharapkan mapStateToProps
untuk mendahului mapDispatchToProps
.
Dokumen asli yang berfungsi terlihat seperti ini:
import React from 'react';
import {connect} from 'react-redux';
import addTodo from '../actions';
let AddTodo = ({dispatch}) => {
let input;
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ""
}}>
<input ref={node => {
input = node
}} />
<button type="submit">Submit</button>
</form>
</div>
)
}
AddTodo = connect()(AddTodo)
export default AddTodo
Repo lengkap dapat ditemukan di sini .
Jadi pertanyaan saya adalah, apakah mungkin melakukan mapDispatchToProps tanpa mapStateToProps? Apakah yang saya coba lakukan adalah praktik yang dapat diterima - jika tidak, mengapa tidak?