Scaling Up with Reducer and Context

Context এর সাথে reducer এর সংযুক্তি

Reducers এর সাথে পরিচিতি এই উদাহরণে, state কে reducer ব্যবস্থাপনা করেছে। Reducer ফাংশনটি সকল state হালানাগাদ যুক্তিসমূহ ধারন করে এবং একে ফাইলের একদম শেষে ডিক্লেয়ার করা হয়।

একটি Reducer ইভেন্ট হ্যান্ডলারগুলি ছোট এবং সংক্ষিপ্ত রাখতে সাহায্য করে । তবে, আপনার অ্যাপ্লিকেশন বড় হতে শুরু করলে, আপনি আরও একটি সমস্যায় পড়ে যেতে পারেন । বর্তমানে, tasks state এবং dispatch ফাংশনটি শুধুমাত্র শীর্ষ-স্তরের TaskApp কম্পোনেন্টে পাওয়া যাচ্ছে। অন্য কম্পোনেন্টকে টাস্কের তালিকা পড়তে অথবা তা পরিবর্তন করতে দিতে হলে, আপনাকে বর্তমান state এবং তা পরিবর্তন করার ইভেন্ট হ্যান্ডলার explicit ভাবে props হিসেবে পাঠাতে হবে।

উদাহরণস্বরূপ, TaskApp টাস্কের তালিকা এবং ইভেন্ট হ্যান্ডলার TaskList এ পাঠিয়ে দেয়:

<TaskList
  tasks={tasks}
  onChangeTask={handleChangeTask}
  onDeleteTask={handleDeleteTask}
/>

এবং TaskList ইভেন্ট হ্যান্ডলারকে Task এ পাঠিয়ে দেয়ঃ

<Task
  task={task}
  onChange={onChangeTask}
  onDelete={onDeleteTask}
/>

একটি ছোট উদাহরণে এটি ভালো কাজ করে, কিন্তু যদি এর মাঝে আপনার দশ বা শতাধিক কম্পোনেন্ট থাকে, তাহলে সকল state এবং ফাংশনকে পাঠানো অনেক বিরক্তিকর হতে পারে।

এই কারণে, props এর মাধমে পাঠানোর বিকল্প হিসেবে, আপনি সমস্ত tasks স্টেট এবং dispatch ফাংশনকে context এর মধ্যে রাখতে পারেন। এইভাবে, TaskApp এর নীচে যেকোনো কম্পোনেন্ট রুটে আপনি “prop drilling” এর পুনরাবৃত্তি ছাড়াই task পড়তে এবং একশনকে dispatch করতে পারবেন ।

যেভাবে আপনি reducer এবং context এর সংযুক্তি করতে পারেনঃ

1. Context তৈরি করুন।
2. state এবং dispatch কে Context এর ভেতরে রাখুন।
3. Context কে যেকোনো কম্পোনেন্ট রুটে ব্যবহার করুন।

ধাপ ১: Context তৈরি করুন

useReducer হুক আপনাকে বর্তমান tasks এবং তা আপডেট করার জন্য dispatch ফাংশনকে রিটার্ন করে।

const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

তাদেরকে ট্রি-এর নিচে পাঠানোর জন্য আপনি দুটি ভিন্ন context তৈরি করবেন ।

• TasksContext বর্তমান tasks তালিকা প্রদান করে।
• TasksDispatchContext একটি ফাংশন প্রদান করে যা কম্পোনেন্টকে একশন dispatch করতে দেয়।

এদেরকে একটি আলাদা ফাইলে এক্সপোর্ট করুন যাতে আপনি পরবর্তীতে অন্য ফাইলে ইম্পোর্ট করতে পারেন:

এখানে আপনি null কে ডিফল্ট ভ্যালু হিসেবে দুটি context এ পাঠাচ্ছেন। আসল মানগুলি TaskApp এর মাধ্যমে সরাসরি প্রদান হবে।

ধাপ ২: State এবং dispatch কে context এর ভেতরে রাখুন

এখন আপনি দুটো context কে TaskApp কম্পোনেন্টে ইম্পোর্ট করতে পারেন। useReducer() এর রিটার্ন করা tasks এবং dispatch কে গ্রহণ করুন এবং এদেরকে নিচের সম্পূর্ন ট্রিতে প্রদান করুন:

import { TasksContext, TasksDispatchContext } from './TasksContext.js';

export default function TaskApp() {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
  // ...
  return (
    <TasksContext.Provider value={tasks}>
      <TasksDispatchContext.Provider value={dispatch}>
        ...
      </TasksDispatchContext.Provider>
    </TasksContext.Provider>
  );
}

এখন, আপনি তথ্যকে props এবং context উভয়ের মাধ্যমে পাঠাতে পারবেনঃ

পরবর্তী ধাপে, আপনি prop পাঠানো মুছে ফেলবেন।

ধাপ ৩: ট্রি এর যেকোনো জায়গায় context ব্যবহার করুন

এখন আপনাকে আর task এর তালিকা অথবা event handlers কে ট্রি এর নিচে পাঠাতে হবেনা:

<TasksContext.Provider value={tasks}>
  <TasksDispatchContext.Provider value={dispatch}>
    <h1>Day off in Kyoto</h1>
    <AddTask />
    <TaskList />
  </TasksDispatchContext.Provider>
</TasksContext.Provider>

এর পরিবর্তে যেকোনো কম্পোনেন্ট যার task তালিকা দরকার হবে সে তা TaskContext থেকে পড়তে পারবে।

export default function TaskList() {
  const tasks = useContext(TasksContext);
  // ...

Task তালিকা হালনাগাদ করার জন্য যেকোনো কম্পোনেন্ট dispatch ফাংশনকে context থেকে পড়তে পারেন এবং call করতে পারেন।

export default function AddTask() {
  const [text, setText] = useState('');
  const dispatch = useContext(TasksDispatchContext);
  // ...
  return (
    // ...
    <button onClick={() => {
      setText('');
      dispatch({
        type: 'added',
        id: nextId++,
        text: text,
      });
    }}>Add</button>
    // ...

TaskApp কম্পোনেন্ট কোনো event handlers কে নিচে পাঠায় না এবং TaskList কোনো event handlers কে Task কম্পোনেন্টেও পাঠায় না। প্রতিটা কম্পোনেন্ট তার প্রয়োজনীয় context কে পড়েঃ

State টি এখনো টপ-লেভেল TaskApp কম্পোনেন্টেই অবস্থান করছে, useReducer এর ব্যবস্থাপনায়। কিন্তু এর tasks এবং dispatch এখন ট্রিয়ের নিচের প্রতিটি কম্পোনেন্ট পাওয়া যাবে ইম্পোর্টিং এবং এই context কে ব্যবহারের মাধ্যমে।

সকল সংযোগসমূহকে একটি ফাইলে সরানো

আপনার এটি করার দরকার নেই, কিন্তু আপনি কম্পোনেন্টকে আরো সাজানোর জন্য reducer এবং context উভয়কেই একটি ফাইলে সরিয়ে নিতে পারেন। বর্তমানে, TaskContext.js এ কেবল দুটি context ডিক্লেয়ারেশন রয়েছেঃ

import { createContext } from 'react';

export const TasksContext = createContext(null);
export const TasksDispatchContext = createContext(null);

এই ফাইলটিতে এখন জটলা বেঁধে যাবে! আপনি reducer কে একই ফাইলে সরাবেন। এরপর আপনি একটি নতুন TaskProvider কম্পোনেন্ট একই ফাইলে ডিক্লেয়ার করবেন। এই কম্পোনেন্ট সকল অংশকে একীভূত করবে।

1. এটি state কে reducer দিয়ে পরিচালনা করবে।
2. এটি উভয় context কে নিচের কম্পোনেন্টে পাঠাবে।
3. এটি children কে prop হিসেবে নেয় যাতে আপনি এতে JSX পাঠাতে পারেন।

export function TasksProvider({ children }) {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

  return (
    <TasksContext.Provider value={tasks}>
      <TasksDispatchContext.Provider value={dispatch}>
        {children}
      </TasksDispatchContext.Provider>
    </TasksContext.Provider>
  );
}

এটি আপনার TaskApp থেকে সকল জটিলতা এবং সংযোগকে সরিয়ে দেয়:

আপনি ফাংশন এক্সপোর্টও করতে পারেন যেটা TasksContext.js এর context কে ব্যবহার করেন ঃ

export function useTasks() {
  return useContext(TasksContext);
}

export function useTasksDispatch() {
  return useContext(TasksDispatchContext);
}

যখন একটি কম্পোনেন্ট এর context পড়ার প্রয়োজন হয়, এটি ফাংশনের মাধ্যমে তা করতে পারে ঃ

const tasks = useTasks();
const dispatch = useTasksDispatch();

এটি আচরণকে কোনোভাবেই পরিবর্তন করেনা, কিন্তু এটি আপনাকে পরবর্তীতে এই ফাংশনে context কে ভাগ করতে দেয় অথবা কিছু যুক্তি যোগ করতে দেয়। এখন সকল context এবং reducer সংযোগসমূহ TasksContext.js এ আছে। এটি কম্পোনেন্টকে পরিচ্ছন্ন এবং গোছানো রাখে, কোথায় থেকে ডেটা পাচ্ছে তা নয় বরং তারা কি প্রদর্শন করে তাতে মনোযোগ দেয়ঃ

আপনি TasksProvider কে স্ক্রীন এর একটি অংশ হিসেবে চিন্তা করতে পারেন যে জানে কিভাবে tasks এর সাথে আচরন করতে হয়, useTasks এদেরকে পড়ার একটি উপায় এবং useDispatch তাদেরকে ট্রি এর নিচের যেকোন কম্পোনেন্ট থেকে আপডেট করার একটি উপায়।

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