'dispatch'는 Redux에서 mapToDispatchToProps ()에 대한 인수 일 때 함수가 아닙니다.

저는 redux, react-redux 및 react로 작은 애플리케이션을 구축하는 javascript / redux / react 초보자입니다. 어떤 이유로 mapDispatchToProps 함수를 connect와 함께 사용할 때 (react-redux 바인딩) 결과 prop을 실행하려고 할 때 디스패치가 함수가 아님을 나타내는 TypeError를받습니다. 그러나 dispatch를 prop으로 호출하면 (제공된 코드의 setAddr 함수 참조) 작동합니다.

redux 문서의 TODO 앱 예제에서 mapDispatchToProps 메서드가 같은 방식으로 설정되어있는 이유가 궁금합니다. 함수 내에서 console.log (dispatch)하면 dispatch가 유형 객체라고 말합니다. 나는 이런 식으로 디스패치를 ​​계속 사용할 수 있지만 redux를 계속하기 전에 왜 이런 일이 발생하는지 더 잘 알 것입니다. 컴파일을 위해 babel-loaders와 함께 webpack을 사용하고 있습니다.

내 코드 :

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첫 번째 인수합니다.

export default connect(null, mapDispatchToProps)(Start)

당신은 단지에 첫 번째 인수 누락 connect은 IS, mapStateToProps방법. Redux 할일 앱에서 발췌 :

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문제 의 Arity :connect(mapStateToProps, mapDispatchToProps)

React-Redux connect는 첫 번째 인수 mapStateToProps와 두 번째 인수를 사용하여 호출합니다 mapDispatchToProps.

따라서를 전달했지만 mapDispatchToPropsReact-Redux는 실제로 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)

다음 mapDispatchToProps과 같이 두 번째 인수로 제공하지 않는 경우 :

export default connect(mapStateToProps)(Checkbox)

그러면 자동으로 구성 요소의 소품으로 디스패치를 ​​가져 오므로 다음과 같이 할 수 있습니다.

class SomeComp extends React.Component {
  constructor(props, context) {
    super(props, context);
  }
  componentDidMount() {
    this.props.dispatch(ACTION GOES HERE);
  }
....

mapDispatchToProps없이

나는 이와 같이 사용하고 있습니다. 이해하기 쉬운 첫 번째 인수는 mapStateToProps이고 두 번째 인수는 결국 mapDispatchToProps이며 함수 / 클래스와 연결됩니다.

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);

이 질문에서 다루고 있지만 코드 구조가 약간 다르지만 정확히 동일한 오류를 반환하기 때문에 답변에서 다루지 않은 함정에 들어갈 수 있습니다.

이 오류 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-redux 'connect'함수는 두 개의 인수를 먼저 받아 mapStateToProps이고 두 번째는 mapDispatchToProps 아래 예입니다.

export default connect(mapStateToProps, mapDispatchToProps)(Index); `

redux에서 상태를 검색하지 않으려면 mapStateToProps 대신 null을 설정합니다.

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