[javascript] Redux와의 연결을 사용하여 this.props에서 간단한 디스패치를 ​​얻는 방법은 무엇입니까?

기본적 mapDispatchToProps으로 dispatch => ({ dispatch }).
두 번째 인수를 위해 지정하지 않은 경우 그래서 connect(), 당신은거야 dispatch구성 요소에 소품으로 주입.

사용자 지정 함수를에 전달하면 함수로 mapDispatchToProps무엇이든 할 수 있습니다.
몇 가지 예 :

// inject onClick
function mapDispatchToProps(dispatch) {
  return {
    onClick: () => dispatch(increment())
  };
}

// inject onClick *and* dispatch
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onClick: () => dispatch(increment())
  };
}

이것을 설정 bindActionCreators()할 수 있도록 Redux가 제공 하는 타이핑을 저장하려면 다음을 수행하십시오.

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return {
    onPlusClick: () => dispatch(increment()),
    onMinusClick: () => dispatch(decrement())
  };
}

이것으로 :

import { bindActionCreators } from 'redux';

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    onPlusClick: increment,
    onMinusClick: decrement
  }, dispatch);
}

또는 소품 이름이 액션 작성자 이름과 일치하면 더 짧습니다.

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

원하는 경우 직접 추가 할 수 있습니다 dispatch.

// injects increment, decrement, and dispatch itself
function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({ increment, decrement }), // es7 spread syntax
    dispatch
  };
}

이 작업을 수행해야하는지 여부에 대한 공식적인 조언은 없습니다. connect()일반적으로 Redux를 인식하는 구성 요소와 Redux를 인식하지 않는 구성 요소 사이의 경계 역할을합니다. 우리가 일반적으로 그것을 주입 이해가되지 않는 느낌이 이유입니다 모두 결합 된 액션 제작자와 dispatch. 하지만이 작업이 필요하다고 생각되면 자유롭게하십시오.

마지막으로 지금 사용하고있는 패턴은를 호출하는 것보다 훨씬 더 짧은 지름길입니다 bindActionCreators. 당신이 할 모든 것이 return bindActionCreators일 때, 당신은 이렇게하는 대신 이렇게 호출을 생략 할 수 있습니다 :

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

이렇게 쓸 수 있습니다

export default connect(
  mapStateToProps,
  { increment, decrement } // injects increment and decrement
)(App);

그러나 전달 dispatch과 같이 더 많은 사용자 정의를 원할 때마다 멋진 짧은 구문을 포기해야합니다 .

답변

export default connect(mapStateToProps, (dispatch) => ({
    ...bindActionCreators({fetchUsers}, dispatch), dispatch
}))(Users);