বোঝা, এবং মধ্যে Redux Store Actions Reducers React

একটি Redux-চালিত অ্যাপ্লিকেশনে, আর্কিটেকচারটি তিনটি প্রধান ধারণার চারপাশে ঘোরে: Redux store, actions, এবং reducers. আসুন এই প্রতিটি ধারণার গভীরে অনুসন্ধান করি এবং দেখুন কিভাবে তারা একসাথে কাজ করে।

Redux Store

Redux store হল সত্যের একটি একক উৎস যা আপনার আবেদনের সম্পূর্ণ অবস্থা ধারণ করে। এটি মূলত একটি জাভাস্ক্রিপ্ট অবজেক্ট যা সমগ্র অ্যাপ্লিকেশন অবস্থার প্রতিনিধিত্বকারী ডেটা ধারণ করে। আপনি Redux লাইব্রেরি থেকে ফাংশন store ব্যবহার করে তৈরি করুন। createStore

Actions

Actions প্লেইন জাভাস্ক্রিপ্ট অবজেক্ট যা অ্যাপ্লিকেশনে ঘটে যাওয়া কিছু বর্ণনা করে। তারা একটি type ক্ষেত্র বহন করে যা সঞ্চালিত কর্মের ধরন নির্দেশ করে এবং অতিরিক্ত ডেটাও অন্তর্ভুক্ত করা যেতে পারে। Actions অ্যাকশন ক্রিয়েটর ব্যবহার করে তৈরি করা হয়, যা এমন ফাংশন যা অ্যাকশন অবজেক্ট ফেরত দেয়। উদাহরণ স্বরূপ:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers এর প্রতিক্রিয়ায় অ্যাপ্লিকেশনটির অবস্থা কীভাবে পরিবর্তিত হয় তা নির্দিষ্ট করুন actions । একটি হ্রাসকারী একটি বিশুদ্ধ ফাংশন যা বর্তমান অবস্থা এবং একটি ক্রিয়াকে আর্গুমেন্ট হিসাবে গ্রহণ করে এবং একটি নতুন অবস্থা প্রদান করে। Reducers ফাংশন ব্যবহার করে একটি একক রুট রিডুসারে একত্রিত করা হয় combineReducers । এখানে একটি সহজ উদাহরণ:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

একসাথে কাজকরা

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

উদাহরণ দৃশ্যকল্প

একটি করণীয় তালিকা অ্যাপ্লিকেশন কল্পনা করুন. ADD_TODO যখন একজন ব্যবহারকারী একটি নতুন টোডো যোগ করেন, তখন একটি ক্রিয়া পেলোড হিসাবে টোডোর প্রকার এবং পাঠ্য সহ প্রেরণ করা হয় । টোডোস রিডুসার এই ক্রিয়াটি গ্রহণ করে, রাজ্যে নতুন টোডো যোগ করে এবং আপডেট করা অবস্থা ফিরিয়ে দেয়।

উপসংহার

কিভাবে Redux store, actions, এবং reducers ইন্টারঅ্যাক্ট করে তা বোঝা কার্যকর রাষ্ট্র পরিচালনার জন্য অত্যন্ত গুরুত্বপূর্ণ। এই স্থাপত্যটি উদ্বেগের একটি পরিষ্কার বিচ্ছেদ নিশ্চিত করে এবং জটিল অ্যাপ্লিকেশন অবস্থাগুলি পরিচালনা করা সহজ করে তোলে। আপনি Redux এর সাথে বিকাশ চালিয়ে যাওয়ার সাথে সাথে এই ধারণাগুলি আপনার রাষ্ট্র পরিচালনার কৌশলের ভিত্তি তৈরি করবে।