'प्रेषण' एक ऐसा कार्य नहीं है जब Redux में mapToDispatchToProps () का तर्क दिया जाए

Question

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

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

मेरा कोड:

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

चीयर्स।

Comments

मैं इस मुद्दे पर हो रही थी और यह मदद की मुझे इसे हल

— एलेक्स डब्ल्यू

Answer 1

यदि आप पहले तर्क के लिए सिर्फ mapDispatchToPropsएक उपयोग के बिना उपयोग करना चाहते हैं ।mapStateToPropsnull

export default connect(null, mapDispatchToProps)(Start)

Comments

यह वही है जिसकी मुझे तलाश है। अब मुझे पता है कि क्या मैं सिर्फ कुछ कार्यों को करना चाहता हूं।

— सम्राट क्रूसर

यह ठीक वैसा ही कुछ है जिसकी मुझे तलाश थी। सही समाधान के लिए धन्यवाद। क्या होगा यदि हमें अपने किसी भी घटक में mapDispatchToProps का उपयोग नहीं करना है? क्या इसी तरह हमें उस परिदृश्य को संभालना होगा?

— अरुण रामचंद्रन

यदि आपको आवश्यकता नहीं है mapDispatchToProps, तो बस उस तर्क को इसमें न जोड़ें connect:connect(mapStateToProps)(MyComponent)

— इनोस्टिया

Answer 2

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

Comments

क्या इस विधि का उपयोग करना अनिवार्य है? यह विधि केवल राज्य को पकड़ती है अगर हमें इस विधि की आवश्यकता नहीं है तो क्या होगा?

— मुनीम हबीब

@MememHabib इस विधि की आपूर्ति नहीं करने के लिए इनोस्टिया का उत्तर देखें यदि आपको इसकी आवश्यकता नहीं है

— ब्रैंडन

Answer 3

उपयोग

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

के बजाय

const StartContainer = connect(mapDispatchToProps)(Start)

Answer 4

मैंने तर्कों को इंटरचेंज करके हल किया, मैं उपयोग कर रहा था

export default connect(mapDispatchToProps, mapStateToProps)(Checkbox)

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

export default connect(mapStateToProps, mapDispatchToProps)(Checkbox)

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

Answer 5

मुझे इसका उपयोग 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 6

मुद्दा

अपने कोड में जुड़े घटक के व्यवहार को समझने के लिए यहां कुछ बातें ध्यान देने योग्य हैं:

connectमामलों की योग्यता :connect(mapStateToProps, mapDispatchToProps)

रिएक्ट-रेडक्स connectपहले तर्क के साथ कहता है mapStateToProps, और दूसरा तर्कmapDispatchToProps ।

इसलिए, यद्यपि आप अपने पास से गुजर चुके हैं mapDispatchToProps, रिएक्ट-रिडक्स वास्तव में ऐसा व्यवहार करता है 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)

Answer 7

जब आप mapDispatchToPropsइस तरह से एक दूसरे तर्क के रूप में प्रदान नहीं करते हैं :

export default connect(mapStateToProps)(Checkbox)

तब आप घटक के प्रॉप्स को स्वचालित रूप से प्रेषण कर रहे हैं, इसलिए आप बस:

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

किसी भी नक्शे के बिनाDispatchToProps

Answer 8

मैं इस तरह का उपयोग कर रहा हूँ .. इसका पहला तर्क समझने में आसान है 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);

Comments

यदि आपके पास पहले तर्क नहीं है तो बस अशक्त / अपरिभाषित और फिर दूसरा तर्क पारित करें ..

— अब्दुल मोइज

Answer 9

जब आप कनेक्ट करने के लिए कंपोनेंट फंक्शन का क्रम बदलते हैं तो कुछ समय में यह त्रुटि भी होती है।

गलत आदेश:

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

सही क्रम:

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

Answer 10

इसमें कुछ गड़बड़ी हो सकती है जो इस प्रश्न से आच्छादित है, लेकिन उत्तरों में इसे संबोधित नहीं किया गया है क्योंकि यह कोड संरचना में थोड़ा अलग है, लेकिन ठीक उसी त्रुटि को लौटाता है।

यह त्रुटि तब होती है जब फ़ंक्शन का उपयोग करते हैं 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त्रुटि कोड में अनुपलब्ध था

Answer 11

रिएक्ट-रिडक्स 'कनेक्ट' फ़ंक्शन दो तर्कों को स्वीकार करता है पहला है मैपस्टेटटाइपप्रॉप्स और दूसरा है मैपडाइस्पैचटआउटप्रोप्स चेक नीचे पूर्व।

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

यदि हम रिड्यूस से स्टेट को पुनः प्राप्त नहीं करना चाहते हैं तो हम मैपस्टैटटॉप्रोप्स के बजाय नल सेट करते हैं।

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