web-dev-qa-db-ja.com

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>
    )}
}
javascriptreactjsecmascript-6reduxreact-redux
28
richTheCreator

Reduxによる here でのFAQ質問、this.props.dispatchはdefaultで利用できますdoは、独自のmapDispatchToProps関数を提供しません。 doがmapDispatchToProps関数を提供する場合、あなたはdispatchという名前のプロップを自分で返す責任があります：

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

export default connect(null, mapDispatchToProps)(Component)

または、Reduxの bindActionCreators ユーティリティを使用して、アクション作成者が事前にバインドされていることを確認し、コンポーネントでthis.props.dispatchを使用することを心配する必要がありません。

46
markerikson

質問で述べたように、mapDispatchToPropsはconnectの-​​second引数である必要があります。

実行する状態マッピングがない場合は、nullを最初の引数として渡すことができます。

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

これを行うと、this.props.getApplicationsがバインドされます。

コメントによると、this.props.dispatch INSTEADのバインディングアクションにアクセスする場合は、マッパーを渡さずにconnect()を呼び出すだけで、デフォルトの動作によりdispatchが挿入されます。

バインドされたアクションクリエーターとthis.props.dispatchの両方を使用する場合は、dispatchに渡すオブジェクトにもmapDispatchToPropsを追加する必要があります。 dispatch: action => actionのようなもの。または、すべてをルートキー（actionsなど）の下に置くわけではないので、次のようにすることができます。

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