মানচিত্রডিসপ্যাচটপ্রপস কী?

Question

আমি রেডাক্স লাইব্রেরির জন্য ডকুমেন্টেশন পড়ছিলাম এবং এর উদাহরণ রয়েছে:

রাজ্যটি পড়া ছাড়াও, ধারক উপাদানগুলি ক্রিয়া প্রেরণ করতে পারে। অনুরূপ ফ্যাশনে, আপনি একটি ফাংশন সংজ্ঞায়িত করতে পারেন mapDispatchToProps()যা এই dispatch()পদ্ধতিটি গ্রহণ করে এবং কলব্যাক প্রপস দেয় যা আপনি বর্তমান উপাদানটিতে ইনজেক্ট করতে চান।

এটি আসলে কোনও বুদ্ধি করে না। mapDispatchToPropsআপনি ইতিমধ্যে যখন আপনার প্রয়োজন mapStateToProps?

তারা এই সহজ কোড নমুনা প্রদান:

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

কেউ দয়া করে সাধারণ ব্যক্তির শর্তাবলী ব্যাখ্যা করতে পারেন যে এই ফাংশনটি কী এবং এটি কেন কার্যকর?

Answer 1

আমি মনে করি যে উত্তরগুলির কোনওটিরই ক্রিস্টালাইজ করা হয়নি কেন mapDispatchToPropsকার্যকর।

এটি কেবলমাত্র container-componentপ্যাটার্নের প্রসঙ্গেই উত্তর দেওয়া যেতে পারে , যা আমি প্রথম পড়ার মাধ্যমে ভালভাবে বুঝতে পেরেছি: ধারক উপাদানগুলি তারপরে প্রতিক্রিয়া সহ ব্যবহার ।

সংক্ষেপে, আপনার componentsকেবল স্টাফ প্রদর্শন করার জন্যই উদ্বিগ্ন বলে মনে করা হচ্ছে। একমাত্র স্থান তারা তথ্য পেতে অনুমিত হয় তাদের সাজসরঞ্জাম হয় ।

"প্রদর্শন সামগ্রী" (উপাদান) থেকে পৃথক করা হল:

• আপনি কীভাবে প্রদর্শন করতে স্টাফ পাবেন,
• এবং কীভাবে আপনি ইভেন্টগুলি পরিচালনা করেন।

এটা কী containersজন্য।

অতএব, componentপ্যাটার্নটিতে একটি "ভাল ডিজাইন করা" দেখতে এটির মতো:

class FancyAlerter extends Component {
    sendAlert = () => {
        this.props.sendTheAlert()
    }

    render() {
        <div>
          <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
          <Button onClick={sendAlert}/>
        </div>
     }
}

কিভাবে এই উপাদানটি তথ্য এটি প্রদর্শন করা হয় সাজসরঞ্জাম থেকে (যা মাধ্যমে redux দোকান থেকে এসেছেন পায় দেখুন mapStateToProps) এবং এটি তার সাজসরঞ্জাম থেকে তার কর্ম ফাংশন পায়: sendTheAlert()।

যে যেখানে mapDispatchToPropsআসে: সংশ্লিষ্টcontainer

// FancyButtonContainer.js

function mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })
}

function mapStateToProps(state) {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}

export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter
)

আমি অবাক হয়েছি আপনি যদি দেখতে পান তবে এখন এটিই container 1 যা রিডেক্স এবং প্রেরণ এবং স্টোর এবং স্টেট এবং ... স্টাফ সম্পর্কে জানে।

componentপ্যাটার্ন, FancyAlerter, রেন্ডারিং যে কাপড় কোন সম্পর্কে জানা প্রয়োজন যা নেই না: এটা এ কল তার পদ্ধতি পায় onClick, বোতাম তার সাজসরঞ্জাম মাধ্যমে।

এবং ... mapDispatchToPropsহ'ল দরকারী উপায় যা রিডেক্স কন্টেনারটিকে সহজেই তার প্রপসগুলিতে মোড়ানো উপাদানটিতে সেই ফাংশনটি পাস করতে দেয়।

এগুলি সমস্ত ডক্সে টোডো উদাহরণের মতো এবং এখানে অন্য একটি জবাবের মতো লাগে তবে কেন তা জোর দেওয়ার জন্য আমি প্যাটার্নের আলোকে এটি চেষ্টা করার চেষ্টা করেছি ।

(দ্রষ্টব্য: আপনি অভ্যন্তরীণ অ্যাক্সেস না পেয়েছেন এমন মৌলিক কারণে আপনি mapStateToPropsএকই উদ্দেশ্যে ব্যবহার করতে পারবেন না So সুতরাং আপনি মোড়ানো উপাদানটিকে এমন কোনও পদ্ধতি ব্যবহার করতে পারবেন না যা ব্যবহার করে । mapDispatchToPropsdispatchmapStateToPropmapStateToPropsdispatch

আমি জানি না কেন তারা এটিকে দুটি ম্যাপিং ফাংশন হিসাবে বিভক্ত করতে বেছে নিয়েছে - দু'টিই করতেই mapToProps(state, dispatch, props) আই আই ফাংশনটি করানো আরও সমৃদ্ধ হতে পারে !

---

1 নোট করুন যে আমি ইচ্ছাকৃতভাবে ধারকটির নাম রেখেছি FancyButtonContainer, এটি একটি "জিনিস" হাইলাইট করার জন্য - "একটি জিনিস" হিসাবে ধারকটির পরিচয় (এবং তাই অস্তিত্ব!) কখনও কখনও সংক্ষেপে হারিয়ে যায়

export default connect(...) ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

সিনট্যাক্স যা বেশিরভাগ উদাহরণে প্রদর্শিত হয়

Comments

আমি এখনও জানতে চাই: প্রয়োজনীয় কার্যকারিতা সম্পর্কে কী সরাসরি কোনও উপাদানগুলির মধ্যে থেকে store.dispatch কল করে পরিচালনা করা যায় না?

— পিক্সেলপ্যাক্স

পছন্দ করেছেন এটি ভাল নকশা সম্পর্কে। আপনি যদি আপনার উপাদানটি store.dispatch এ মিশ্রিত করেন, তবে আপনি যখন Redxx নির্ধারণ করার সিদ্ধান্ত নেন বা এটি এমন কোনও জায়গা ব্যবহার করতে চান যা redxu ভিত্তিক নয় (বা আমি এখন ভাবতে পারি না এমন কিছু) আপনি আটকে আছেন অনেক পরিবর্তন। আপনার প্রশ্নটি "আমরা কেন 'ভাল ডিজাইনের অনুশীলনগুলি নিয়ে বিরক্ত করি না' - এটিকে সাধারণ করে তোলে আপনি কোডটি কোড করলেও আপনি একই কার্যকারিতা পান"। মানচিত্রডিসপ্যাচটপ্রপগুলি সরবরাহ করা হয়েছে যাতে আপনি ভালভাবে ডিজাইন করা, পরিষ্কারভাবে ডিকোপল্ড উপাদানগুলি লিখতে পারেন।

— গ্রিনএজেজেড

আমি এখানে যা সত্যিই পাই না তা হ'ল: এটি কি ALERT_ACTIONক্রিয়া ফাংশন বা typeসেই ক্রিয়া ফাংশন থেকে ফিরে আসে? : / তাই বোকা

— জ্যামি হাবার

@ জামিহুটার কঠোরভাবে, এই প্রশ্নের সাথে ALERT_ACTION এর কোনও যোগসূত্র নেই। এটি প্রেরণের জন্য একটি যুক্তিযুক্ত যুক্তি, এবং এটি যেমন ঘটে থাকে, আমার কোডে এটি একটি "অ্যাকশন নির্মাতা" থেকে আসে, যা রেডেক্স.জেএস.আর.এস.সি / ডকস / অ্যাপি / স্টোর এইচটিএমএল# dispatch বর্ণিত হিসাবে একটি অবজেক্ট ব্যবহার করে । এখানে মূল বক্তব্যটি হ'ল কীভাবে প্রেরণ কল করতে হয় তা পাত্রে বর্ণিত হয় এবং উপাদানগুলির প্রপসগুলিতে প্রেরণ করা হয়। উপাদানটি এর প্রপসগুলি থেকে কেবল ফাংশন পায়, অন্য কোথাও নেই। এই প্যাটার্নে এটি করার "ভুল" উপায়টি হ'ল উপাদানটি প্রেরণ করা এবং উপাদানটিতে একই কল করা।

— গ্রিনআসজেড

আপনার যদি একাধিক অ্যাকশন স্রষ্টা রয়েছে যা প্রপস হিসাবে শিশু উপাদানগুলিতে প্রেরণ করা প্রয়োজন, তার একটি বিকল্প হ'ল মানচিত্রডিসপ্যাচটপ্রপসের অভ্যন্তরে bindActionCreators দিয়ে মোড়ানো (দেখুন redx.js.org/docs/api/bindActionCreators.html ); অন্য বিকল্পটি হ'ল সংযোগ (), যেমন সংযোগ (ম্যাপস্টেটটোপ্রপস, {ক্রিয়াকারক ors) সংযোগের জন্য অ্যাকশন নির্মাতাদের একটি অবজেক্ট সরবরাহ করা, প্রতিক্রিয়া-রিডেক্স আপনার জন্য প্রেরণ () দিয়ে মোড়ানো হবে।

— ডেভ

Answer 2

এটি মূলত একটি শর্টহ্যান্ড। পরিবর্তে লিখতে হবে:

this.props.dispatch(toggleTodo(id));

আপনি আপনার উদাহরণ কোডে প্রদর্শিত ম্যাপডিসপ্যাচটপ্রপগুলি ব্যবহার করবেন এবং অন্যত্র লিখুন:

this.props.onTodoClick(id);

বা সম্ভবত এই ক্ষেত্রে, আপনি ইভেন্ট হ্যান্ডলার হিসাবে এটি করতে চাই:

<MyComponent onClick={this.props.onTodoClick} />

---

এখানে ড্যান আব্রামভের একটি সহায়ক ভিডিও রয়েছে: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

Comments

ধন্যবাদ. আমিও ভাবছি, প্রপেসে প্রপেসে কীভাবে যুক্ত হয়?

— কোড হুইস্পেরার

যদি আপনি নিজের mapDispatchফাংশন সরবরাহ না করেন তবে Redux একটি ডিফল্ট ব্যবহার করবে। এই ডিফল্ট mapDispatchফাংশনটি কেবল dispatchফাংশন রেফারেন্স নেয় এবং এটি আপনাকে দেয় this.props.dispatch।

— মার্কারিকসন

প্রেরণ পদ্ধতিটি সরবরাহকারী উপাদান

— ডিয়েগো হ্যাজ

Answer 3

mapStateToProps()এমন একটি ইউটিলিটি যা আপনার উপাদানকে আপডেট স্টেট (যা কিছু অন্যান্য উপাদান দ্বারা আপডেট করা হয়)
mapDispatchToProps()পেতে সহায়তা করে , এটি এমন একটি ইউটিলিটি যা আপনার উপাদানটিকে কোনও ক্রিয়াকলাপ ঘটানোর জন্য সহায়তা করবে (ক্রিয়া প্রেরণ যা অ্যাপ্লিকেশন রাষ্ট্রের পরিবর্তনের কারণ হতে পারে)

Answer 4

mapStateToProps, mapDispatchToPropsএবং লাইব্রেরি connectথেকে react-reduxআপনার stateএবং dispatchআপনার স্টোরের ফাংশন অ্যাক্সেস করার একটি সুবিধাজনক উপায় সরবরাহ করে way সুতরাং মূলত সংযোগ একটি উচ্চতর অর্ডার উপাদান, এটি আপনার জন্য যদি অর্থবোধ করে তবে আপনি একটি মোড়ক হিসাবেও ভাবতে পারেন। সুতরাং প্রতিবার আপনার stateপরিবর্তন mapStateToPropsকরা আপনার নতুন সাথে ডাকা হবে stateএবং পরবর্তীকালে আপনি propsউপাদানটি আপডেট করার সাথে সাথে ব্রাউজারে আপনার উপাদানটি রেন্ডার করতে রেন্ডার ফাংশনটি চালানো হবে। আপনার উপাদানগুলির mapDispatchToPropsকী-মানগুলিও সংরক্ষণ করে props, সাধারণত তারা কোনও ফাংশনের একটি রূপ নেয়। এইভাবে আপনি stateআপনার উপাদান onClick, onChangeইভেন্ট থেকে পরিবর্তন ট্রিগার করতে পারেন ।

ডক্স থেকে:

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

const TodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList) 

স্টেটলেস ফাংশন এবং উচ্চ-আদেশ উপাদানগুলির সাথে আপনি পরিচিত কিনা তাও নিশ্চিত করুন

Comments

তাহলে প্রেরণা মূলত ইভেন্টের মতো?

— কোড হুইস্পেরার

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

— ভ্লাদ ফিলিমন

Answer 5

mapStateToPropsগ্রহণ করে stateএবং propsআপনাকে রাষ্ট্র থেকে উপাদানগুলিতে যেতে প্রপসগুলি বের করতে দেয়।

mapDispatchToPropsঅ্যাকশন নির্মাতাদের প্রেরণে আবদ্ধ করার জন্য এটি গ্রহণ করে dispatchএবং propsবোঝানো হয় যাতে আপনি ফলস্বরূপ ফাংশনটি কার্যকর করলে ক্রিয়াটি প্রেরণ করা হয়।

আমি দেখতে পাচ্ছি এটি কেবল dispatch(actionCreator())আপনার উপাদানগুলির মধ্যে থাকা থেকে আপনাকে বাঁচায় যাতে এটি পড়া সহজ হয়।

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments

Comments

ধন্যবাদ তবে dispatchপদ্ধতির মূল্য কী ? যেখানে এটি থেকে আসে?

— কোড হুইস্পেরার

উহু. মূলত প্রেরণটি অ্যাকশনটি রিডুএক্স / ফ্লাক্স একমুখী প্রবাহকে শুরু করে। অন্যান্য উত্তরগুলি আপনার প্রশ্নের উত্তর এর চেয়ে ভাল বলে মনে হয়েছে।

— হ্যারি মোরেনো

এছাড়াও, প্রেরণ পদ্ধতিটি <Provider/>নিজেই সরবরাহিত বর্ধন থেকে আসে । এটি তার বাচ্চাদের উপাদানগুলিতে প্রেরণ উপলব্ধ যে গ্যারান্টি সহ এটি নিজস্ব হাই অর্ডার উপাদান উপাদান যাদু করে magic

— রিকার্ডো ম্যাগালহিস

Answer 6

এখন ধরুন রিডুএক্সের জন্য এখানে কোনও পদক্ষেপ রয়েছে:

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

আপনি যখন এটি আমদানি করবেন,

import {addTodo} from './actions';

class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.onTodoClick(); // This prop acts as key to callback prop for mapDispatchToProps
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

const mapDispatchToProps = dispatch => {
    return {
      onTodoClick: () => { // handles onTodoClick prop's call here
        dispatch(addTodo())
      }
    }
}

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

ফাংশনটির নাম যেমনটি বলেছে mapDispatchToProps(), dispatchপ্রপসগুলিতে মানচিত্রের ক্রিয়া (আমাদের উপাদানগুলির প্রপস)

সুতরাং প্রপ onTodoClickহ'ল একটি mapDispatchToPropsকার্যকরী কী যা প্রতিনিয়ত কর্ম প্রেরণের জন্য প্রতিনিধিত্ব করে addTodo।

এছাড়াও যদি আপনি কোডটি ছাঁটাই করতে চান এবং ম্যানুয়াল বাস্তবায়নকে বাইপাস করতে চান তবে আপনি এটি করতে পারেন,

import {addTodo} from './actions';
class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.addTodo();
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

export default connect(
    null,
    {addTodo}
)(Greeting);

যার অর্থ ঠিক

const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }
}