'प्रेषण' एक फ़ंक्शन नहीं है जब Redux

Question

में नक्शा ToDispatchToProps() के लिए तर्क है, मैं एक जावास्क्रिप्ट/रेडक्स/प्रतिक्रिया शुरुआती रेडक्स, प्रतिक्रिया-रेडक्स, & प्रतिक्रिया के साथ एक छोटा सा अनुप्रयोग बना रहा हूं। कुछ कारणों से कनेक्ट करने के साथ मैपडिस्चटोप्रॉप फ़ंक्शन का उपयोग करते समय (प्रतिक्रिया-रेडक्स बाध्यकारी) मुझे एक टाइपरर प्राप्त होता है जो इंगित करता है कि प्रेषण प्रोप निष्पादित करने का प्रयास करते समय प्रेषण एक कार्य नहीं है। जब मैं एक प्रोप के रूप में प्रेषण को कॉल करता हूं (प्रदान किए गए कोड में setAddr फ़ंक्शन देखें) यह काम करता है।

मुझे यह जानकर उत्सुकता है कि यह क्यों है, उदाहरण के लिए रेडक्स डॉक्स में TODO ऐप नक्शा डिस्प्चटॉपप्रॉप विधि उसी तरह से सेटअप है। जब मैं फ़ंक्शन के अंदर console.log (प्रेषण) करता हूं तो यह कहता है कि प्रेषण प्रकार वस्तु है। मैं इस तरह प्रेषण का उपयोग करना जारी रख सकता हूं लेकिन मैं बेहतर महसूस कर रहा हूं कि यह लालसा के साथ आगे बढ़ने से पहले क्यों हो रहा है। मैं संकलन करने के लिए बेबेल-लोडर के साथ वेबपैक का उपयोग कर रहा हूं।

मेरे कोड:

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 

चीयर्स।

Answer 1

आप connect पर पहले तर्क को याद कर रहे हैं, जो 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) 

Answer 2

मैं 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); 

Answer 3

आप एक mapStateToProps बिना mapDispatchToProps उपयोग करने के लिए सिर्फ पहला तर्क के लिए null का उपयोग करें।

export default connect(null, mapDispatchToProps)(Start)

Answer 4

उपयोग

const StartContainer = connect(null, mapDispatchToProps)(Start) 

बजाय

const StartContainer = connect(mapDispatchToProps)(Start) 

Answer 5

मैं तर्क अंतर्विनिमय द्वारा इसे हल, मैं

export default connect(mapDispatchToProps, mapStateToProps)(Checkbox) 

जो गलत है उपयोग कर रहा था। mapStateToProps पहला तर्क हो गया है:

export default connect(mapStateToProps, mapDispatchToProps)(Checkbox) 

अब यह स्पष्ट लगता है, लेकिन किसी की मदद कर सकते हैं।

Answer 6

आप एक दूसरा तर्क के रूप में 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