fix: ✨ update colons

Author: habibium

src/content/learn/extracting-state-logic-into-a-reducer.md

@@ -19,7 +19,7 @@ title: State Logic কে একটি Reducer এ স্থানান্ত
 
 ## State logic কে একটি reducer এ একত্র করুন {/*consolidate-state-logic-with-a-reducer*/}
 
-ধীরে ধীরে যখন আপনার কম্পোনেন্টগুলোর জটিলতা বাড়তে থাকে, তখন এক নজর দেখে এটা বোঝা কঠিন হয়ে যেতে পারে যে কতোনা উপায়ে একটা কম্পোনেন্টের state আপডেট হতে পারে। উদাহরণস্বরূপ, নিচের `TaskApp` কম্পোনেন্টটি `tasks` নামক array কে state হিসেবে ধারণ করে, আর কোনো task কে add, edit, remove করার জন্য তিনটি ভিন্ন ভিন্ন event handler এর ব্যবহার করে:
+ধীরে ধীরে যখন আপনার কম্পোনেন্টগুলোর জটিলতা বাড়তে থাকে, তখন এক নজর দেখে এটা বোঝা কঠিন হয়ে যেতে পারে যে কতোনা উপায়ে একটা কম্পোনেন্টের state আপডেট হতে পারে। উদাহরণস্বরূপ, নিচের `TaskApp` কম্পোনেন্টটি `tasks` নামক array কে state হিসেবে ধারণ করে, আর কোনো task কে add, edit, remove করার জন্য তিনটি ভিন্ন ভিন্ন event handler এর ব্যবহার করেঃ
 
 <Sandpack>
 
@@ -181,15 +181,15 @@ li {
 
 এর প্রতিটি event handler state কে আপডেট করার জন্য `setTasks` কে call করে। ধীরে ধীরে যখন এ কম্পোনেন্টটি আকারে বাড়তে থাকবে, তখন সাথে সাথে এর ভিতরকার state logic ও বাড়তে থাকবে এবং জটিলতর হতে থাকবে। এই জটিলতা কমাতে এবং আপনার সব state logic একটি সহজে-পাওয়া-যায় এমন জায়গায় রাখতে, আপনি ঐসব state logic কে আপনার কম্পোনেন্টের বাইরে একটি function এ স্থানান্তর করতে পারেন, যে function টিকে বলা হয় **"reducer".**
 
-Reducer হলো state হ্যান্ডেল করার একটি বিকল্প পদ্ধতি। আপনি `useState` থেকে `useReducer` এ তিনটি ধাপে স্থানান্তর করতে পারেন:
+Reducer হলো state হ্যান্ডেল করার একটি বিকল্প পদ্ধতি। আপনি `useState` থেকে `useReducer` এ তিনটি ধাপে স্থানান্তর করতে পারেনঃ
 
 1. state কে set করার বদলে action কে **dispatch করতে শুরু করুন**।
 2. একটি reducer function **লিখুন**।
 3. reducer টিকে আপনার কম্পোনেন্ট থেকে **ইউজ করুন**।
 
-### ধাপ ১: State কে set করার বদলে action কে dispatch করতে শুরু করুন {/*step-1-move-from-setting-state-to-dispatching-actions*/}
+### ধাপ ১ঃ State কে set করার বদলে action কে dispatch করতে শুরু করুন {/*step-1-move-from-setting-state-to-dispatching-actions*/}
 
-State কে set করার মাধ্যমে আপনার event handler গুলো বর্তমানে নির্ধারণ করছে যে কী করতে হবে:
+State কে set করার মাধ্যমে আপনার event handler গুলো বর্তমানে নির্ধারণ করছে যে কী করতে হবেঃ
 
 ```js
 function handleAddTask(text) {
@@ -220,7 +220,7 @@ function handleDeleteTask(taskId) {
 }
 ```
 
-এখন সব state সেট করার logic দূর করে দিন। এখন আপনার কাছে যা বাকি থাকবে তা হলো:
+এখন সব state সেট করার logic দূর করে দিন। এখন আপনার কাছে যা বাকি থাকবে তা হলোঃ
 
 - ইউজার যখন "Add" প্রেস করে তখন call করা হয় `handleAddTask(text)`।
 - ইউজার যখন "Save" প্রেস করে কিংবা কোনো task কে toggle (বা edit) করে তখন call করা হয় `handleChangeTask(task)`।
@@ -252,7 +252,7 @@ function handleDeleteTask(taskId) {
 }
 ```
 
-আপনি `dispatch` এর কাছে যে object টি pass করেন, তাকে একটি "action" বলে:
+আপনি `dispatch` এর কাছে যে object টি pass করেন, তাকে একটি "action" বলেঃ
 
 ```js {3-7}
 function handleDeleteTask(taskId) {
@@ -284,7 +284,7 @@ dispatch({
 
 </Note>
 
-### ধাপ ২: একটি reducer function লিখুন {/*step-2-write-a-reducer-function*/}
+### ধাপ ২ঃ একটি reducer function লিখুন {/*step-2-write-a-reducer-function*/}
 
 একটি reducer function হলো যেখানে আপনি আপনার state লজিক রাখবেন। এটি দুটি argument নেয়, বর্তমান state এবং action অবজেক্ট, অতঃপর এটি পরবর্তী state কে return করেঃ
 
@@ -296,7 +296,7 @@ function yourReducer(state, action) {
 
 আপনি reducer থেকে যা return করবেন, React সেটিকে state হিসেবে সেট করে দিবে। 
 
-এই উদাহরণে, state সেট করার লজিককে event handlers থেকে একটি reducer function এ সরাতে, আপনার:
+এই উদাহরণে, state সেট করার লজিককে event handlers থেকে একটি reducer function এ সরাতে, আপনারঃ
 
 1. বর্তমান state (`tasks`) কে প্রথম argument হিসেবে declare করতে হবে।
 2. `action` অবজেক্টকে দ্বিতীয় argument হিসেবে declare করতে হবে।
@@ -337,7 +337,7 @@ function tasksReducer(tasks, action) {
 
 উপরের কোডে if/else স্টেটমেন্ট ব্যবহৃত হয়েছে, কিন্তু reducer এর ভিতর [switch স্টেটমেন্ট](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/switch) ব্যাবহার করাটা প্রচলিত। ফলাফল একই থাকবে, কিন্তু switch স্টেটমেন্ট একনজরে পরাটা আরো সহজতর।
 
-আমরা ডকুমেন্টেশনের বাকী অংশ জুড়ে এই প্রচলন অনুসারেই চালিয়ে যাবো:
+আমরা ডকুমেন্টেশনের বাকী অংশ জুড়ে এই প্রচলন অনুসারেই চালিয়ে যাবোঃ
 
 ```js
 function tasksReducer(tasks, action) {
@@ -383,7 +383,7 @@ function tasksReducer(tasks, action) {
 
 যদিও reducer আপনার কম্পোনেন্টের ভিতরে কোডের পরিমাণ কমাতে পারে, কিন্তু reducer নাম দেয়ার পিছনে আসল রহস্য হচ্ছে [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) অপারেশন, যেটি আপনি array এর উপর প্রয়োগ করতে পারেন।
 
-`reduce()` অপারেশনটি আপনাকে একটি array এর একাধিক ভ্যালুকে "একত্র করে" একটি ভ্যালুতে নিয়ে আনার ক্ষমতা দেয়:
+`reduce()` অপারেশনটি আপনাকে একটি array এর একাধিক ভ্যালুকে "একত্র করে" একটি ভ্যালুতে নিয়ে আনার ক্ষমতা দেয়ঃ
 
 ```
 const arr = [1, 2, 3, 4, 5];
@@ -392,9 +392,9 @@ const sum = arr.reduce(
 ); // 1 + 2 + 3 + 4 + 5
 ```
 
-`reduce` কে আপনি যে ফাংশনটি পাস করেন তাকে বলা হয় "reducer"। এটা গ্রহণ করে _এখন অবধি রেজাল্ট_ এবং _বর্তমান item,_ তারপর এটা return করে _পরবর্তী রেজাল্ট।_  React reducer ও এর অনুরূপ: গ্রহণ করে _এখন অবধি state_ এবং _action_, এবং return করে _পরবর্তী state।_ এমন করে, সময়ের সাথে সেটি action সমূহকে কে state হিসেবে একত্র করে।
+`reduce` কে আপনি যে ফাংশনটি পাস করেন তাকে বলা হয় "reducer"। এটা গ্রহণ করে _এখন অবধি রেজাল্ট_ এবং _বর্তমান item,_ তারপর এটা return করে _পরবর্তী রেজাল্ট।_  React reducer ও এর অনুরূপঃ গ্রহণ করে _এখন অবধি state_ এবং _action_, এবং return করে _পরবর্তী state।_ এমন করে, সময়ের সাথে সেটি action সমূহকে কে state হিসেবে একত্র করে।
 
-এমনকি আপনি `reduce()` মেথডটি দিয়েও একটি `initialState` এবং একটি `actions` এর array থেকে সর্বশেষ state বের করতে পারবেন, তার জন্য মেথডটিকে আপনার reducer ফাংশনটি পাস করতে হবে:
+এমনকি আপনি `reduce()` মেথডটি দিয়েও একটি `initialState` এবং একটি `actions` এর array থেকে সর্বশেষ state বের করতে পারবেন, তার জন্য মেথডটিকে আপনার reducer ফাংশনটি পাস করতে হবেঃ
 
 <Sandpack>
 
@@ -457,39 +457,39 @@ export default function tasksReducer(tasks, action) {
 
 </DeepDive>
 
-### ধাপ ৩: আপনার কম্পোনেন্টে reducer টি ব্যাবহার করুন {/*step-3-use-the-reducer-from-your-component*/}
+### ধাপ ৩ঃ আপনার কম্পোনেন্টে reducer টি ব্যাবহার করুন {/*step-3-use-the-reducer-from-your-component*/}
 
-সবশেষে, আপনার `tasksReducer` টিকে আপনার কম্পোনেন্টের সাথে সংযুক্ত করে দিতে হবে। React থেকে `useReducer` হুকটি import করুন:
+সবশেষে, আপনার `tasksReducer` টিকে আপনার কম্পোনেন্টের সাথে সংযুক্ত করে দিতে হবে। React থেকে `useReducer` হুকটি import করুনঃ
 
 ```js
 import { useReducer } from 'react';
 ```
 
-অতঃপর আপনি `useState` কে সরিয়ে দিতে পারেন:
+অতঃপর আপনি `useState` কে সরিয়ে দিতে পারেনঃ
 
 ```js
 const [tasks, setTasks] = useState(initialTasks);
 ```
 
-`useReducer` দিয়ে, ঠিক এভাবে:
+`useReducer` দিয়ে, ঠিক এভাবেঃ
 
 ```js
 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 ```
 
 `useReducer` হুকটি অনেকটা `useState` মতো—আপনার অবশ্যই একে একটি initial state (স্টেটের প্রাথমিক ভ্যালু) পাস করতে হবে আর এটি return করে state এর ভ্যালু এবং state কে সেট করার একটি পদ্ধতি (এক্ষেত্রে, dispatch ফাংশন)। কিন্তু এটি (`useState` থেকে) একটু আলাদা।
 
-`useReducer` হুকটি দুটি argument নেয়:
+`useReducer` হুকটি দুটি argument নেয়ঃ
 
 1. একটি reducer function
 2. একটি initial state
 
-আর এটি return করে:
+আর এটি return করেঃ
 
 1. একটি state ভ্যালু
 2. একটি dispatch function (ইউজার actions কে reducer এর নিকট "dispatch বা প্রেরণ" করার জন্য)
 
-এখন এটিকে পুরোপুরি সেট আপ করা হয়ে গেছে। এখানে, reducer টিকে component file এর নিচের দিকে declare করা হয়েছে:
+এখন এটিকে পুরোপুরি সেট আপ করা হয়ে গেছে। এখানে, reducer টিকে component file এর নিচের দিকে declare করা হয়েছেঃ
 
 <Sandpack>
 
@@ -674,7 +674,7 @@ li {
 
 </Sandpack>
 
-যদি চান, তাহলে আপনি reducer টিকে ভিন্ন আরেকটি ফাইলেও নিতে পারেন:
+যদি চান, তাহলে আপনি reducer টিকে ভিন্ন আরেকটি ফাইলেও নিতে পারেনঃ
 
 <Sandpack>
 
@@ -874,7 +874,7 @@ Reducer এর যে একদম কোনো খারাপ দিক নে
 - **টেস্ট করা (Testing):** Reducer হলো একটি pure function যা আপনার কম্পোনেন্টের উপর নির্ভর করে না। এর মানে আপনি একে আলাদা ভাবে export করে test করতে পারবেন। যদিও স্বাভাবিকভাবে কম্পোনেন্টস কে আরো realistic environment এ টেস্ট করা উত্তম, তবে জটিল state update logic এর ক্ষেত্রে "নির্দিষ্ট initial state এবং action এর জন্য আপনার reducer নির্দিষ্ট state রিটার্ন করে" এ ব্যাপারে নিশ্চিত থাকা উপকারে আসতে পারে।
 - **ব্যাক্তিগত পছন্দ (Personal preference):** কেউ reducer পছন্দ করে, কেউ করেনা। এটা কোনো সমস্যা না। এটা একটা রুচির বিষয়। আপনি সর্বদাই `useState` এবং `useReducer` এর মাঝে অদল বদল করতে পারবেনঃ তারা উভয়ই সমান!
 
-যদি আপনি কোনো কম্পোনেন্টে ভুলভাল স্টেট আপডেটের কারণে bug এর সম্মুখীন হন এবং এর কোডের কাঠামো আরো সুন্দর করতে চান, সেক্ষেত্রে আমরা একটি reducer ব্যাবহার করা রেকমেন্ড করি। আপনার সব কিছুর জন্য reducer ব্যাবহার করতে হবে এমন কোনো কথা নেই: আপনি বিনা বাধায় মিলিয়ে মিশিয়ে ব্যাবহার করতে পারেন! এমনকি আপনি একই কম্পোনেন্টে `useState` এবং `useReducer` ব্যাবহার করতে পারেন।
+যদি আপনি কোনো কম্পোনেন্টে ভুলভাল স্টেট আপডেটের কারণে bug এর সম্মুখীন হন এবং এর কোডের কাঠামো আরো সুন্দর করতে চান, সেক্ষেত্রে আমরা একটি reducer ব্যাবহার করা রেকমেন্ড করি। আপনার সব কিছুর জন্য reducer ব্যাবহার করতে হবে এমন কোনো কথা নেইঃ আপনি বিনা বাধায় মিলিয়ে মিশিয়ে ব্যাবহার করতে পারেন! এমনকি আপনি একই কম্পোনেন্টে `useState` এবং `useReducer` ব্যাবহার করতে পারেন।
 
 ## যেভাবে ভালো reducer লেখবেন {/*writing-reducers-well*/}
 
@@ -885,7 +885,7 @@ Reducer লেখার সময় এই দুটি টিপস মনে র
 
 ## Immer দিয়ে সংক্ষেপে reducers লেখা {/*writing-concise-reducers-with-immer*/}
 
-স্বাভাবিক স্টেটে [objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) এবং [arrays](/learn/updating-arrays-in-state#write-concise-update-logic-with-immer) আপডেট করার মতই, আপনি reducer সমূহকে আরো সংক্ষেপ করতে আপনি Immer লাইব্রেরীটি ব্যাবহার করতে পারেন। এখানে, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer) আপনাকে `push` অথবা `arr[i] =` অ্যাসাইনমেন্ট দিয়ে স্টেট আপডেট করতে দিচ্ছে:
+স্বাভাবিক স্টেটে [objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) এবং [arrays](/learn/updating-arrays-in-state#write-concise-update-logic-with-immer) আপডেট করার মতই, আপনি reducer সমূহকে আরো সংক্ষেপ করতে আপনি Immer লাইব্রেরীটি ব্যাবহার করতে পারেন। এখানে, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer) আপনাকে `push` অথবা `arr[i] =` অ্যাসাইনমেন্ট দিয়ে স্টেট আপডেট করতে দিচ্ছেঃ
 
 <Sandpack>
 
@@ -1086,7 +1086,7 @@ Reducers কে অবশ্যই pure হতে হবে, যেন সেগ
 
 <Recap>
 
-- `useState` কে `useReducer` এ পরিবর্তন করতে:
+- `useState` কে `useReducer` এ পরিবর্তন করতেঃ
   1. ইভেন্ট হ্যান্ডলারসমূহ থেকে actions ডিসপ্যাচ করুন।
   2. একটি reducer function যেটি প্রদত্ত স্টেটের জন্য পরবর্তী স্টেট রিটার্ন করে এবং action সমূহ লিখুন।
   3. `useState` এর জায়গায় `useReducer` ব্যবহার করুন।