'dispatch'는 Redex에서 mapToDispatchToProp() 인수를 수행할 때 함수가 아님
나는 리듀렉스, 리액션, 리액션, & 리액션으로 작은 어플리케이션을 만드는 초보자다.연결(react-remensx 바인딩)과 함께 mapDispatchToProps 기능을 사용할 때 결과 프로펠러를 실행하려고 할 때 디스패치가 함수가 아님을 나타내는 TypeError가 수신된다.그러나 내가 디스패치를 소품으로 부를 때(제공된 코드의 setAddr 함수 참조) 작동한다.
Redex 문서의 TODO 앱 예에서 맵DispatchToProps 메소드가 동일한 방식으로 설정되는 이유는 무엇인지 궁금하다.함수 내부에 console.log(dispatch)가 있으면 디스패치가 type object라고 되어 있다.나는 이런 식으로 파견을 계속 할 수 있지만, 내가 더 이상 환원제를 계속하기 전에 왜 이런 일이 일어나는지 더 잘 알 수 있을 것이다.나는 컴파일하기 위해 바벨로더가 있는 웹팩을 사용하고 있다.
내 코드:
import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import { setAddresses } from '../actions.js';
import GeoCode from './geoCode.js';
import FlatButton from 'material-ui/lib/flat-button';
const Start = React.createClass({
propTypes: {
onSubmit: PropTypes.func.isRequired
},
setAddr: function(){
this.props.dispatch(
setAddresses({
pickup: this.refs.pickup.state.address,
dropoff: this.refs.dropoff.state.address
})
)
},
render: function() {
return (
<div>
<div className="row">
<div className="col-xs-6">
<GeoCode ref='pickup' />
</div>
<div className="col-xs-6">
<GeoCode ref='dropoff' />
</div>
</div>
<div className="row">
<div className="col-xs-6">
<FlatButton
label='Does Not Work'
onClick={this.props.onSubmit({
pickup: this.refs.pickup.state.address,
dropoff: this.refs.dropoff.state.address
})}
/>
</div>
<div className="col-xs-6">
<FlatButton
label='Works'
onClick={this.setAddr}
/>
</div>
</div>
</div>
);
}
})
const mapDispatchToProps = (dispatch) => {
return {
onSubmit: (data) => {
dispatch(setAddresses(data))
}
}
}
const StartContainer = connect(mapDispatchToProps)(Start)
export default StartContainer
건배.
사용하시려면mapDispatchToProps무턱대고mapStateToProps그냥 사용하다null제1논쟁을 위하여
export default connect(null, mapDispatchToProps)(Start)
당신은 단지 다음 첫번째 논거를 놓치고 있다.connect, 어느 것이 더 좋은가?mapStateToProps한 내용Redex 작업관리 앱에서 발췌한 내용:
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
사용하다
const StartContainer = connect(null, mapDispatchToProps)(Start)
대신에
const StartContainer = connect(mapDispatchToProps)(Start)
논쟁을 바꿔서 해결했어, 난 그걸 사용하고 있었어.
export default connect(mapDispatchToProps, mapStateToProps)(Checkbox)
그건 잘못된 거야그mapStateToProps첫 번째 주장이어야 한다.
export default connect(mapStateToProps, mapDispatchToProps)(Checkbox)
지금은 명백하게 들리지만, 누군가에게 도움이 될 수도 있다.
나는 다음을 위해 예시가 필요했다.React.Component그래서 나는 그것을 게시한다:
import React from 'react';
import * as Redux from 'react-redux';
class NavigationHeader extends React.Component {
}
const mapStateToProps = function (store) {
console.log(`mapStateToProps ${store}`);
return {
navigation: store.navigation
};
};
export default Redux.connect(mapStateToProps)(NavigationHeader);
이슈
다음은 코드에서 연결된 구성 요소의 동작을 이해하기 위해 알아야 할 몇 가지 사항:
아리티 오브 더 아리티connect 문법:connect(mapStateToProps, mapDispatchToProps)
리액션-리멕스 호출connect 주장으로mapStateToProps, 그리고 두 번째 논쟁mapDispatchToProps.
그러므로, 비록 당신이 합격하긴 했지만.mapDispatchToProps, React-Redex를 실제로 다음과 같이 처리한다.mapState왜냐하면 그것은 첫번째 논쟁이기 때문이다.아직 주사를 맞았잖아onSubmit다음이 반환되기 때문에 당신의 구성 요소에서 기능한다.mapState컴포넌트의 소품에 통합되어 있어하지만 그건 그렇지 않다.mapDispatch주사를 맞도록 되어 있다.
사용해도 좋다mapDispatch정의하지 않고mapState. 합격하다.null대신에mapState그리고 당신의 부품은 가게의 변경에 영향을 받지 않을 것이다.
연결된 구성 요소 수신dispatch기본적으로, 아니오인 경우mapDispatch
또한 구성 요소가 수신됨dispatch받았기 때문에null의 두 번째 지위에 있어서.mapDispatch. 제대로 합격한다면.mapDispatch, 구성 요소가 수신되지 않음dispatch.
공통 프랙티스
위의 내용은 구성 요소가 왜 그런 식으로 행동했는가에 대한 대답이다.비록, 당신이 단순히 당신의 행동 창조자에게 다음 방법으로 전달하는 것은 일반적인 관행이다.mapStateToProps의 목적의 속기그리고 당신의 구성 요소 내에서 그것을 불러라.onSubmit즉,
import { setAddresses } from '../actions.js'
const Start = (props) => {
// ... omitted
return <div>
{/** omitted */}
<FlatButton
label='Does Not Work'
onClick={this.props.setAddresses({
pickup: this.refs.pickup.state.address,
dropoff: this.refs.dropoff.state.address
})}
/>
</div>
};
const mapStateToProps = { setAddresses };
export default connect(null, mapDispatchToProps)(Start)
일부에서 발생할 수 있는 함정은 이 질문에서 다루어지지만 코드 구조에서는 약간 다르지만 정확하게 동일한 오류를 반환하기 때문에 답변에서 다루지 않는다.
이 오류는 사용할 때 발생한다.bindActionCreators그리고 그것을 통과하지 않고dispatch기능을 하다
오류 코드
import someComponent from './someComponent'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { someAction } from '../../../actions/someAction'
const mapStatToProps = (state) => {
const { someState } = state.someState
return {
someState
}
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
someAction
});
};
export default connect(mapStatToProps, mapDispatchToProps)(someComponent)
고정 코드
import someComponent from './someComponent'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { someAction } from '../../../actions/someAction'
const mapStatToProps = (state) => {
const { someState } = state.someState
return {
someState
}
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
someAction
}, dispatch);
};
export default connect(mapStatToProps, mapDispatchToProps)(someComponent)
함수dispatch오류 코드에 누락됨
React-remedx 'connect' 함수는 두 개의 인수를 먼저 수락하며, 두 번째는 mapStateToPropes이고, 두 번째는 mapDispatchToProps checks ex ex.
export default connect(mapStateToProps, mapDispatchToProps)(Index);`
Redex에서 상태를 검색하지 않으려면 mapStateToProps 대신 null을 설정하십시오.
export default connect(null, mapDispatchToProps)(Index);
제공하지 않을 경우mapDispatchToProps두 번째 주장으로 다음과 같이 하자.
export default connect(mapStateToProps)(Checkbox)
그러면 구성 요소의 소품에 대한 디스패치를 자동으로 받게 되므로 다음과 같이 하십시오.
class SomeComp extends React.Component {
constructor(props, context) {
super(props, context);
}
componentDidMount() {
this.props.dispatch(ACTION GOES HERE);
}
....
mapDispatchToPropes 없이
이렇게 쓰고 있어..첫 번째 인수는 mapStateToProps이고 두 번째 인수는 mapDispatchToProps는 결국 함수/class와 연결된다.
const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
연결로 전달되는 동안 구성요소 기능의 순서를 변경할 때도 이 오류가 발생할 수 있다.
잘못된 주문:
export default connect(mapDispatchToProps, mapStateToProps)(TodoList);
올바른 순서:
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
내가 다음과 같이 썼을 때 이 문제가 생겼다.
내보내기 기본 연결(mapDispatchToProps,mapStateToProps)(SearchInsectsComponent), 내보내기 기본 연결(mapStateToProps,mapDispatchToProps)(SearchInsectsComponent);
'IT이야기' 카테고리의 다른 글
| 농담 - 간단한 테스트가 느림 (0) | 2022.03.21 |
|---|---|
| VS 코드 확장 - 전체 경로 가져오기 (0) | 2022.03.21 |
| Pyspark에서 데이터 프레임 열 이름을 변경하는 방법 (0) | 2022.03.21 |
| Vue 웹 팩이 모든 URL에 #/를 추가하는 중 (0) | 2022.03.21 |
| Rxjs 필터 연산자가 각도2 관찰 가능으로 작업하지 않음 (0) | 2022.03.21 |