মানচিত্রের স্টেটটোপ্রপস এবং মানচিত্রডিশপচটপোপ্রোপগুলিতে নিজস্ব পপসের যুক্তিগুলি কী ব্যবহার করে?

Question

আমি দেখতে mapStateToPropsএবং mapDispatchToPropsফাংশন যা গৃহীত হয় connectRedux ফাংশন নিতে ownPropsএকটি দ্বিতীয় আর্গুমেন্ট হিসাবে।

[mapStateToProps(state, [ownProps]): stateProps] (Function):

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

এর [ownprops]জন্য alচ্ছিক যুক্তি কী ?

রেডাক্স ডক্সে ইতিমধ্যে একটি রয়েছে বলে আমি বিষয়গুলি পরিষ্কার করার জন্য একটি অতিরিক্ত উদাহরণ খুঁজছি

Comments

আপনি আরো নির্দিষ্ট হতে পারে; আপনি যে ডকুমেন্টেশনে লিঙ্ক করেছেন তাতে সেই যুক্তির ব্যাখ্যা সম্পর্কে কী অস্পষ্ট?

— jonrsharpe

আমি কেবল একটি অতিরিক্ত ব্যবহারিক উদাহরণ খুঁজছিলাম যেখানে আর্গুমেন্টটি ব্যবহৃত হয়েছিল।

— therewillbecode

তাহলে আপনি কি তা পরিষ্কার করতে প্রশ্নটি সম্পাদনা করতে পারবেন?

— jonrsharpe

@ জোনারশপে রিঅ্যাক্ট-রিডাক্স ডক্স যা বলে তা বলে না, কেবল এটি বিদ্যমান, তাকে নিজস্বপ্রপাস বলা হয় এবং ফাংশনটির আরিটি নির্ধারণ করে যে এটি পাস হয়েছে কিনা - এটি কী নয়।

— deb0ch

@ deb0ch আমি 18 মাস আগে এটি কী বলেছিল তা জানি না, তবে এখনই এটি বলেছে "সংযুক্ত উপাদানগুলিতে প্রপস পাস হয়েছে" । যেভাবেই হোক না কেন, ওপি তখন থেকেই প্রশ্নটি সম্পাদনা করেছে এবং একটি উত্তর পেয়েছে এবং গ্রহণ করেছে।

— jonrsharpe

Answer 1

যদি ownPropsপ্যারামিটারটি সুনির্দিষ্ট করা থাকে, তবে বিক্রিয়া-রিডেক্স আপনার connectকার্যগুলিতে উপাদানগুলিতে প্রপসগুলি পাস করবে । সুতরাং, যদি আপনি এটির মতো কোনও সংযুক্ত উপাদান ব্যবহার করেন:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

ownPropsআপনার ভিতরে mapStateToPropsএবং mapDispatchToPropsফাংশন একটি বস্তু হবে:

{ value: 'example' }

এবং এই ফাংশনগুলি থেকে কী ফিরে আসবে তা সিদ্ধান্ত নিতে আপনি এই অবজেক্টটি ব্যবহার করতে পারেন।

---

উদাহরণস্বরূপ, একটি ব্লগ পোস্ট উপাদান:

// BlogPost.js
export default function BlogPost (props) {
  return <div>
    <h2>{props.title}</h2>
    <p>{props.content}</p>
    <button onClick={props.editBlogPost}>Edit</button>
  </div>
}

আপনি রেডাক্স অ্যাকশন নির্মাতাদের ফিরিয়ে দিতে পারেন যা নির্দিষ্ট পোস্টে কিছু করে:

// BlogPostContainer.js
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import BlogPost from './BlogPost.js'
import * as actions from './actions.js'

const mapStateToProps = (state, props) =>
  // Get blog post data from the store for this blog post ID.
  getBlogPostData(state, props.id)

const mapDispatchToProps = (dispatch, props) => bindActionCreators({
  // Pass the blog post ID to the action creator automatically, so
  // the wrapped blog post component can simply call `props.editBlogPost()`:
  editBlogPost: () => actions.editBlogPost(props.id)
}, dispatch)

const BlogPostContainer = connect(mapStateToProps, mapDispatchToProps)(BlogPost)
export default BlogPostContainer

এখন আপনি এই উপাদানটি এর মতো ব্যবহার করবেন:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />

Comments

দ্রষ্টব্য - ডিফল্টপ্রপালগুলি নিজস্ব পপগুলিতে অন্তর্ভুক্ত নেই

— মার্ক সোয়ার্ডস্ট্রম

Answer 2

নিজস্বপ্রপালগুলি সেই প্রপসকে বোঝায় যা পিতামাতার দ্বারা নিচে দেওয়া হয়েছিল।

সুতরাং, উদাহরণস্বরূপ:

প্যারেন্ট.জেএসএক্স:

...
<Child prop1={someValue} />
...

চাইল্ড.জেএসএক্স:

class Child extends Component {
  props: {
    prop1: string,
    prop2: string,
  };
...
}

const mapStateToProps = (state, ownProps) => {
  const prop1 = ownProps.prop1;
  const tmp = state.apiData[prop1]; // some process on the value of prop1
  return {
    prop2: tmp
  };
};

Answer 3

গেটো-বাস-স্টপের উত্তরটি ভাল, তবে একটি বিষয় মনে রাখতে হবে তা হ'ল রিডেক্সের লেখক আব্রামভ / গিয়ারের মতে, এই ফাংশনগুলিতে নিজস্বপ্রপোসগুলি ব্যবহার করা তাদের ধীর করে দেয় কারণ প্রপস পরিবর্তনের সময় তাদের অবশ্যই অ্যাকশন নির্মাতাদের পুনরায় প্রত্যাবর্তন করতে হবে।

এই লিঙ্কে তার মন্তব্য দেখুন: https://github.com/reduxjs/redux-devtools/issues/250