জাভাস্ক্রিপ্ট - খাঁটি বনাম অশুদ্ধ ফাংশন

Question

আমি দু'জনের মতো সংজ্ঞা দিয়ে গিয়েছি:

খাঁটি ফাংশনগুলি এমন হয় যা তাদের ইনপুটগুলি পরিবর্তন করার চেষ্টা করে না এবং সর্বদা একই ফলাফলগুলির জন্য একই ফলাফলটি ফেরত দেয়।

উদাহরণ

function sum(a, b) {
  return a + b;
}

এবং অপরিষ্কার ফাংশন হ'ল এটির নিজস্ব ইনপুট পরিবর্তন করে।

উদাহরণ

function withdraw(account, amount) {
  account.total -= amount;
}

ReactJs অফিসিয়াল ডক্স থেকে নেওয়া সংজ্ঞা এবং কোড স্নিপেট ।

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

Comments

অপবিত্র ফাংশনগুলির পার্শ্ব প্রতিক্রিয়া রয়েছে। window.getElementByIdইত্যাদির মতো কিছু তাই একই পরামিতিগুলির সাথে একই ফাংশনটি চালানো পার্শ্ব প্রতিক্রিয়াগুলির উপর নির্ভর করে বিভিন্ন ফলাফল পেতে পারে। হ'ল রিডাক্স ব্যর্থ হবে।

— ডোমিনিক

Answer 1

প্রতিক্রিয়াশীল Reduxফ্যাশনে চলার জন্য প্রতিক্রিয়াশীল এবং দুজনেরই অপরিবর্তনীয়তার সাথে খাঁটি ফাংশন প্রয়োজন।

আপনি যদি এই দুটি জিনিস অনুসরণ না করেন তবে আপনার অ্যাপ্লিকেশনগুলিতে বাগ রয়েছে যা React/Reduxআপনার state/propপরিবর্তনগুলির পরিবর্তে ট্র্যাক করতে সক্ষম না হয়ে এবং পুনরায় রেন্ডার করতে অক্ষম ।

প্রতিক্রিয়া হিসাবে, নিম্নলিখিত উদাহরণ বিবেচনা করুন:

let state = {
    add: 0,
}

function render() {
    //...
}
//pure function
function effects(state,action) {
//following immutability while updating state, not directly mutating the state.
    if(action == 'addTen') {
        return {...state, add: state.add + 10} 
    }
    return state;
}

function shouldUpdate(s) {
    if(s === state){
        return false
    }
    return true
}

state = effects(state, 'addTen')if(shouldUpdate(state)) {
    render();
}

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

এর মতো, আমাদের একটি প্রভাব ফাংশন রয়েছে, pure functionযা আমরা আমাদের রাজ্যকে প্রভাবিত করতে ব্যবহার করি। আপনি দেখতে পাচ্ছেন যে রাষ্ট্রটি পরিবর্তন করতে হবে যখন এটি একটি নতুন রাজ্যে ফিরে আসে এবং যখন কোনও পরিবর্তন প্রয়োজন হয় না তখন একই রাষ্ট্রটি প্রদান করে।

আমাদের একটি shouldUpdateফাংশন রয়েছে যা === অপারেটরটি ব্যবহার করে যাচাই করে তা পুরাতন রাষ্ট্র এবং নতুন রাজ্য একই কিনা।

প্রতিক্রিয়া শর্তাবলী ভুল করতে, আপনি আসলে নিম্নলিখিত করতে পারেন:

function effects(state,action) {

  doRandom(); // effects should only be called for updating state.
             // Doing any other stuff here would make effects impure.

    if(action == 'addTen') {
        return {...state, add: state.add + 10}
    }
    return state;
}

আপনি সরাসরি রাষ্ট্র সেট করে এবং effectsফাংশনটি ব্যবহার না করেও ভুল করতে পারেন ।

function doMistake(newValue) {
    this.state = newValue
}

উপরের কাজটি করা উচিত নয় এবং কেবলমাত্র effectsফাংশনটি রাষ্ট্র আপডেট করতে ব্যবহার করা উচিত।

প্রতিক্রিয়া effectsহিসাবে , আমরা হিসাবে কল setState।

রেডাক্সের জন্য:

1. রেডাক্সের combineReducersইউটিলিটি রেফারেন্স পরিবর্তনের জন্য পরীক্ষা করে।
2. রিঅ্যাক্ট-রেডাক্সের connectপদ্ধতিটি এমন উপাদানগুলি উত্পন্ন করে যা মূল অবস্থা এবং mapStateফাংশন থেকে রিটার্ন মান উভয়ের জন্য রেফারেন্স পরিবর্তনগুলি পরীক্ষা করে দেখে বোঝায় যে মোড়ানো উপাদানটি আসলে পুনরায় রেন্ডার করা দরকার।
3. সময়-ভ্রমণের ডিবাগিংয়ের দরকার হয় যে হ্রাসকারী pure functionsকোনও পার্শ্ব প্রতিক্রিয়া না করে যাতে আপনি বিভিন্ন রাজ্যের মধ্যে সঠিকভাবে লাফিয়ে উঠতে পারেন।

আপনি হ্রাসকারী হিসাবে অপরিষ্কার ফাংশন ব্যবহার করে উপরের তিনটি সহজেই লঙ্ঘন করতে পারেন।

নীচে সরাসরি রিডেক্স ডক্স থেকে নেওয়া হয়:

একে রিডুসার বলা হয় কারণ এটি আপনার ধরণের ফাংশনটি কেটে দেবে Array.prototype.reduce(reducer, ?initialValue)।
এটি খুব গুরুত্বপূর্ণ যে হ্রাসকারী খাঁটি থাকে। রিডিউসারের অভ্যন্তরে আপনার যে জিনিসগুলি করা উচিত নয়:

Mutate its arguments;
Perform side effects like API calls and routing transitions;
Call non-pure functions, e.g. Date.now() or Math.random().

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

Answer 2

সরলভাবে বলেছিলেন রাজ্যকে পরিবর্তন করা যাবে না। প্রতিবার যখনই পরিবর্তন হয় তখন রাজ্যের একটি নতুন উদাহরণ ফেরত দেওয়া উচিত

এই কোডটি সঠিক নয়:

const initialStates = {    
  items: ['item1']
}

export const ItemMaster = (state = initialStates, action) => {    
  switch (action.type) {
    case TYPES.ADD_ITEM:            
    {
        state.items.push(action.item)
        return state
    }
    default:
      return state
  }
}

এই কোডটি যখন নিচে খাঁটি ফাংশন হিসাবে লেখা হয়, এটি অ্যারের একটি নতুন উদাহরণ দেয় এটি প্রকৃত অ্যারে নিজেই পরিবর্তন করে না। এই কারণেই অপরিবর্তনীয়তা পরিচালনা করার জন্য আপনার ইমরারের মতো একটি লাইব্রেরি ব্যবহার করা উচিত

const initialStates = { 
  items: ['item1']
}

export const ItemMaster = (state = initialStates, action) => {    
  switch (action.type) {
    case TYPES.ADD_ITEM:            
    {

        state = {...state,items:state.items.concat(action.item)}
        return state
    }
    default:
      return state
  }
}

Answer 3

আপনি এপিআই কল যুক্ত করতে বা কোডগুলি লিখে পার্শ্ব প্রতিক্রিয়া তৈরি করে খাঁটি ফাংশন অশুচি করতে পারেন।

খাঁটি ফাংশনগুলি সর্বদা পয়েন্ট এবং স্ব-ব্যাখ্যামূলক হওয়া উচিত এবং কী চলছে তা বোঝার জন্য আপনার 3 বা 4 অন্যান্য ফাংশন উল্লেখ করার দরকার নেই।

// Pure Function
function USDtoEUR(USD, todayRate) {
  return USD * todayRate;
}

// Impure Function 
function USDtoEUR(USD) {
  const todayRate = getTodayRate();
  return USD * todayRate;
}

প্রতিক্রিয়া / Redux ক্ষেত্রে

const mapState = async state => {
  const { data } = await whatDoINeed()

  let mappedState = {}

  if (data.needDolphin) {
    mappedState.dolphin = state.dolphin
  }

  if (data.needShark) {
    mappedState.shark= state.shark
  }

  return mappedState;
}

// Or for Redux Reducer
// Bad
{
  setData: (state, payload) => {
   const set = whatToSet()
   return {
     ...state,
     set.dolphin ? ...{ dolphin: payload.dolphin } : ...{},
     set.shark ? ...{ shark : payload.shark } : ...{},
   }
  }
}

// Good
{
  setData: (state, payload) => {
   return {
     ...state,
     // Just send only the things need
     // to be sent
     ...payload
   }
  }
}

এটি করা উচিত নয় । একটি সংযুক্ত ফাংশন বা রিডুসার ফাংশনটির যাবতীয় জিনিস অবশ্যই যুক্তির মাধ্যমে সরবরাহ করা উচিত বা তার ফাংশনটির মধ্যে লিখিত। এটি কখনই বাইরে থেকে আসা উচিত নয়।