This.props.dispatch는 함수가 아닙니다(React-Redux).

This.props.dispatch는 함수가 아닙니다(React-Redux).

스마트 컴포넌트 내에서 액션을 디스패치하려고 합니다.이 기능을 사용하려고 합니다.mapDispatchToProps그리고.this.props.dispatch(actions.getApplications(1))하지만 둘 다 행동을 구속하는 것은 아니다.props.

그게 내 탓인지 모르겠어mapStateToProps포함되어 있지 않은가?나는 그것을 포함시키려 했지만 역시 효과가 없었다.

도움이 되신다면, 아래 코드 블록의 길이에 대해 사과드립니다.

import classNames from 'classnames';
import SidebarMixin from 'global/jsx/sidebar_component';

import Header from 'common/header';
import Sidebar from 'common/sidebar';
import Footer from 'common/footer';
import AppCard from 'routes/components/appCard';
import { getApplications } from 'redux/actions/appActions';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import actions from 'redux/actions';
import { VisibilityFilters } from 'redux/actions/actionTypes';


class ApplicationContainer extends React.Component {
    constructor(props){
    super(props)

    this.state = {
      applicants: []
    }

    this.onDbLoad = this.onDbLoad.bind(this)

  }
  onDbLoad(){
    console.log(this.props.dispatch)
     // this.props.getApplications(1)
  }

    render() {
    return (
        <Col sm={12} md={4} lg={4}>
            <PanelContainer style={panelStyle}>
                <Panel>
                    <PanelBody >
                        <Grid>
                            <Row>
                              { this.onDbLoad() }
                            </Row>
                      </Grid>
                    </PanelBody>
                </Panel>
            </PanelContainer>
        </Col>
    )}
}


function mapDispatchToProps(dispatch){

  return bindActionCreators({ getApplications: getApplications },dispatch)
}

export default connect(null, mapDispatchToProps)(ApplicationContainer);

@SidebarMixin
export default class extends React.Component {

    render() {
    const app = ['Some text', 'More Text', 'Even More Text'];

        var classes = classNames({
            'container-open': this.props.open
        })
        return (
            <Container id='container' className={classes}>
                <Sidebar />
                <Header />
        <Container id='body'>
          <Grid>
            <Row>
              <ApplicationContainer />
            </Row>
          </Grid>
        </Container>
                <Footer />
            </Container>
    )}
}

여기 Redux FAQ에 따르면this.props.dispatch디폴트로 사용할 수 있는 것은, 자신의 것을 지정하지 않는 경우입니다.mapDispatchToProps기능.a를 제공하는 경우mapDispatchToProps기능, 귀하는 다음과 같은 이름의 소품을 반환할 책임이 있습니다.dispatch사용자 이름:

const mapDispatchToProps = dispatch => ({
   ...other methods,
   dispatch                // ← Add this
})

export default connect(null, mapDispatchToProps)(Component)

또는 액션 크리에이터가 Redux의 유틸리티를 사용하여 사전 바인드되어 있는지 확인할 수 있습니다.또, 이 유틸리티를 사용하는 것에 대해 걱정할 필요는 없습니다.this.props.dispatch컴포넌트에 추가해 주세요.

질문에서도 언급하셨듯이mapDispatchToProps하기 위한 두 번째 논거가 되어야 한다connect.

상태 매핑이 수행되지 않은 경우 통과시킬 수 있습니다.null첫 번째 인수:

export default connect(null, mapDispatchToProps)(ApplicationContainer);

이렇게 하고 나면this.props.getApplications구속될 것이다.

---

코멘트에 의하면, 에 액세스 하고 싶은 경우는,this.props.dispatch바인딩 액션이 아니라 단순히 콜만 하면 됩니다.connect()맵을 통과하지 않고 기본 동작으로 인스톨 됩니다.dispatch.

BOTH 바운드 액션 크리에이터와this.props.dispatch, 를 추가해야 합니다.dispatch전달 대상에게mapDispatchToProps뿐만 아니라.뭐랄까dispatch: action => action또는 모든 것을 루트 키 아래에 두지 않기 때문에 (예:actions)는 다음과 같은 작업을 할 수 있습니다.

function mapDispatchToProps(dispatch) {
  let actions = bindActionCreators({ getApplications });
  return { ...actions, dispatch };
}

언급URL : https://stackoverflow.com/questions/36850988/this-props-dispatch-not-a-function-react-redux