나는 그것을 이해하기 위해 Redux의 할일 예제를 분리하고 있습니다. 나는 mapDispatchToProps
디스패치 액션을 소품으로 매핑 할 수 있다는 것을 읽었 으므로 addTodo.js
dispatch (addTodo ())를 호출하는 대신 mapDispatchToProps를 사용하도록 다시 작성 하는 것을 생각했습니다 . 나는 그것을 불렀다 addingTodo()
. 이 같은:
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
그러나 앱을 실행할 때 다음 오류가 발생 Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.
합니다.. 나는 mapStateToProps
AddTodo 구성 요소에서 시작해 본 적이 없어서 무엇이 잘못되었는지 확신하지 못했습니다. 내 직감은 그것이 선행 을 connect()
기대 한다고 말합니다 .mapStateToProps
mapDispatchToProps
작업 원본은 다음과 같습니다.
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
제 질문은 mapStateToProps없이 mapDispatchToProps를 수행 할 수 있습니까? 내가하려는 것이 수용 가능한 관행입니까? 그렇지 않다면 왜 안됩니까?