কীভাবে এটি থেকে সহজ প্রেরণ পাবেন? সংযুক্ত ডাব্লু / রেডাক্স ব্যবহার করে ফসলগুলি?

Question

আমি একটি সাধারণ প্রতিক্রিয়া উপাদান পেয়েছি যা আমি সংযুক্ত হয়েছি (একটি সাধারণ অ্যারে / স্টেটের উপরে ম্যাপিং করছি)। স্টোরের প্রসঙ্গে প্রসঙ্গটি উল্লেখ করা থেকে বিরত রাখতে আমি প্রপস থেকে সরাসরি "প্রেরণ" পাওয়ার উপায় চাই। আমি অন্যদের এই পদ্ধতির ব্যবহার করতে দেখেছি তবে কোনও কারণে এটিতে অ্যাক্সেস নেই :)

আমি বর্তমানে ব্যবহার করছি প্রতিটি এনপিএম নির্ভরতার সংস্করণ এখানে

"react": "0.14.3",
"react-redux": "^4.0.0",
"react-router": "1.0.1",
"redux": "^3.0.4",
"redux-thunk": "^1.0.2"

এই উপাদানটি ডাব্লু / সংযোগ পদ্ধতিটি

class Users extends React.Component {
    render() {
        const { people } = this.props;
        return (
            <div>
                <div>{this.props.children}</div>
                <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button>
            </div>
        );
    }
};

function mapStateToProps(state) {
    return { people: state.people };
}

export default connect(mapStateToProps, {
    fetchUsers
})(Users);

যদি আপনার রিডিউসারটি দেখতে প্রয়োজন (উত্তেজনাপূর্ণ কিছুই নয় তবে এটি এখানে)

const initialState = {
    people: []
};

export default function(state=initialState, action) {
    if (action.type === ActionTypes.ADD_USER) {
        let newPeople = state.people.concat([{id: action.id, name: 'wat'}]);
        return {people: newPeople};
    }
    return state;
};

আপনার যদি দেখতে হয় যে আমার রাউটারটি ডাব্লু / রিডুএক্স কীভাবে কনফিগার করা আছে

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

var Route = (
  <Provider store={store}>
    <Router history={createBrowserHistory()}>
      {Routes}
    </Router>
  </Provider>
);

হালনাগাদ

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

[MapDispatchToProps]

Answer 1

ডিফল্ট mapDispatchToPropsহিসাবে ঠিক dispatch => ({ dispatch })।
সুতরাং আপনি যদি দ্বিতীয় যুক্তিটি নির্দিষ্ট না করেন তবে আপনি আপনার উপাদান হিসাবে প্রপ হিসাবে ইনজেকশন connect()পাবেন dispatch।

আপনি যদি কাস্টম ফাংশনটি পাস করেন তবে আপনি ফাংশনটি mapDispatchToPropsদিয়ে যে কোনও কিছু করতে পারেন।
কয়েকটি উদাহরণ:

// inject onClick
function mapDispatchToProps(dispatch) {
  return {
    onClick: () => dispatch(increment())
  };
}

// inject onClick *and* dispatch
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onClick: () => dispatch(increment())
  };
}

আপনাকে কিছু টাইপ করতে বাঁচাতে রেডাক্স সরবরাহ করে bindActionCreators()যা আপনাকে এটি ঘুরিয়ে দেয়:

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return {
    onPlusClick: () => dispatch(increment()),
    onMinusClick: () => dispatch(decrement())
  };
}

এটিতে:

import { bindActionCreators } from 'redux';

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    onPlusClick: increment,
    onMinusClick: decrement
  }, dispatch);
}

বা প্রাপের নামগুলি ক্রিয়া স্রষ্টার নামের সাথে মিলে গেলে আরও ছোট হয়:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

যদি আপনি চান আপনি অবশ্যই dispatchহাতে হাতে যুক্ত করতে পারেন :

// injects increment, decrement, and dispatch itself
function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({ increment, decrement }), // es7 spread syntax
    dispatch
  };
}

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

শেষ অবধি, আপনি এখন যে প্যাটার্নটি ব্যবহার করছেন তা হ'ল একটি শর্টকাট যা কল করার চেয়েও ছোট bindActionCreators। আপনি যখন যা কিছু করেন ফিরে আসে bindActionCreators, আপনি এটি করার পরিবর্তে কলটি বাদ দিতে পারেন:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

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

এই হিসাবে লেখা যেতে পারে

export default connect(
  mapStateToProps,
  { increment, decrement } // injects increment and decrement
)(App);

যাইহোক আপনি যখনই আরও কিছু কাস্টম চান dispatchতেমন পাস করার মতো সুন্দর সংক্ষিপ্ত বাক্য গঠন ত্যাগ করতে হবে ।

Comments

@ ডানআব্রামভ বিটিডাব্লু চ্ছিকভাবে দ্বিতীয় পরামিতি bindActionCreators(actionCreators, dispatch)? আমি আপনার কোডটি // es7 spread syntaxলাইনে লক্ষ্য করেছি , এটি dispatchপাস করা হয়নিbindActionCreators

— yonasstephen

ভিতরে ইনক্রিমেন্ট পদ্ধতি কি?

— খুরশিদ আনসারী

এস 7 স্প্রেড সিনট্যাক্সটি হওয়া উচিত function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ increment, decrement }), dispatch }; }

— কালো

Answer 2

আপনি যা পছন্দ করেন তার উপর ভিত্তি করে আপনি সাধারণত মিক্স এবং মিল করতে পারেন।

আপনি করতে পারেন পাস dispatchএকটি ঠেকনা হিসাবে যদি যে আপনি যা চান তা:

export default connect(mapStateToProps, (dispatch) => ({
    ...bindActionCreators({fetchUsers}, dispatch), dispatch
}))(Users);

আমি নিশ্চিত না যে কীভাবে fetchUsersব্যবহৃত হয় (অ্যাসিঙ্ক ফাংশন হিসাবে?) তবে আপনি সাধারণত প্রেরণকে স্বয়ংক্রিয়ভাবে বেঁধেbindActionCreators দেওয়ার মতো কিছু ব্যবহার করবেন এবং তারপরে আপনাকে সরাসরি সংযুক্ত উপাদানগুলিতে সরাসরি ব্যবহার করার বিষয়ে চিন্তা করতে হবে না ।dispatch

ব্যবহার dispatchদম্পতিরা নির্দেশিকা সাজানোর বোবা redux সঙ্গে, আড়ম্বরহীন অংশটি। যা এটি কম পোর্টেবল করতে পারে।

Comments

আপনি যা পরামর্শ দিচ্ছেন তা কার্যকর হবে না। আপনি fetchUsersপ্রোপ হিসাবে একটি আনবাউন্ড ইঞ্জেকশন পাবেন । শর্টকাট স্বরলিপিটি তখনই কাজ করে যখন আপনি কোনও বিষয়টিকে দ্বিতীয় যুক্তি হিসাবে পাস করবেন। যখন আপনি একটি ফাংশন পাস আপনাকে কল করার আছে bindActionCreatorsনিজেকে: dispatch => ({ ...bindActionCreators({ fetchUsers }, dispatch), dispatch })।

— ড্যান আব্রামভ

কেন সরাসরি প্রেরণে বাইন্ডএ্যাকশনক্রিটারগুলিতে ছড়িয়ে পড়ে এবং পাস করে? dispatch => ( bindActionCreators({ dispatch, fetchUsers }, dispatch))

— ব্যবহারকারীর 1111421

Answer 3

আপনি এর dispatchঅংশ হিসাবে পাস করতে পারার সময় dispatchToProps, আমি আপনাকে storeবা dispatchআপনার উপাদানগুলির মধ্যে থেকে সরাসরি অ্যাক্সেস এড়ানো পরামর্শ দিচ্ছি । দেখে মনে হচ্ছে সংযোগের ২ য় আর্গুমেন্টে সীমাবদ্ধ অ্যাকশন নির্মাতাকে দিয়ে আপনি আরও ভাল পরিবেশিত হবেনdispatchToProps

"এখানে ইতিমধ্যে আবদ্ধ অ্যাকশন নির্মাতা" কীভাবে আপনার উপাদানগুলি সরাসরি স্টোর / প্রেরণের উপর নির্ভর করতে বা নির্ভর করতে হবে তা কীভাবে পাস করবেন তার https://stackoverflow.com/a/34455431/2644281 এখানে পোস্ট করা একটি উদাহরণ দেখুন ।

সংক্ষেপে দুঃখিত। আমি ডাব্লু / আরও তথ্য আপডেট করব।