ইএস 6 জেনারেটরের সাথে রিডেক্স-সাগা ব্যবহারের প্রসেস / কনস

Question

এই মুহুর্তে রেডেক্স শহরে সর্বশেষতম বাচ্চা, রিডেক্স-সাগা / রিডেক্স-সাগা সম্পর্কে প্রচুর আলোচনা রয়েছে । এটি শোনার / প্রেরণ কর্মের জন্য জেনারেটর ফাংশন ব্যবহার করে।

আমি এটির চারপাশে মাথাটি মুড়িয়ে দেওয়ার আগে, আমি redux-sagaযেখানে redux-thunkঅ্যাসিঙ্ক / অপেক্ষায় রয়েছি নীচের পদ্ধতির পরিবর্তে ব্যবহারের উপকারিতা / ধারণাগুলি জানতে চাই।

কোনও উপাদান এই মত দেখতে পারে, স্বাভাবিকের মতো ক্রিয়া প্রেরণ করে।

import { login } from 'redux/auth';

class LoginForm extends Component {

  onClick(e) {
    e.preventDefault();
    const { user, pass } = this.refs;
    this.props.dispatch(login(user.value, pass.value));
  }

  render() {
    return (<div>
        <input type="text" ref="user" />
        <input type="password" ref="pass" />
        <button onClick={::this.onClick}>Sign In</button>
    </div>);
  } 
}

export default connect((state) => ({}))(LoginForm);

তারপরে আমার ক্রিয়াকলাপগুলি এরকম কিছু দেখায়:

// auth.js

import request from 'axios';
import { loadUserData } from './user';

// define constants
// define initial state
// export default reducer

export const login = (user, pass) => async (dispatch) => {
    try {
        dispatch({ type: LOGIN_REQUEST });
        let { data } = await request.post('/login', { user, pass });
        await dispatch(loadUserData(data.uid));
        dispatch({ type: LOGIN_SUCCESS, data });
    } catch(error) {
        dispatch({ type: LOGIN_ERROR, error });
    }
}

// more actions...

---

// user.js

import request from 'axios';

// define constants
// define initial state
// export default reducer

export const loadUserData = (uid) => async (dispatch) => {
    try {
        dispatch({ type: USERDATA_REQUEST });
        let { data } = await request.get(`/users/${uid}`);
        dispatch({ type: USERDATA_SUCCESS, data });
    } catch(error) {
        dispatch({ type: USERDATA_ERROR, error });
    }
}

// more actions...

Comments

আমার উত্তরটিও রেডেক্স-থাঙ্ককে রেডেক্স-সাগার সাথে তুলনা করে দেখুন: স্ট্যাকওভারফ্লো.com

— সেবাস্তিয়ান লরবার

কি ::আপনার সামনে this.onClickDo?

— ডাউনহিলসকি

@ ঝেনিয়াংহুয়া এটি ফাংশনটিকে ( this), ওরফে আবদ্ধ করার জন্য একটি স্বল্প হাত this.onClick = this.onClick.bind(this)। লম্বা ফর্মটি সাধারণত কনস্ট্রাক্টারে করার পরামর্শ দেওয়া হয়, কারণ প্রতিটি রেন্ডারে সংক্ষিপ্ত হাতটি আবার বেঁধে রাখে।

— hampusohlsson

আমি দেখি. ধন্যবাদ! লোকেরা ফাংশনটি bind()পাস thisকরার জন্য অনেকগুলি ব্যবহার করে দেখছি , তবে আমি () => method()এখনই ব্যবহার শুরু করেছি ।

— ডাউনহিলসকি

@ হোসর আমি কিছু সময়ের জন্য উত্পাদনে হুডুএক্স এবং রিডাক্স-সাগা ব্যবহার করেছি, তবে আসলে কয়েক মাস পরে এমবএক্সে স্থানান্তরিত হয়েছিল কারণ কম ওভারহেড

— হাম্পাসোহ্লসন

Answer 1

রিডেক্স-সাগায় উপরের উদাহরণটির সমতুল্য হবে

export function* loginSaga() {
  while(true) {
    const { user, pass } = yield take(LOGIN_REQUEST)
    try {
      let { data } = yield call(request.post, '/login', { user, pass });
      yield fork(loadUserData, data.uid);
      yield put({ type: LOGIN_SUCCESS, data });
    } catch(error) {
      yield put({ type: LOGIN_ERROR, error });
    }  
  }
}

export function* loadUserData(uid) {
  try {
    yield put({ type: USERDATA_REQUEST });
    let { data } = yield call(request.get, `/users/${uid}`);
    yield put({ type: USERDATA_SUCCESS, data });
  } catch(error) {
    yield put({ type: USERDATA_ERROR, error });
  }
}

প্রথমে লক্ষ্য করার বিষয়টি হ'ল আমরা ফর্মটি ব্যবহার করে এপিআই ফাংশনগুলি কল করছি yield call(func, ...args)। callপ্রভাব কার্যকর করে না, এটি কেবল একটি সরল বস্তু তৈরি করে {type: 'CALL', func, args}। এক্সিকিউশনটি রিডেক্স-সাগা মিডলওয়্যারকে অর্পণ করা হয় যা ফাংশনটি সম্পাদন এবং এর ফলাফলের সাথে জেনারেটর পুনরায় শুরু করার যত্ন নেয়।

প্রধান সুবিধাটি হ'ল আপনি সাধারণ সমতা পরীক্ষার ব্যবহার করে রেডাক্সের বাইরে জেনারেটরটি পরীক্ষা করতে পারেন

const iterator = loginSaga()

assert.deepEqual(iterator.next().value, take(LOGIN_REQUEST))

// resume the generator with some dummy action
const mockAction = {user: '...', pass: '...'}
assert.deepEqual(
  iterator.next(mockAction).value, 
  call(request.post, '/login', mockAction)
)

// simulate an error result
const mockError = 'invalid user/password'
assert.deepEqual(
  iterator.throw(mockError).value, 
  put({ type: LOGIN_ERROR, error: mockError })
)

দ্রষ্টব্য যে আমরা এপিটর কল ফলাফলকে কেবল পুনরাবৃত্তির nextপদ্ধতিতে উপহাসকৃত ডেটা ইনজেকশনের মাধ্যমে উপহাস করছি । উপহাসের কাজগুলি উপহাসের কাজগুলির চেয়ে সহজতর data

নোটিশ দ্বিতীয় জিনিস কল yield take(ACTION)। পদক্ষেপগুলি প্রতিটি নতুন ক্রিয়াকলাপের (যেমন LOGIN_REQUEST) অ্যাকশন স্রষ্টাকে ডাকা হয় । উদাহরণস্বরূপ ক্রিয়াগুলি ক্রমাগতভাবে থাঙ্কগুলিতে ঠেলে দেওয়া হয় এবং কখন এই ক্রিয়াগুলি পরিচালনা করা বন্ধ করার বিষয়ে থঙ্কদের কোনও নিয়ন্ত্রণ নেই।

রিডেক্স-সাগায়, জেনারেটরগুলি পরবর্তী ক্রিয়াটি টান দেয়। অর্থাত্ কখন কোনও ক্রিয়া শোনার জন্য এবং কখন না করিতে হয় সেগুলির নিয়ন্ত্রণ থাকে। উপরের উদাহরণে প্রবাহের নির্দেশাবলী একটি while(true)লুপের অভ্যন্তরে স্থাপন করা হয়েছে , সুতরাং এটি প্রতিটি আগত ক্রিয়া শুনবে, যা কিছুটা ঠোঁট ঠেলাঠেলি আচরণের নকল করে।

টান পদ্ধতির জটিল নিয়ন্ত্রণ প্রবাহ বাস্তবায়নের অনুমতি দেয়। ধরুন উদাহরণস্বরূপ আমরা নিম্নলিখিত প্রয়োজনীয়তাগুলি যুক্ত করতে চাই

• লোগোউট ব্যবহারকারীর ক্রিয়া পরিচালনা করুন

• প্রথম সফল লগইন হওয়ার পরে, সার্ভারটি একটি টোকেন দেয় যা expires_inক্ষেত্রের মধ্যে কিছু দেরিতে শেষ হয় । আমাদের প্রতিটি expires_inমিলি সেকেন্ডের পটভূমিতে অনুমোদনটি রিফ্রেশ করতে হবে

• অ্যাকাউন্টে বিবেচনা করুন যে এপিআই কলগুলির ফলাফলের জন্য অপেক্ষা করার সময় (প্রাথমিকভাবে লগইন করুন বা রিফ্রেশ করুন) ব্যবহারকারী লগ-ইন করতে পারেন।

কিভাবে আপনি thunks সঙ্গে এটি বাস্তবায়ন করবে; পুরো প্রবাহের জন্য পুরো পরীক্ষার কভারেজ দেওয়ার সময়? এটি সাগাসের সাথে দেখতে কেমন হতে পারে তা এখানে:

function* authorize(credentials) {
  const token = yield call(api.authorize, credentials)
  yield put( login.success(token) )
  return token
}

function* authAndRefreshTokenOnExpiry(name, password) {
  let token = yield call(authorize, {name, password})
  while(true) {
    yield call(delay, token.expires_in)
    token = yield call(authorize, {token})
  }
}

function* watchAuth() {
  while(true) {
    try {
      const {name, password} = yield take(LOGIN_REQUEST)

      yield race([
        take(LOGOUT),
        call(authAndRefreshTokenOnExpiry, name, password)
      ])

      // user logged out, next while iteration will wait for the
      // next LOGIN_REQUEST action

    } catch(error) {
      yield put( login.error(error) )
    }
  }
}

উপরের উদাহরণে, আমরা ব্যবহার করে আমাদের একচ্ছত্র প্রয়োজনীয়তা প্রকাশ করছি race। যদি take(LOGOUT)রেসটি জয়ী হয় (যেমন ব্যবহারকারী কোনও লগআউট বোতামে ক্লিক করেছেন)। রেসটি স্বয়ংক্রিয়ভাবে authAndRefreshTokenOnExpiryপটভূমির কাজটি বাতিল করে দেবে । এবং যদি authAndRefreshTokenOnExpiryকোনও call(authorize, {token})কলটির মাঝামাঝি অবরুদ্ধ হয়ে থাকে তবে এটিও বাতিল হয়ে যাবে। বাতিল স্বয়ংক্রিয়ভাবে নীচের দিকে প্রচার করে।

আপনি উপরের প্রবাহের একটি চলমান ডেমো খুঁজে পেতে পারেন

Comments

@ ইয়াসিনে ফাংশনটি কোথা delayথেকে আসছে? আহ, এটি খুঁজে পেয়েছে: github.com/yelouafi/redux-saga/blob/…

— ফিলিপ

redux-thunk-ব্যাখ্যা স্ব কোড বেশ পাঠযোগ্য এবং হয়। কিন্তু redux-sagas: এক প্রধানত সেই ক্রিয়া মত ফাংশন কারণ সত্যিই অপাঠ্য হয়, call, fork, take, put...

— syg

@ সাইগ, আমি সম্মতি জানাই যে কল, কাঁটাচামচ, নেওয়া এবং করা আরও শব্দার্থবান্ধব হতে পারে। যাইহোক, এটি সেই ক্রিয়া-জাতীয় ফাংশন যা সমস্ত পার্শ্ব-প্রতিক্রিয়াটিকে যদিও পরীক্ষামূলক করে তোলে।

— ডাউনহিলসকি

@ সাইগ এখনও সেই অদ্ভুত ক্রিয়াগুলি সহ একটি ফাংশন গভীর প্রতিশ্রুতি শৃঙ্খলাযুক্ত ফাংশনের চেয়ে বেশি পঠনযোগ্য

— ইয়াসের সিনজাব

এই "অদ্ভুত" ক্রিয়াগুলি আপনাকে রিডুএক্স থেকে আসা বার্তাগুলির সাথে সাগের সম্পর্কের ধারণাটি তৈরি করতে সহায়তা করে। আপনি পারেন নিতে redux বাইরে বার্তা ধরনের - প্রায়ই পরবর্তী পুনরাবৃত্তিতে ট্রিগার, এবং আপনি করতে পারেন করা নতুন বার্তা ফিরে আপনার পার্শ্ব প্রতিক্রিয়া ফল সম্প্রচার করতে।

— worc

Answer 2

আমি লাইব্রেরি লেখকের পরিবর্তে পুরো উত্তর ছাড়াও প্রোডাকশন সিস্টেমে সাগা ব্যবহার করে আমার অভিজ্ঞতা যুক্ত করব।

প্রো (সাগা ব্যবহার করে):

• Testability। কল () একটি খাঁটি অবজেক্ট ফেরত দেয়ায় সাগগুলি পরীক্ষা করা খুব সহজ। থাঙ্কগুলি পরীক্ষা করার জন্য সাধারণত আপনার পরীক্ষার ভিতরে মকস্টোর অন্তর্ভুক্ত করা প্রয়োজন।

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

• সমস্ত পার্শ্ব প্রতিক্রিয়াগুলি হ্যান্ডেল করার জন্য সাগাস স্বাধীন স্থান সরবরাহ করে। আমার অভিজ্ঞতায় থাঙ্ক ক্রিয়াগুলির চেয়ে সাধারণত পরিবর্তন ও পরিচালনা করা সহজ।

কন:

• জেনারেটর সিনট্যাক্স।

• প্রচুর ধারণা শিখতে হবে।

• এপিআই স্থিতিশীলতা। দেখে মনে হচ্ছে রিডেক্স-সাগা এখনও বৈশিষ্ট্যগুলি যুক্ত করছে (যেমন চ্যানেল?) এবং সম্প্রদায়টি এত বড় নয়। কোনও দিন যদি গ্রন্থাগারটি একটি অনগ্রসর সামঞ্জস্যপূর্ণ আপডেট করে a

Comments

শুধু কিছু মন্তব্য করতে চান, অ্যাকশন স্রষ্টাকে খাঁটি ফাংশন হওয়ার দরকার নেই, যা ড্যান নিজেই বহুবার দাবি করেছেন।

— মারসন মাও

বর্তমানে হিসাবে, ব্যবহার এবং সম্প্রদায়টি প্রসারিত হওয়ার সাথে সাথে রিডুএক্স-সাগাগুলি খুব প্রস্তাবিত। এছাড়াও, এপিআই আরও পরিণত হয়েছে। API stabilityবর্তমান পরিস্থিতি প্রতিফলিত করার জন্য আপডেট হিসাবে কনটিকে অপসারণের বিষয়টি বিবেচনা করুন ।

— Denialos

সাগা

— থাঙ্কের

হ্যাঁ, এফডব্লিউআইডাব্লুডেক্স-সাগায় এখন 12 কে তারা রয়েছে, হুডু-থাঙ্কে 8 ক রয়েছে

— ব্রায়ান বার্নস

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

— থিওসোফেসপেডে

Answer 3

আমি আমার ব্যক্তিগত অভিজ্ঞতা থেকে কিছু মন্তব্য যুক্ত করতে চাই (সাগা এবং থাঙ্ক উভয় ব্যবহার করে):

সাগস পরীক্ষার জন্য দুর্দান্ত:

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

সাগস আরও শক্তিশালী। এক থাঙ্কের অ্যাকশন স্রষ্টাকে আপনি যা করতে পারেন তা সমস্ত আপনি একটি কাহিনীতেও করতে পারেন, তবে তদ্বিপরীত নয় (বা কমপক্ষে সহজে নয়)। উদাহরণ স্বরূপ:

• কোনও ক্রিয়া / ক্রিয়া প্রেরণের জন্য অপেক্ষা করুন ( take)
• বিদ্যমান রুটিন বাতিল ( cancel, takeLatest, race)
• একাধিক রুটিন একই কর্ম শুনতে পারেন ( take, takeEvery, ...)

সাগাস অন্যান্য দরকারী কার্যকারিতাও সরবরাহ করে যা কিছু সাধারণ প্রয়োগের ধরণকে সাধারণীকরণ করে:

• channels বাহ্যিক ইভেন্ট উত্সগুলি (যেমন ওয়েবসকেট) শুনতে
• কাঁটাচামচ মডেল ( fork, spawn)
• শ্বাসনালী
• ...

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

Answer 4

কিছু ব্যক্তিগত অভিজ্ঞতা:

1. কোডিং স্টাইল এবং পঠনযোগ্যতার জন্য, অতীতে রিডেক্স-সাগা ব্যবহারের সর্বাধিক উল্লেখযোগ্য সুবিধা হ'ল রিডেক্স-থাঙ্কে কলব্যাক হেল এড়িয়ে চলুন - তারপরে / আরও কিছু বাসা বাঁধতে হবে না। তবে এখন অ্যাসিঙ্ক / ওয়েট থঙ্কের জনপ্রিয়তার সাথে রিডুএক্স-থাঙ্ক ব্যবহার করার সময় কেউ সিঙ্ক স্টাইলে অ্যাসিঙ্ক কোডও লিখতে পারে, যা রিডেক্স-থিংকের উন্নতি হিসাবে বিবেচিত হতে পারে।

2. রিডেক্স-সাগা ব্যবহার করার সময় বিশেষত টাইপস্ক্রিপ্টে একজনকে আরও অনেক বেশি বয়লারপ্লেট কোড লেখার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, যদি কেউ একটি আনয়ন async ফাংশনটি প্রয়োগ করতে চায় তবে ডেটা এবং ত্রুটি হ্যান্ডলিং সরাসরি একটি একক FETCH ক্রিয়াকলাপের সাথে ক্রিয়াকলাপের একটি থাঙ্ক ইউনিটে সম্পাদন করা যেতে পারে। তবে রিডেক্স-সাগায়, কাউকে FETCH_START, FETCH_SUCCESS এবং FETCH_FAILURE ক্রিয়া এবং তার সাথে সম্পর্কিত সমস্ত ধরণের-চেকগুলি সংজ্ঞায়িত করার প্রয়োজন হতে পারে কারণ রিডুএক্স-সাগা এর বৈশিষ্ট্যগুলির মধ্যে একটি হ'ল এই ধরণের "টোকেন" প্রক্রিয়াটি প্রভাব তৈরি করতে এবং নির্দেশ দেওয়ার জন্য ব্যবহার করা হয় সহজ পরীক্ষার জন্য রিডেক্স স্টোর। অবশ্যই এই ক্রিয়াগুলি ব্যবহার না করে কেউ একটি কাহিনী লিখতে পারে, তবে এটি এটি একটি শাঁকের মতো করে তুলবে।

3. ফাইল গঠনের ক্ষেত্রে, রিডেক্স-সাগা অনেক ক্ষেত্রেই আরও স্পষ্ট বলে মনে হয়। প্রত্যেকটি সাগ্যাস.টিসে সহজেই একটি অ্যাসিঙ্ক সম্পর্কিত কোড খুঁজে পাওয়া যায়, তবে রিডুএক্স-থাঙ্কে, ক্রিয়াকলাপে এটি দেখতে হবে।

4. সহজ পরীক্ষা-নিরীক্ষা হ'ল রিডেক্স-সাগায়ার আরও একটি ওজনযুক্ত বৈশিষ্ট্য হতে পারে। এটি সত্যই সুবিধাজনক। তবে একটি বিষয় যা স্পষ্ট করে বলা দরকার তা হ'ল রিডুএক্স-সাগা "কল" পরীক্ষাটি পরীক্ষায় সত্যিকারের এপিআই কল করতে পারে না, সুতরাং এপিআই কলের পরে যে পদক্ষেপগুলি এটি ব্যবহার করতে পারে তার জন্য নমুনা ফলাফল নির্দিষ্ট করতে হবে। সুতরাং রিডেক্স-সাগায় লেখার আগে একটি সাগা এবং এর সাথে সম্পর্কিত sagas.spec.ts বিস্তারিতভাবে পরিকল্পনা করা ভাল।

5. রেডাক্স-সাগা অনেক উন্নত বৈশিষ্ট্য যেমন সমান্তরালভাবে চলমান কাজগুলি গ্রহণ করে, টেকলেস্ট / টেকএভারি, কাঁটাচামচ / স্প্যানের মতো সমাবর্তন সহায়ক, যা থঙ্কগুলির চেয়ে অনেক বেশি শক্তিশালী।

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

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

Answer 5

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

হ্যাঁ এটি শুরু করার সাথে কিছুটা বিভ্রান্ত হয়, তবে বেশিরভাগ ডেভস এটি একটি দিনের মধ্যে এটি উপলব্ধি করতে যথেষ্ট পরিমাণে পায়। আমি সবসময় লোকেদের বলি যে কী yieldশুরু করতে হবে তা নিয়ে চিন্তা করবেন না এবং একবার আপনি কয়েকটি পরীক্ষা লেখার পরে এটি আপনার কাছে আসবে।

আমি বেশ কয়েকটি প্রকল্প দেখেছি যেখানে থাঙ্কসকে এমন আচরণ করা হয়েছে যেন তারা এমভিসি প্যাটেনের নিয়ন্ত্রণকারী এবং এটি দ্রুত একটি অকল্পনীয় জগাখিচুড়ি হয়ে যায়।

আমার পরামর্শ হ'ল সাগাসকে ব্যবহার করার যেখানে আপনার প্রয়োজন একটি ট্রিগার বি ধরণের জিনিস যা একটি ইভেন্ট সম্পর্কিত event বেশ কয়েকটি ক্রিয়াকলাপ কাটতে পারে এমন কোনও কিছুর জন্য, আমি গ্রাহক মিডলওয়্যার লিখতে এবং এটিকে ট্রিগার করতে কোনও এফএসএ ক্রিয়াকলাপের মেটা সম্পত্তি ব্যবহার করা সহজ বলে মনে করি।

Answer 6

থিংস বনাম সাগাস

Redux-Thunkএবং Redux-Sagaকয়েকটি গুরুত্বপূর্ণ উপায়ে পৃথক, উভয়ই হ'ল রেডাক্সের মিডলওয়্যার লাইব্রেরি (রেডাক্স মিডলওয়্যার কোড যা প্রেরণ () পদ্ধতির মাধ্যমে স্টোরের মধ্যে আসা ক্রিয়াকে বাধা দেয়)।

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

const loginRequest = {
    type: 'LOGIN_REQUEST',
    payload: {
        name: 'admin',
        password: '123',
    }, };

Redux-Thunk

স্ট্যান্ডার্ড ক্রিয়া প্রেরণ ছাড়াও, Redux-Thunkমিডলওয়্যার আপনাকে বিশেষ ফাংশন প্রেরণ করতে দেয়, যার নাম রয়েছে thunks।

থুনস (রেডাক্সে) সাধারণত নিম্নলিখিত কাঠামো থাকে:

export const thunkName =
   parameters =>
        (dispatch, getState) => {
            // Your application logic goes here
        };

অর্থাৎ, একটি thunkএমন একটি ফাংশন যা (allyচ্ছিকভাবে) কিছু পরামিতি নেয় এবং অন্য ফাংশনটি ফেরত দেয়। অভ্যন্তরীণ ফাংশনটি একটি dispatch functionএবং একটি ফাংশন নেয় getState- উভয়ই Redux-Thunkমিডওয়্যারের দ্বারা সরবরাহ করা হবে ।

Redux-সাগা

Redux-Sagaমিডলওয়্যার আপনাকে জটিল অ্যাপ্লিকেশন লজিককে সাগাস নামে খাঁটি ফাংশন হিসাবে প্রকাশ করতে দেয়। খাঁটি ফাংশনগুলি একটি পরীক্ষার দৃষ্টিকোণ থেকে আকাঙ্খিত কারণ তারা অনুমানযোগ্য এবং পুনরাবৃত্তিযোগ্য, যা তাদের পরীক্ষা করা তুলনামূলক সহজ করে তোলে।

সাগস জেনারেটর ফাংশন নামে বিশেষ ফাংশনের মাধ্যমে প্রয়োগ করা হয়। এগুলির একটি নতুন বৈশিষ্ট্য ES6 JavaScript। মূলত, কার্যকরভাবে যেখানেই আপনি উত্পাদ বিবরণ দেখেন জেনারেটরটি বাইরে চলে যায় execution yieldজেনারেটরকে বিরতি দেওয়া এবং উত্পন্ন মানটি ফিরিয়ে আনার কারণ হিসাবে একটি বিবৃতিটি ভাবেন । পরে, কলার নিম্নলিখিতটি অনুসরণ করে জেনারেটরটি পুনরায় শুরু করতে পারেন yield।

একটি জেনারেটর ফাংশন এর মত সংজ্ঞায়িত করা হয়। ফাংশন কীওয়ার্ডের পরে তারকাচিহ্নটি লক্ষ্য করুন।

function* mySaga() {
    // ...
}

লগইন সাগা একবার নিবন্ধিত হয় Redux-Saga। তবে yieldপ্রথমে লাইনটি গ্রহণের মাধ্যমে সাগাকে থামিয়ে দেবে যতক্ষণ না টাইপের সাথে কোনও ক্রিয়া 'LOGIN_REQUEST'দোকানে প্রেরণ করা হয়। এটি হয়ে গেলে, ফাঁসি কার্যকর হবে continue

আরও তথ্যের জন্য এই নিবন্ধটি দেখুন ।

Answer 7

একটি দ্রুত নোট। জেনারেটর বাতিল, অ্যাসিঙ্ক / অপেক্ষা - না - সুতরাং প্রশ্ন থেকে একটি উদাহরণস্বরূপ, এটি কি বাছাই করা সত্যিকার অর্থে তা বোঝায় না। তবে আরও জটিল প্রবাহের জন্য কখনও কখনও জেনারেটর ব্যবহারের চেয়ে ভাল সমাধান আর হয় না।

সুতরাং, অন্য ধারণাটি হ'ল রিডুক্স-থাঙ্কযুক্ত জেনারেটর ব্যবহার করা, তবে আমার কাছে মনে হয় বর্গাকার চাকা সহ একটি সাইকেল আবিষ্কার করার চেষ্টা করা হচ্ছে।

এবং অবশ্যই, জেনারেটরগুলি পরীক্ষা করা সহজ।

Answer 8

এখানে একটি প্রকল্প যা উভয়ের সেরা অংশগুলি (উপকারগুলি) একত্রিত করে redux-sagaএবং এটি সম্পর্কিত ক্রিয়াকলাপের redux-thunkমাধ্যমে প্রতিশ্রুতি পাওয়ার সময় আপনি সাগাসের সমস্ত পার্শ্ব প্রতিক্রিয়া পরিচালনা করতে পারেন dispatching: https://github.com/diegohaz/redux-saga-thunk

class MyComponent extends React.Component {
  componentWillMount() {
    // `doSomething` dispatches an action which is handled by some saga
    this.props.doSomething().then((detail) => {
      console.log('Yaay!', detail)
    }).catch((error) => {
      console.log('Oops!', error)
    })
  }
}

Comments

then()একটি প্রতিক্রিয়া উপাদান ভিতরে ব্যবহার করা দৃষ্টান্ত বিরুদ্ধে। componentDidUpdateসমাধানের প্রতিশ্রুতির অপেক্ষা না করে পরিবর্তিত রাষ্ট্রটি পরিচালনা করা উচিত ।

@ Maxincredible52 সার্ভার সাইড রেন্ডারিংয়ের ক্ষেত্রে এটি সত্য নয়।

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

আমার অভিজ্ঞতায় ম্যাক্সের পয়েন্টটি এখনও সার্ভার সাইড রেন্ডারিংয়ের জন্য সত্য। এটি সম্ভবত রাউটিং স্তরটির কোথাও পরিচালনা করা উচিত।

— থিংকিংইনবিটস

@ ম্যাক্সিনগ্রিডেবল ৫২ কেন এটি দৃষ্টান্তের বিরুদ্ধে, আপনি কোথায় পড়েছেন? আমি সাধারণত @ ডিগো হ্যাজের মতোই করি তবে এটি উপাদান ডিডমাউন্টে করি (প্রতিক্রিয়া ডক্স অনুসারে, নেটওয়ার্ক কলগুলি সেখানে করা উচিত) তবে আমাদের আছেcomponentDidlMount() { this.props.doSomething().then((detail) => { this.setState({isReady: true})} }

— ইউজার 3711421

Answer 9

একটি সহজ উপায় হ'ল রিডেক্স-অটো ব্যবহার করা ।

ডকুমেন্টেশন থেকে

রিডেক্স-অটো আপনাকে একটি প্রতিশ্রুতি ফেরত এমন একটি "অ্যাকশন" ফাংশন তৈরি করার অনুমতি দিয়ে এই অবিচ্ছিন্ন সমস্যাটি সমাধান করেছে। আপনার "ডিফল্ট" ফাংশন অ্যাকশন যুক্তি সহকারে।

1. অন্যান্য রেডাক্স অ্যাসিঙ্ক মিডওয়্যারের দরকার নেই। যেমন থাঙ্ক, প্রতিশ্রুতি-মিডলওয়্যার, সাগা
2. সহজেই আপনাকে কোনও প্রতিশ্রুতি রিডুএক্সে পাস করার অনুমতি দেয় এবং এটি আপনার জন্য পরিচালিত করে
3. আপনাকে বাহ্যিক পরিষেবা কলগুলি যেখানে তাদের রূপান্তরিত হবে সহ-অবস্থান করতে অনুমতি দেয়
4. "Init.js" ফাইলটির নামকরণ অ্যাপ্লিকেশন শুরু হওয়ার সাথে সাথে একবার কল করবে। এটি সার্ভার থেকে শুরু করে ডেটা লোড করার জন্য ভাল

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

এটি স্বয়ংক্রিয়ভাবে একটি সহায়ক অবজেক্টকে ("async" নামে পরিচিত) আপনার রাজ্যের প্রোটোটাইপের সাথে সংযুক্ত করে, আপনাকে আপনার ইউআইতে অনুরোধ করা ট্রানজিশনগুলি ট্র্যাক করার অনুমতি দেয়।

Comments

আমি +1 এমনকি এটি অপ্রাসঙ্গিক উত্তর তৈরি করেছি কারণ বিভিন্ন সমাধানগুলিও খুব বিবেচনা করা উচিত

— amorenew

আমি মনে করি সেখানে রয়েছে কারণ তিনি প্রকাশ করেন নি যে তিনি এই প্রকল্পের লেখক

— jreptak