Tôi đang phá vỡ ví dụ điển hình của Redux để cố gắng hiểu nó. Tôi đọc rằng mapDispatchToProps
cho phép bạn lập bản đồ hành động gửi như đạo cụ, vì vậy tôi nghĩ viết lại addTodo.js
để sử dụng mapDispatchToProps thay vì gọi công văn (addTodo()). Tôi gọi nó là addingTodo()
. Một cái gì đó như thế này:Tôi có thể mapDispatchToProps mà không có mapStateToProps trong Redux không?
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
Tuy nhiên, khi tôi chạy ứng dụng, tôi nhận được lỗi này: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
. Tôi không bao giờ sử dụng mapStateToProps
để bắt đầu với thành phần AddTodo, vì vậy tôi không chắc chắn những gì đã sai. Cảm giác ruột của tôi nói rằng connect()
mong đợi mapStateToProps
trước mapDispatchToProps
.
Bản gốc làm việc như sau:
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
Hoàn repo có thể tìm thấy here.
Vì vậy, câu hỏi của tôi là, có thể thực hiện mapDispatchToProps mà không có mapStateToProps không? Là những gì tôi đang cố gắng làm một thực hành chấp nhận được - nếu không, tại sao không?