প্রতিক্রিয়া-রেডাক্স এবং মানচিত্রের স্টেটটোপ্রোপগুলি বোঝা ()

Question

আমি বিক্রিয়া-রিডেক্সের সংযোগ পদ্ধতিটি বোঝার চেষ্টা করছি এবং এটি পরামিতি হিসাবে গ্রহণ করে। নির্দিষ্টভাবেmapStateToProps() ।

আমি এটি যেভাবে বুঝতে পারি তার ফেরতের মান mapStateToProps রাষ্ট্র থেকে প্রাপ্ত একটি বস্তু হবে (এটি স্টোরের মধ্যে যেমন রয়েছে), যার কীগুলি আপনার টার্গেট উপাদানগুলিতে (উপাদান সংযোগটি প্রয়োগ করা হবে) প্রপস হিসাবে দেওয়া হবে।

এর অর্থ হ'ল আপনার টার্গেট উপাদান দ্বারা যে রাজ্যটি গ্রাস করা হয় তা আপনার স্টোরে সঞ্চিত থাকায় এই রাজ্যটির থেকে পৃথক পৃথক কাঠামো থাকতে পারে।

প্রশ্ন: এটা ঠিক আছে?
প্রশ্ন: এটি কি প্রত্যাশিত?
প্রশ্ন: এটি কি একটি বিরোধী নিদর্শন?

Comments

আমি মিশ্রণ আরেকটি উত্তর যোগ করতে না চান ... কিন্তু আমি কোন এক আসলে আপনার প্রশ্নের উত্তর ... আমার মতে, এটা বুঝতে পারছি না বিরোধী প্যাটার্ন। কীটি ম্যাপস্টেটটো প্রপস নামে রয়েছে আপনি কোনও উপাদান ব্যবহারের জন্য কেবল পঠনযোগ্য বৈশিষ্ট্যগুলি দিয়ে যাচ্ছেন । আমি প্রায়শই আমার ধারক উপাদানগুলি রাজ্য গ্রহণ করতে এবং উপস্থাপনা উপাদানগুলিতে প্রেরণের আগে এটি পরিবর্তন করতে ব্যবহার করব।

— ম্যাথু ব্রেন্ট

এইভাবে আমার উপস্থাপক উপাদানটি আরও সহজ ... আমি এর this.props.someDataবিপরীতে প্রতিবেদন করছি this.props.someKey[someOtherKey].someData... বোধগম্য?

— ম্যাথু ব্রেন্ট

এই টিউটোরিয়ালটি এটি যথেষ্ট ভালভাবে ব্যাখ্যা করেছে: learn.co/lessons/map-state-to-prop-readme

— আয়ান

হাই পাবলো, আপনার নির্বাচিত উত্তরটি পুনরায় বিবেচনা করুন।

— vsync

পুনরায় বিবেচনা কিভাবে?

— পাবলো ব্যারিয়া উরেনদা

Answer 1

প্রশ্ন: Is this ok?
এ: হ্যাঁ

প্রশ্ন: Is this expected?
হ্যাঁ, এটি প্রত্যাশিত (যদি আপনি প্রতিক্রিয়া-রিডেক্স ব্যবহার করছেন)।

প্রশ্ন: Is this an anti-pattern?
এ: না, এটি কোনও অ্যান্টি-প্যাটার্ন নয়।

একে আপনার উপাদানটিকে "সংযুক্ত করা" বা "এটি স্মার্ট করে তোলা" বলা হয়। এটি নকশা দ্বারা।

এটি আপনাকে অতিরিক্ত সময় থেকে আপনার রাজ্য থেকে আপনার উপাদানটি ডিকুয়াল করতে দেয় যা আপনার কোডের পরিমিতি বাড়িয়ে তোলে। এটি আপনাকে আপনার অ্যাপ্লিকেশন স্টেটের উপসেট হিসাবে আপনার উপাদান রাষ্ট্রকে সরলীকরণ করার অনুমতি দেয় যা বাস্তবে আপনাকে রেডাক্স প্যাটার্নটি মেনে চলতে সহায়তা করে।

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

এর mapStateToPropsকিছু বা এর অ্যানালগ ছাড়া , আপনি আপনার রাজ্যকে পারফরম্যান্স / সরলকরণের আরও একটি উপায় তৈরি করতে প্ররোচিত হতে পারেন।

Comments

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

— বিভ্রান্ত

@vsync আপনি কি দয়া করে ব্যাখ্যা করতে পারেন যে এটি কীভাবে সহজ গভীর অ্যাক্সেস সক্ষম করে? আপনি কী বোঝাতে চেয়েছেন যে স্থানীয় প্রপাগুলি এখন বৈশ্বিক রাষ্ট্রকে উল্লেখ করার পরিবর্তে ব্যবহার করা যেতে পারে এবং তাই এটি আরও পাঠযোগ্য?

— সিদ্ধার্থ

এছাড়াও, যখন রাজ্য অপরিবর্তনীয় হিসাবে চলে যায় তখন কোনও উপাদান কোনও অংশের সাথে জড়িত না হয়ে কীভাবে জড়িত হতে পারে?

— সিদ্ধার্থ

রাষ্ট্র যদি অপরিবর্তনীয় থাকে তবে আমি অনুমান করি যে এটি ঠিক আছে, তবে এখনও ভাল অনুশীলন হিসাবে, কেবলমাত্র তাদের সাথে সম্পর্কিত অংশগুলিকেই প্রকাশ করা ভাল। এটি অন্যান্য বিকাশকারীদের আরও ভালভাবে বুঝতে সহায়তা করে যে অংশগুলি ( রাষ্ট্রীয় বস্তুর) সেই উপাদানটির সাথে প্রাসঙ্গিক। "সহজ অ্যাক্সেস" সম্পর্কে, এটি একটি অর্থে আরও সহজ যে কিছু গভীর অবস্থার দিকে যাওয়ার পথটি সরাসরি প্রোপ হিসাবে উপাদানটির কাছে চলে যায় এবং সেই উপাদানটি পর্দার আড়ালে রেডাক্সের পক্ষে অন্ধ। কোন রাজ্য পরিচালনা ব্যবস্থা ব্যবহৃত হয় তা উপাদানগুলির উচিত নয় এবং তাদের প্রাপ্ত প্রপসগুলির সাথে তাদের কাজ করা উচিত।

— vsync

Answer 2

হ্যাঁ এটা সঠিক. আপনার রাষ্ট্রীয় বৈশিষ্ট্য অ্যাক্সেস করার সহজ উপায় পাওয়ার জন্য এটি কেবল একটি সহায়ক ফাংশন

কল্পনা করুন আপনার একটি postsআপনার অ্যাপ্লিকেশনটিতে আপনার কীstate.posts

state.posts //
/*    
{
  currentPostId: "",
  isFetching: false,
  allPosts: {}
}
*/

এবং উপাদান Posts

গতানুগতিক connect()(Posts) সংযুক্ত উপাদানগুলির জন্য সমস্ত রাজ্যের প্রপসগুলি উপলভ্য করে

const Posts = ({posts}) => (
  <div>
    {/* access posts.isFetching, access posts.allPosts */}
  </div> 
)

এখন আপনি যখন state.postsনিজের উপাদানটি মানচিত্র করবেন তখন এটি কিছুটা সুন্দর gets

const Posts = ({isFetching, allPosts}) => (
  <div>
    {/* access isFetching, allPosts directly */}
  </div> 
)

connect(
  state => state.posts
)(Posts)

mapDispatchToProps

সাধারণত আপনাকে লিখতে হবে dispatch(anActionCreator())

আপনার সাথে bindActionCreatorsএটি আরও সহজে পছন্দ করতে পারে

connect(
  state => state.posts,
  dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
)(Posts)

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

const Posts = ({isFetching, allPosts, fetchPosts, deletePost }) => (
  <div>
    <button onClick={() => fetchPosts()} />Fetch posts</button>
    {/* access isFetching, allPosts directly */}
  </div> 
)

অ্যাকশনক্রিটারগুলিতে আপডেট করুন ..

অ্যাকশনক্রিটরের উদাহরণ: deletePost

const deletePostAction = (id) => ({
  action: 'DELETE_POST',
  payload: { id },
})

সুতরাং, bindActionCreatorsকেবলমাত্র আপনার পদক্ষেপ নেবে, সেগুলিকে কলগুলিতে মুড়িয়ে দেবে dispatch। (আমি রিডুএক্সের উত্স কোডটি পড়িনি, তবে বাস্তবায়নটি এর মতো দেখতে লাগবে:

const bindActionCreators = (actions, dispatch) => {
  return Object.keys(actions).reduce(actionsMap, actionNameInProps => {
    actionsMap[actionNameInProps] = (...args) => dispatch(actions[actionNameInProps].call(null, ...args))
    return actionsMap;
  }, {})
}

Comments

আমি মনে করি আমি কিছু মিস্ পারে, কিন্তু কোথায় dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)পরার fetchPostsএবং deletePostকর্ম থেকে পাশ করলেন?

— ilo

@ আইলিও এগুলি আপনার অ্যাকশন নির্মাতা, আপনাকে সেগুলি আমদানি করতে হবে

— ওয়েবডেব

চমৎকার উত্তর! আমি মনে করি এটির জোর দেওয়াও খুব সুন্দর যে এই সংখ্যার কোডটি state => state.posts( mapStateToPropsফাংশন) আপডেটের সময় কী কী উপাদানগুলির পুনরায় রেন্ডারকে ট্রিগার করবে তা প্রতিক্রিয়া জানাবে।

— মিগুয়েল পেরেস

Answer 3

আপনি প্রথম অংশটি সঠিকভাবে পেয়েছেন:

হ্যাঁ mapStateToPropsস্টোরের যুক্তি / পরম হিসাবে রাজ্য রয়েছে (সরবরাহ করেছেনreact-redux::connect ) এবং এটি স্টোরের রাজ্যের নির্দিষ্ট অংশের সাথে উপাদানটির লিঙ্ক করতে ব্যবহৃত হয়।

লিঙ্ক করে আমার অর্থ যে ফেরত দেওয়া বস্তুটি mapStateToPropsনির্মাণের সময় প্রপস হিসাবে সরবরাহ করা হবে এবং পরবর্তী কোনও পরিবর্তন এর মাধ্যমে পাওয়া যাবে componentWillReceiveProps।

আপনি যদি পর্যবেক্ষক নকশার প্যাটার্নটি জানেন তবে এটি হুবহু এটির বা এর ছোট প্রকরণ।

একটি উদাহরণ জিনিস পরিষ্কার করতে সাহায্য করবে:

import React, {
    Component,
} from 'react-native';

class ItemsContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            items: props.items, //provided by connect@mapStateToProps
            filteredItems: this.filterItems(props.items, props.filters),
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            filteredItems: this.filterItems(this.state.items, nextProps.filters),
        });
    }

    filterItems = (items, filters) => { /* return filtered list */ }

    render() {
        return (
            <View>
                // display the filtered items
            </View>
        );
    }
}

module.exports = connect(
    //mapStateToProps,
    (state) => ({
        items: state.App.Items.List,
        filters: state.App.Items.Filters,
        //the State.App & state.App.Items.List/Filters are reducers used as an example.
    })
    // mapDispatchToProps,  that's another subject
)(ItemsContainer);

আর একটি রিঅ্যাক্ট উপাদান বলা যেতে পারে itemsFiltersযা ডিসপ্লে পরিচালনা করে এবং ফিল্ডার রাজ্যটিকে রেডাক্স স্টোরের রাজ্যে স্থির রাখতে পারে, ডেমো উপাদানটি "শ্রবণ" বা রেডাক্স স্টোর স্টেট ফিল্টারগুলিতে "সাবস্ক্রাইব" হয় তাই যখনই ফিল্টার স্টোরের স্থিতি পরিবর্তনগুলি (সহায়তায় filtersComponent) প্রতিক্রিয়া দেখায় -redux সনাক্ত করে যে সমস্ত শ্রোতা / সাবস্ক্রাইব করা উপাদানগুলিতে পরিবর্তনগুলি প্রেরণ করে একটি পরিবর্তন হয়েছে এবং বিজ্ঞপ্তি দেয় বা "প্রকাশ" করেcomponentWillReceiveProps যা এই উদাহরণে আইটেমগুলির একটি রিফিল্টার ট্রিগার করবে এবং প্রতিক্রিয়া অবস্থা পরিবর্তনের কারণে ডিসপ্লে রিফ্রেশ করবে resh ।

উদাহরণটি যদি বিভ্রান্ত হয় বা আরও ভাল ব্যাখ্যা প্রদানের জন্য যথেষ্ট পরিষ্কার না হয় তবে আমাকে জানান know

হিসাবে হিসাবে: এর অর্থ হ'ল আপনার টার্গেট উপাদান দ্বারা গ্রাসিত রাজ্যটি আপনার স্টোরে সঞ্চিত থাকায় এই রাজ্যটির থেকে বুনোভাবে আলাদা কাঠামো থাকতে পারে।

আমি প্রশ্নটি পাইনি, তবে কেবল জানি যে প্রতিক্রিয়া অবস্থা ( this.setState) রেডাক্স স্টোর রাজ্য থেকে সম্পূর্ণ আলাদা!

প্রতিক্রিয়া স্থিতি প্রতিক্রিয়া উপাদানটির পুনরায় চিত্র এবং আচরণ পরিচালনা করতে ব্যবহৃত হয়। প্রতিক্রিয়া অবস্থা একচেটিয়াভাবে উপাদান অন্তর্ভুক্ত।

রেডাক্স স্টোর রাজ্য হ'ল রেডাক্স হ্রাসকারী রাজ্যের সংমিশ্রণ, প্রতিটিই একটি ছোট অংশের অ্যাপ লজিক পরিচালনা করার জন্য দায়বদ্ধ। এই হ্রাসকারী বৈশিষ্ট্যগুলি react-redux::connect@mapStateToPropsকোনও উপাদানগুলির সাহায্যে অ্যাক্সেস করা যায় ! যা রেডাক্স স্টোরের স্থিতিকে অ্যাক্সেসযোগ্য অ্যাপ্লিকেশনটিকে প্রশস্ত করে তোলে যখন উপাদানগুলির রাজ্যটি কেবল তার নিজস্ব is

Answer 4

এই প্রতিক্রিয়া & redux উদাহরণ মোহাম্মদ Mellouki উদাহরণ বন্ধ ভিত্তি করে তৈরি। তবে প্রিট্টিফাই এবং লেটিং বিধি ব্যবহার করে বৈধতা দেয় । নোট করুন যে আমরা আমাদের প্রপসগুলি প্রপাইপগুলি ব্যবহার করে প্রেরণ পদ্ধতিগুলি সংজ্ঞায়িত করি যাতে আমাদের সংকলকটি আমাদের দিকে চিৎকার না করে। এই উদাহরণে কোডের কয়েকটি লাইনও অন্তর্ভুক্ত ছিল যা মোহাম্মদের উদাহরণে অনুপস্থিত ছিল। কানেক্টটি ব্যবহার করতে আপনাকে এটিকে রিঅ্যাক্ট-রিডেক্স থেকে আমদানি করতে হবে । এই উদাহরণটি পদ্ধতির ফিল্টারকেও বেঁধে রাখে আইটেমগুলি এটি উপাদানটির স্কোপ সমস্যাগুলি রোধ করবে । এই উত্স কোডটি জাভাস্ক্রিপ্ট প্রিটিফাই ব্যবহার করে স্বয়ংক্রিয়ভাবে ফর্ম্যাট করা হয়েছে ।

import React, { Component } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class ItemsContainer extends Component {
  constructor(props) {
    super(props);
    const { items, filters } = props;
    this.state = {
      items,
      filteredItems: filterItems(items, filters),
    };
    this.filterItems = this.filterItems.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const { itmes } = this.state;
    const { filters } = nextProps;
    this.setState({ filteredItems: filterItems(items, filters) });
  }

  filterItems = (items, filters) => {
    /* return filtered list */
  };

  render() {
    return <View>/*display the filtered items */</View>;
  }
}

/*
define dispatch methods in propTypes so that they are validated.
*/
ItemsContainer.propTypes = {
  items: PropTypes.array.isRequired,
  filters: PropTypes.array.isRequired,
  onMyAction: PropTypes.func.isRequired,
};

/*
map state to props
*/
const mapStateToProps = state => ({
  items: state.App.Items.List,
  filters: state.App.Items.Filters,
});

/*
connect dispatch to props so that you can call the methods from the active props scope.
The defined method `onMyAction` can be called in the scope of the componets props.
*/
const mapDispatchToProps = dispatch => ({
  onMyAction: value => {
    dispatch(() => console.log(`${value}`));
  },
});

/* clean way of setting up the connect. */
export default connect(mapStateToProps, mapDispatchToProps)(ItemsContainer);

এই উপাদানটি কোডটি আপনার উপাদানগুলির জন্য সূচনা স্থানের জন্য একটি ভাল টেম্পলেট।

Answer 5

প্রতিক্রিয়া-রেডাক্স connect প্রতিটি ক্রিয়াকলাপের জন্য স্টোর আপডেট করতে ব্যবহৃত হয়।

import { connect } from 'react-redux';

const AppContainer = connect(  
  mapStateToProps,
  mapDispatchToProps
)(App);

export default AppContainer;

এটি খুব সহজ এবং পরিষ্কারভাবে এই ব্লগে ব্যাখ্যা করা হয়েছে ।

আপনি গিথুব প্রকল্পটি ক্লোন করতে বা এই ব্লগ থেকে কোডটি অনুলিপি করে Redux সংযোগ বুঝতে পারবেন।

Comments

ভাল ম্যানুয়াল formapStateToProps thegreatcodeadventure.com/...

— zloctb

Answer 6

এর আচরণ বর্ণনা করার জন্য একটি রূপরেখা / বয়লারপ্লেট এখানে mapStateToProps :

(এটি একটি রেডাক্স ধারক যা করে তার এক বিস্তৃত সরল বাস্তবায়ন))

class MyComponentContainer extends Component {
  mapStateToProps(state) {
    // this function is specific to this particular container
    return state.foo.bar;
  }

  render() {
    // This is how you get the current state from Redux,
    // and would be identical, no mater what mapStateToProps does
    const { state } = this.context.store.getState();

    const props = this.mapStateToProps(state);

    return <MyComponent {...this.props} {...props} />;
  }
}

এবং পরবর্তী

function buildReduxContainer(ChildComponentClass, mapStateToProps) {
  return class Container extends Component {
    render() {
      const { state } = this.context.store.getState();

      const props = mapStateToProps(state);

      return <ChildComponentClass {...this.props} {...props} />;
    }
  }
}

Answer 7

import React from 'react';
import {connect} from 'react-redux';
import Userlist from './Userlist';

class Userdetails extends React.Component{

render(){
    return(
        <div>
            <p>Name : <span>{this.props.user.name}</span></p>
            <p>ID : <span>{this.props.user.id}</span></p>
            <p>Working : <span>{this.props.user.Working}</span></p>
            <p>Age : <span>{this.props.user.age}</span></p>
        </div>
    );
 }

}

 function mapStateToProps(state){  
  return {
    user:state.activeUser  
}

}

  export default connect(mapStateToProps, null)(Userdetails);