'প্রেরণ' কোনও ফাংশন নয় যখন রেডাক্সে টুডিসপ্যাচটপোপ্রোপস () -কে মানচিত্রের জন্য যুক্তিযুক্ত

Question

আমি একটি জাভাস্ক্রিপ্ট / রিডুএক্স / রিডাক্ট প্রাথমিক এবং রিডাক্সের সাথে একটি ছোট অ্যাপ্লিকেশন তৈরি করছি, প্রতিক্রিয়া-রিডেক্স, এবং প্রতিক্রিয়া করব। কোনও কারণে কানেক্টের সাথে মানচিত্রে ডিসপ্যাচটপোপ্রোপস ফাংশন ব্যবহার করার সময় (রিঅ্যাক্ট-রিডিক্স বাঁধাই) আমি একটি টাইপর্রার পাই যা ইঙ্গিত করে যে প্রেরণ কোনও ফল নয় যখন আমি ফলাফলের ফলস কার্যকর করার চেষ্টা করি। আমি প্রেরিত হিসাবে প্রেরণকারীকে যাইহোক বলি (প্রদত্ত কোডে সেটএড্ডার ফাংশনটি দেখুন) এটি কাজ করে।

আমি কেন আগ্রহী তা সম্পর্কে উদাহরণস্বরূপ, রিডেক্স ডক্সের টোডো অ্যাপ্লিকেশনটিতে মানচিত্রডিসপ্যাচটপ্রোপস পদ্ধতি একইভাবে সেটআপ করা হচ্ছে। আমি যখন ফাংশনের ভিতরে কনসোল.লগ (প্রেরণ) করি তখন এটি বলে যে প্রেরণ টাইপ অবজেক্ট। আমি এইভাবে প্রেরণটি ব্যবহার করা চালিয়ে যেতে পারতাম তবে আমি আরও আরও বেশি অনুভব করতে পারি কারণ কেন আমি আরও বেশি পরিমাণে রেডুডেক্স চালিয়ে যাওয়ার আগে এটি ঘটছে। সংকলনের জন্য আমি ব্যাবেল-লোডারগুলির সাথে ওয়েবপ্যাকটি ব্যবহার করছি।

আমার কোড:

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একটি ছাড়া mapStateToPropsশুধু ব্যবহার nullপ্রথম আর্গুমেন্ট জন্য।

export default connect(null, mapDispatchToProps)(Start)

Comments

এটিই আমি খুঁজছিলাম। আমি জানি যে আমি যদি কিছু ক্রিয়া প্রেরণ করতে চাই তবে।

— সম্রাট ক্রাউজার

এটি হ'ল আমি যা খুঁজছিলাম। নিখুঁত সমাধানের জন্য ধন্যবাদ। আমাদের যদি কোনও উপাদানতে মানচিত্রডিস্পচটপোপ্রপোস ব্যবহার না করতে হয় তবে কী হবে? আমরা কি সেই দৃশ্যটি পরিচালনা করতে পারি?

— অরুণ রামচন্দ্রন

আপনার যদি প্রয়োজন না হয় mapDispatchToProps, কেবল সেই যুক্তিটি যুক্ত করুন না connect:connect(mapStateToProps)(MyComponent)

— ইনোস্টিয়া

Answer 2

আপনি কেবল প্রথম যুক্তিটি অনুপস্থিত connectযা mapStateToPropsপদ্ধতি। রেডাক্স টুডো অ্যাপ্লিকেশন থেকে অংশ:

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

এই পদ্ধতি ব্যবহার করা কি বাধ্যতামূলক? এই পদ্ধতিটি কেবল আমাদের কী এই পদ্ধতির প্রয়োজন না বললে কি ধরা দেয়?

— মুনিম হাবিব

@ মুনিমহাবিব আপনার প্রয়োজন না হলে এই পদ্ধতিটি কীভাবে সরবরাহ করবেন না সে জন্য ইনোস্টিয়া এর উত্তর দেখুন

— ব্র্যান্ডন

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থাকার কারণে এটি গ্রহণ করে । আপনি যদি সঠিকভাবে প্রবেশ করেন তবে আপনার উপাদানটি পাবেন নাnullmapDispatchmapDispatchdispatch ।

সাধারণ চর্চা

উপরের উত্তরগুলি কেন উপাদানটি সেভাবে আচরণ করেছিল। যদিও এটি সাধারণ অনুশীলন যে আপনি কেবল নিজের অ্যাকশন স্রষ্টাকে 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);
  }
....

কোনও মানচিত্রডিসপ্যাচটপ্রপস ছাড়াই

Answer 8

আমি এটির মতো ব্যবহার করছি .. প্রথম যুক্তিটি ম্যাপস্টেটটোপ্রোপস এবং দ্বিতীয় যুক্তিটি ম্যাপডিশপটটোপ্রোপগুলি ফাংশন / শ্রেণির সাথে সংযুক্ত করে বোঝা সহজ easy

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

সংযোগে যাওয়ার সময় আপনি যখন উপাদান ফাংশনের ক্রম পরিবর্তন করেন তখন এই ত্রুটিটিও ঘটে occur

ভুল আদেশ:

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