Reducer এবং Context দিয়ে Scaling Up

reducer ফাংশন আমাদের কম্পোনেন্টের জটিল স্টেট লজিকগুলোকে একটি কেন্দ্রীয় স্থানে ম্যানেজ করার সুবিধা দেয়। এটি স্টেট পরিবর্তনের জন্য একটি নির্দিষ্ট পদ্ধতি নির্ধারণ করে। অন্যদিকে, Context আমাদের props drilling ছাড়াই ডাটা শেয়ার করার সুযোগ দেয়। যখন আমরা reducer এবং Context একত্রে ব্যবহার করি, তখন জটিল কম্পোনেন্টগুলোকে অনেক সহজ এবং সুন্দরভাবে তৈরি করা সম্ভব হয়।

Reducer এবং Context একত্রে ব্যবহার করা

আমরা তিনটি ধাপে Context এবং Reducer একত্রে ব্যবহার করতে পারি, যা আমাদের যেকোনো কম্পোনেন্টে ডাটা পাস করতে সাহায্য করবে।

1. Context তৈরি করা।
2. একটি Reducer তৈরি করা এবং Provider এর মাধ্যমে state এবং dispatch প্রদান করা।
3. কম্পোনেন্ট ট্রির যেকোনো স্থানে context ব্যবহার করা।

import { createContext } from "react";
const CounterContext = createContext(0);
export default CounterContext;

 import React, { useReducer } from 'react';
 import Counter from "./Counter";
 import counterReducer from "./CounterReducer.js";
 import CounterContext from "./CounterContext.js";
 
 const App = () => {
     const initialState = 0;
     const [count, dispatch] = useReducer(counterReducer, initialState);
     return (
         <div>
             <CounterContext.Provider value={{ count, dispatch }}>
                 <Counter />
             </CounterContext.Provider>
         </div>
     );
 }
 
 export default App;

 
        import { useContext } from "react";
        import CounterContext from "./CounterContext.js";
 
        export default function Counter() {
            const { count, dispatch } = useContext(CounterContext);
            return (
                <div>
                    <h1>Count: {count}</h1>
                    <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
                    <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
                </div>
            );
        }

সব কিছুকে একটি ফাইলে স্থানান্তরিত করা - একটি ভালো পদ্ধতি

এখন আমরা আরেকটি সুন্দর পদ্ধতিতে Reducer এর সাথে Context ব্যবহার করবো। আমরা আমাদের Context সম্পর্কিত সমস্ত কাজকে একটি আলাদা ফাইলে রাখতে পারি এবং সেখান থেকেই স্টেটগুলোও ম্যানেজ করতে পারি।

 
       import React from 'react';
       import Counter from "./Counter";
       import CounterProvider from "./CounterProvider";
 
       const App = () => {
        return (
            <div>
                <CounterProvider>
                    <Counter />
                </CounterProvider>
            </div>
        );
    }
 
    export default App;

এভাবে আমাদের মেইন প্যারেন্ট কম্পোনেন্ট থেকে সমস্ত কিছু সরিয়ে নিয়ে আমরা একটি আলাদা ফাইলে ম্যানেজ করতে পারি।

এছাড়াও, আমরা Context কে বার বার কল না করে একটি আলাদা কাস্টম হুক বানিয়ে নিতে পারি, যা আমাদের কোডের পুনরাবৃত্তি কমাতে সাহায্য করবে।

    import React from 'react';
    import Counter from "./Counter";
    import CounterProvider from "./CounterProvider";
 
    const App = () => {
        return (
            <div>
                <CounterProvider>
                    <Counter />
                </CounterProvider>
            </div>
        );
    }
 
    export default App;

এখন আমরা useCounter হুক ব্যবহার করে যেকোনো কম্পোনেন্টে সেই কনটেক্সটের ডেটা এক্সেস করতে পারি।

অন্য যেকোনো কম্পোনেন্ট থেকে কনটেক্সট ব্যবহার করা

এখন যে কোন কম্পোনেন্টে আমরা useCounter ব্যবহার করে ডেটা নিয়ে আসতে পারি।

import React from "react";
import useCounter from "./useCounter.js";
 
const SomeComponent = () => {
  const { count, dispatch } = useCounter();
  return (
    <div>
      <h1>Count from SomeComponent: {count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
    </div>
  );
};
 
export default SomeComponent;

এখন, Counter কম্পোনেন্টের পরিবর্তে, আমরা useCounter হুক ব্যবহার করতে পারি, যা আমাদের কোড আরও পরিষ্কার এবং কার্যকর করবে।