From ff1cb8ae29420d12c13a63a10ffdf94e4446ab9d Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Sun, 29 Oct 2023 12:04:05 +0600 Subject: [PATCH 01/35] translate title (0% finished) --- src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 012a5c3f9..687968738 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1,5 +1,5 @@ --- -title: Extracting State Logic into a Reducer +title: State Logic কে একটি Reducer এ স্থানান্তর করা --- From 51661f09d3ab569592f3f2246545b779cc762dfd Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Sun, 29 Oct 2023 13:04:17 +0600 Subject: [PATCH 02/35] translate intro (0% finished) --- src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 687968738..8773da2c7 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -4,7 +4,7 @@ title: State Logic কে একটি Reducer এ স্থানান্ত -Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a _reducer._ +একাধিক event handler এ ছড়িয়ে থাকা একাধিক state update ওয়ালা কম্পোনেন্টগুলো দুঃসহ হয়ে যেতে পারে। এসব ক্ষেত্রে, আপনি সকল state update logic কে আপনার কম্পোনেন্টের বাইরে একটিমাত্র function এ একত্রিত করতে পারেন, যাকে বলা হয় _reducer।_ From 88d1fcec3466eb0b0201f94af1ad8a0b7ddcf33f Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Wed, 1 Nov 2023 00:36:06 +0600 Subject: [PATCH 03/35] feat: :sparkles: translate YouWillLearn (0% finished) --- .../learn/extracting-state-logic-into-a-reducer.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 8773da2c7..4c96c8c67 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -10,10 +10,10 @@ title: State Logic কে একটি Reducer এ স্থানান্ত -- What a reducer function is -- How to refactor `useState` to `useReducer` -- When to use a reducer -- How to write one well +- reducer function বলতে কী বুঝায় +- কিভাবে `useState` কে গুছিয়ে `useReducer` এ পরিণত করা যায় +- কখন reducer ব্যবহার করতে হয় +- কীভাবে একে ভালভাবে লিখতে হয় From add0eea5870f559f71b663a90a951e764d297ed3 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Wed, 1 Nov 2023 11:42:24 +0600 Subject: [PATCH 04/35] feat: :sparkles: Translated part of 1st section (0% finished) --- src/content/learn/extracting-state-logic-into-a-reducer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 4c96c8c67..c0e9afef5 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -17,9 +17,9 @@ title: State Logic কে একটি Reducer এ স্থানান্ত -## Consolidate state logic with a reducer {/*consolidate-state-logic-with-a-reducer*/} +## State logic কে একটি reducer এ একত্র করুন {/*consolidate-state-logic-with-a-reducer*/} -As your components grow in complexity, it can get harder to see at a glance all the different ways in which a component's state gets updated. For example, the `TaskApp` component below holds an array of `tasks` in state and uses three different event handlers to add, remove, and edit tasks: +ধীরে ধীরে যখন আপনার কম্পোনেন্টগুলোর জটিলতা বাড়তে থাকে, তখন এক নজর দেখে এটা বোঝা কঠিন হয়ে যেতে পারে যে কতোনা উপায়ে একটা কম্পোনেন্টের state আপডেট হতে পারে। উদাহরণস্বরূপ, নিচের `TaskApp` কম্পোনেন্টটি `tasks` নামক array কে state হিসেবে ধারণ করে, আর কোনো task কে add, edit, remove করার জন্য তিনটি ভিন্ন ভিন্ন event handler এর ব্যবহার করে: From 2b96ef27b9e1ddb1d2894b0705cf421799f34ac8 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 3 Nov 2023 21:31:19 +0600 Subject: [PATCH 05/35] feat: :sparkles: Finished 6% Translated: - Consolidate state logic with a reducer overview - 3 steps --- .../learn/extracting-state-logic-into-a-reducer.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index c0e9afef5..4d1f8f889 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -179,13 +179,13 @@ li { -Each of its event handlers calls `setTasks` in order to update the state. As this component grows, so does the amount of state logic sprinkled throughout it. To reduce this complexity and keep all your logic in one easy-to-access place, you can move that state logic into a single function outside your component, **called a "reducer".** +এর প্রতিটি event handler state কে আপডেট করার জন্য `setTasks` কে call করে। ধীরে ধীরে যখন এ কম্পোনেন্টটি আকারে বাড়তে থাকবে, তখন সাথে সাথে এর ভিতরকার state logic ও বাড়তে থাকবে এবং জটিলতর হতে থাকবে। এই জটিলতা কমাতে এবং আপনার সব state logic একটি সহজে-পাওয়া-যায় এমন জায়গায় রাখতে, আপনি ঐসব state logic কে আপনার কম্পোনেন্টের বাইরে একটি function এ স্থানান্তর করতে পারেন, যে function টিকে বলা হয় **"reducer".** -Reducers are a different way to handle state. You can migrate from `useState` to `useReducer` in three steps: +Reducer হলো state হ্যান্ডেল করার একটি বিকল্প পদ্ধতি। আপনি `useState` থেকে `useReducer` এ তিনটি ধাপে স্থানান্তর করতে পারেন: -1. **Move** from setting state to dispatching actions. -2. **Write** a reducer function. -3. **Use** the reducer from your component. +1. state কে set করার বদলে action কে **dispatch করতে শুরু করুন**। +2. একটি reducer function **লিখুন**। +3. reducer টিকে আপনার কম্পোনেন্ট থেকে **ইউজ করুন**। ### Step 1: Move from setting state to dispatching actions {/*step-1-move-from-setting-state-to-dispatching-actions*/} From dcc87cf8797172381854a98026a9d29cbc137d38 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Sat, 4 Nov 2023 11:34:48 +0600 Subject: [PATCH 06/35] feat: :sparkles: Finished 14% - Translated half of Step 1 --- .../learn/extracting-state-logic-into-a-reducer.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 4d1f8f889..f4a9efeab 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -187,9 +187,9 @@ Reducer হলো state হ্যান্ডেল করার একটি 2. একটি reducer function **লিখুন**। 3. reducer টিকে আপনার কম্পোনেন্ট থেকে **ইউজ করুন**। -### Step 1: Move from setting state to dispatching actions {/*step-1-move-from-setting-state-to-dispatching-actions*/} +### ধাপ ১: State কে set করার বদলে action কে dispatch করতে শুরু করুন {/*step-1-move-from-setting-state-to-dispatching-actions*/} -Your event handlers currently specify _what to do_ by setting state: +State কে set করার মাধ্যমে আপনার event handler গুলো বর্তমানে নির্ধারণ করছে যে কী করতে হবে: ```js function handleAddTask(text) { @@ -220,11 +220,11 @@ function handleDeleteTask(taskId) { } ``` -Remove all the state setting logic. What you are left with are three event handlers: +এখন সব state সেট করার logic দূর করে দিন। এখন আপনার কাছে যা বাকি থাকবে তা হলো: -- `handleAddTask(text)` is called when the user presses "Add". -- `handleChangeTask(task)` is called when the user toggles a task or presses "Save". -- `handleDeleteTask(taskId)` is called when the user presses "Delete". +- ইউজার যখন "Add" প্রেস করে তখন call করা হয় `handleAddTask(text)`। +- ইউজার যখন "Save" প্রেস করে কিংবা কোনো task কে toggle (বা edit) করে তখন call করা হয় `handleChangeTask(task)`। +- ইউজার যখন "Delete" প্রেস করে তখন call করা হয় `handleDeleteTask(taskId)`। Managing state with reducers is slightly different from directly setting state. Instead of telling React "what to do" by setting state, you specify "what the user just did" by dispatching "actions" from your event handlers. (The state update logic will live elsewhere!) So instead of "setting `tasks`" via an event handler, you're dispatching an "added/changed/deleted a task" action. This is more descriptive of the user's intent. From 4580fc6d34198279ee874a76cff42478235f0e56 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Mon, 6 Nov 2023 02:53:40 +0600 Subject: [PATCH 07/35] feat: :sparkles: Finished 17% Translated: - A paragraph from step 1 --- src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index f4a9efeab..682c69b54 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -226,7 +226,7 @@ function handleDeleteTask(taskId) { - ইউজার যখন "Save" প্রেস করে কিংবা কোনো task কে toggle (বা edit) করে তখন call করা হয় `handleChangeTask(task)`। - ইউজার যখন "Delete" প্রেস করে তখন call করা হয় `handleDeleteTask(taskId)`। -Managing state with reducers is slightly different from directly setting state. Instead of telling React "what to do" by setting state, you specify "what the user just did" by dispatching "actions" from your event handlers. (The state update logic will live elsewhere!) So instead of "setting `tasks`" via an event handler, you're dispatching an "added/changed/deleted a task" action. This is more descriptive of the user's intent. +Reducer দিয়ে state ম্যানেজ করা, state সেট করা থেকে কিছুটা ভিন্ন জিনিস। React কে state সেট করার মাধ্যমে "কী করতে হবে" না বলে, আপনি আপনার event handler গুলো থেকে "action" গুলোকে dispatch করার মাধ্যমে ঠিক করে দেন "ইউজার এইমাত্র কী করলো"। (আর state update logic অন্য আরেক জায়গায় থাকবে!) তাই একটি event handler এর মাধ্যমে "`tasks` সেট করার" পরিবর্তে, আপনি "একটি task add/change/delete করার" action(কাজ) dispatch করবেন। আর এই পদ্ধতিটি ইউজারের আকাঙ্ক্ষাকে বেশি বর্ণনা করে। ```js function handleAddTask(text) { From 6c5db97251a9ef1b4c22664f93c96e21770f987a Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Wed, 15 Nov 2023 00:58:20 +0600 Subject: [PATCH 08/35] feat: :sparkles: Finished 24% Translated: - paragraph step 1 --- src/content/learn/extracting-state-logic-into-a-reducer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 682c69b54..4d9ede99b 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -252,7 +252,7 @@ function handleDeleteTask(taskId) { } ``` -The object you pass to `dispatch` is called an "action": +আপনি `dispatch` এর কাছে যে object টি pass করেন, তাকে একটি "action" বলে: ```js {3-7} function handleDeleteTask(taskId) { @@ -266,7 +266,7 @@ function handleDeleteTask(taskId) { } ``` -It is a regular JavaScript object. You decide what to put in it, but generally it should contain the minimal information about _what happened_. (You will add the `dispatch` function itself in a later step.) +এটি একটি সাধারণ JavaScript object। এর মধ্যে কী রাখতে হবে সেটা আপনার উপর, তবে স্বাভাবিকভাবে এর মধ্যে _কী ঘটলো(what happened)_ সে ব্যপারে ন্যূনতম ইনফর্মেশন থাকতে হবে। (আর আপনি `dispatch` ফাংশনটিকেই একটি পরবর্তী ধাপে যুক্ত করবেন।) From a430723e9b959abb35ccdbdc7b11b2f2e1f0b0f0 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Sat, 13 Jan 2024 06:06:00 +0600 Subject: [PATCH 09/35] feat: :sparkles: Finished 27% Translated: - step 1 full --- src/content/learn/extracting-state-logic-into-a-reducer.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 4d9ede99b..603dad29d 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -266,13 +266,13 @@ function handleDeleteTask(taskId) { } ``` -এটি একটি সাধারণ JavaScript object। এর মধ্যে কী রাখতে হবে সেটা আপনার উপর, তবে স্বাভাবিকভাবে এর মধ্যে _কী ঘটলো(what happened)_ সে ব্যপারে ন্যূনতম ইনফর্মেশন থাকতে হবে। (আর আপনি `dispatch` ফাংশনটিকেই একটি পরবর্তী ধাপে যুক্ত করবেন।) +এটি একটি সাধারণ JavaScript object। এর মধ্যে কী রাখতে হবে সেটা আপনার উপর, তবে স্বাভাবিকভাবে এর মধ্যে _কী ঘটলো(what happened)_ সে ব্যপারে ন্যূনতম ইনফর্মেশন থাকতে হবে। (আর আপনি `dispatch` ফাংশনটিকে পরবর্তী একটি ধাপে যুক্ত করবেন।) -An action object can have any shape. +একটি object যেকোনো আকৃতির হতে পারে। -By convention, it is common to give it a string `type` that describes what happened, and pass any additional information in other fields. The `type` is specific to a component, so in this example either `'added'` or `'added_task'` would be fine. Choose a name that says what happened! +তবে নিয়ম হচ্ছে, এই object কে `type` হিসেবে একটি string পাস করা যে type টি ব্যাখ্যা করে "কি ঘটলো" তা, আর যেকোনো অতিরিক্ত ইনফর্রমেশন অন্যান্য ফিল্ড গুলোতে পাস করে দেয়াই সাধারণ প্রচলন। `type` একটি কম্পোনেন্টের জন্য নির্ধারিত, তাই এই উদাহরণে `'added'` অথবা `'added_task'` নাম দিলেই চলবে। এমন একটি নাম দেয়ার চেষ্টা করুন যে নামটি বলে দেয় কী ঘটলো! ```js dispatch({ From 223310e28ad6259d93222fd3e1b9a69e32828f87 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Sun, 14 Jan 2024 01:46:57 +0600 Subject: [PATCH 10/35] feat: :sparkles: Finished 35% --- .../extracting-state-logic-into-a-reducer.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 603dad29d..866dfe3d5 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -284,9 +284,9 @@ dispatch({ -### Step 2: Write a reducer function {/*step-2-write-a-reducer-function*/} +### ধাপ ২: একটি reducer function লিখুন {/*step-2-write-a-reducer-function*/} -A reducer function is where you will put your state logic. It takes two arguments, the current state and the action object, and it returns the next state: +একটি reducer function হলো যেখানে আপনি আপনার state লজিক রাখবেন। এটি দুটি argument নেয়, বর্তমান state এবং action অবজেক্ট, অতঃপর এটি পরবর্তী state কে return করেঃ ```js function yourReducer(state, action) { @@ -294,15 +294,15 @@ function yourReducer(state, action) { } ``` -React will set the state to what you return from the reducer. +আপনি reducer থেকে যা return করবেন, React সেটিকে state হিসেবে সেট করে দিবে। -To move your state setting logic from your event handlers to a reducer function in this example, you will: +এই উদাহরণে, state সেট করার লজিককে event handlers থেকে একটি reducer function এ সরাতে, আপনার: -1. Declare the current state (`tasks`) as the first argument. -2. Declare the `action` object as the second argument. -3. Return the _next_ state from the reducer (which React will set the state to). +1. বর্তমান state (`tasks`) কে প্রথম argument হিসেবে declare করতে হবে। +2. `action` অবজেক্টকে দ্বিতীয় argument হিসেবে declare করতে হবে। +3. reducer থেকে _পরবর্তী_ state কে return করতে হবে। (যেটিকে React পরবর্তী state হিসেবে সেট করবে) -Here is all the state setting logic migrated to a reducer function: +সব state সেট করার লজিক reducer function এ সরানোর পর এমন দেখাবেঃ ```js function tasksReducer(tasks, action) { @@ -331,7 +331,7 @@ function tasksReducer(tasks, action) { } ``` -Because the reducer function takes state (`tasks`) as an argument, you can **declare it outside of your component.** This decreases the indentation level and can make your code easier to read. +যেহেতু reducer function টি state (`tasks`) কে একটি argument হিসেবে নিচ্ছে, আপনি একে **আপনার কম্পোনেন্টের বাইরে declare করতে পারবেন।** এটা indentation level কমিয়ে আনে এবং আপনার কোডকে পড়তে সহজ করে। From 84a312c1c4eecd90cc2b4ba9d9233a945d9667b0 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Mon, 15 Jan 2024 02:31:35 +0600 Subject: [PATCH 11/35] feat: :sparkles: Finished 48% --- .../learn/extracting-state-logic-into-a-reducer.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 866dfe3d5..e28eedd3e 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -335,9 +335,9 @@ function tasksReducer(tasks, action) { -The code above uses if/else statements, but it's a convention to use [switch statements](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/switch) inside reducers. The result is the same, but it can be easier to read switch statements at a glance. +উপরের কোডে if/else স্টেটমেন্ট ব্যবহৃত হয়েছে, কিন্তু reducer এর ভিতর [switch স্টেটমেন্ট](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/switch) ব্যাবহার করাটা প্রচলিত। ফলাফল একই থাকবে, কিন্তু switch স্টেটমেন্ট একনজরে পরাটা আরো সহজতর। -We'll be using them throughout the rest of this documentation like so: +আমরা ডকুমেন্টেশনের বাকী অংশ জুড়ে এই প্রচলন অনুসারেই চালিয়ে যাবো: ```js function tasksReducer(tasks, action) { @@ -371,9 +371,9 @@ function tasksReducer(tasks, action) { } ``` -We recommend wrapping each `case` block into the `{` and `}` curly braces so that variables declared inside of different `case`s don't clash with each other. Also, a `case` should usually end with a `return`. If you forget to `return`, the code will "fall through" to the next `case`, which can lead to mistakes! +আমরা প্রত্যেক `case` ব্লককে `{` এবং `}` বক্র ব্র্যাকেটে আবদ্ধ করতে রিকমেন্ড করি যাতে ভিন্ন ভিন্ন `case` এর মধ্যে declare করা variable একে অপরের সাথে সাংঘর্ষিক না হয়। আর, একটি `case` সাধারণত একটি `return` দিয়ে শেষ হবে। যদি আপনি `return` করতে ভুলে যান, তাহলে (ঐ `case` এর) কোডটি "ভেদ করে" পরবর্তী `case` এ গিয়ে পড়বে, যেটা ত্রুটি ঘটাতে পারে! -If you're not yet comfortable with switch statements, using if/else is completely fine. +যদি আপনি switch স্টেটমেন্ট এর ব্যাপারে এখনো কমফোর্টেবল না হয়ে থাকেন, if/else ব্যাবহার করায় কোনো সমস্যা নেই। From 2287825024f8d0751c256ade521c8fd7e498c0da Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jan 2024 19:24:16 +0600 Subject: [PATCH 12/35] feat: :sparkles: Finished 54% - translated step 2 full --- .../learn/extracting-state-logic-into-a-reducer.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index e28eedd3e..2d84c2f8b 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -379,11 +379,11 @@ function tasksReducer(tasks, action) { -#### Why are reducers called this way? {/*why-are-reducers-called-this-way*/} +#### Reducer কে কেনো এভাবে call করা হয়? {/*why-are-reducers-called-this-way*/} -Although reducers can "reduce" the amount of code inside your component, they are actually named after the [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) operation that you can perform on arrays. +যদিও reducer আপনার কম্পোনেন্টের ভিতরে কোডের পরিমাণ কমাতে পারে, কিন্তু reducer নাম দেয়ার পিছনে আসল রহস্য হচ্ছে [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) অপারেশন, যেটি আপনি array এর উপর প্রয়োগ করতে পারেন। -The `reduce()` operation lets you take an array and "accumulate" a single value out of many: +`reduce()` অপারেশনটি আপনাকে একটি array এর একাধিক ভ্যালুকে "একত্র করে" একটি ভ্যালুতে নিয়ে আনার ক্ষমতা দেয়: ``` const arr = [1, 2, 3, 4, 5]; @@ -392,9 +392,9 @@ const sum = arr.reduce( ); // 1 + 2 + 3 + 4 + 5 ``` -The function you pass to `reduce` is known as a "reducer". It takes the _result so far_ and the _current item,_ then it returns the _next result._ React reducers are an example of the same idea: they take the _state so far_ and the _action_, and return the _next state._ In this way, they accumulate actions over time into state. +`reduce` কে আপনি যে ফাংশনটি পাস করেন তাকে বলা হয় "reducer"। এটা গ্রহণ করে _এখন অবধি রেজাল্ট_ এবং _বর্তমান item,_ তারপর এটা return করে _পরবর্তী রেজাল্ট।_ React reducer ও এর অনুরূপ: গ্রহণ করে _এখন অবধি state_ এবং _action_, এবং return করে _পরবর্তী state।_ এমন করে, সময়ের সাথে সেটি action সমূহকে কে state হিসেবে একত্র করে। -You could even use the `reduce()` method with an `initialState` and an array of `actions` to calculate the final state by passing your reducer function to it: +এমনকি আপনি `reduce()` মেথডটি দিয়েও একটি `initialState` এবং একটি `actions` এর array থেকে সর্বশেষ state বের করতে পারবেন, তার জন্য মেথডটিকে আপনার reducer ফাংশনটি পাস করতে হবে: @@ -453,7 +453,7 @@ export default function tasksReducer(tasks, action) { -You probably won't need to do this yourself, but this is similar to what React does! +আপনার নিজের এমনটা করার প্রয়োজন না হওয়ারই সম্ভাবনা বেশি, তবে এটা React যেভাবে করে দেয় তার মতোই! From 73486dd05c96b8547ac813420a5164b41cebd3e0 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 19 Jan 2024 04:51:55 +0600 Subject: [PATCH 13/35] feat: :sparkles: Finished 67% - translated step 3 full --- .../extracting-state-logic-into-a-reducer.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 2d84c2f8b..ed5de3691 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -457,39 +457,39 @@ export default function tasksReducer(tasks, action) { -### Step 3: Use the reducer from your component {/*step-3-use-the-reducer-from-your-component*/} +### ধাপ ৩: আপনার কম্পোনেন্টে reducer টি ব্যাবহার করুন {/*step-3-use-the-reducer-from-your-component*/} -Finally, you need to hook up the `tasksReducer` to your component. Import the `useReducer` Hook from React: +সবশেষে, আপনার `tasksReducer` টিকে আপনার কম্পোনেন্টের সাথে সংযুক্ত করে দিতে হবে। React থেকে `useReducer` হুকটি import করুন: ```js import { useReducer } from 'react'; ``` -Then you can replace `useState`: +অতঃপর আপনি `useState` কে সরিয়ে দিতে পারেন: ```js const [tasks, setTasks] = useState(initialTasks); ``` -with `useReducer` like so: +`useReducer` দিয়ে, ঠিক এভাবে: ```js const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); ``` -The `useReducer` Hook is similar to `useState`—you must pass it an initial state and it returns a stateful value and a way to set state (in this case, the dispatch function). But it's a little different. +`useReducer` হুকটি অনেকটা `useState` মতো—আপনার অবশ্যই একে একটি initial state (স্টেটের প্রাথমিক ভ্যালু) পাস করতে হবে আর এটি return করে state এর ভ্যালু এবং state কে সেট করার একটি পদ্ধতি (এক্ষেত্রে, dispatch ফাংশন)। কিন্তু এটি (`useState` থেকে) একটু আলাদা। -The `useReducer` Hook takes two arguments: +`useReducer` হুকটি দুটি argument নেয়: -1. A reducer function -2. An initial state +1. একটি reducer function +2. একটি initial state -And it returns: +আর এটি return করে: -1. A stateful value -2. A dispatch function (to "dispatch" user actions to the reducer) +1. একটি state ভ্যালু +2. একটি dispatch function (ইউজার actions কে reducer এর নিকট "dispatch বা প্রেরণ" করার জন্য) -Now it's fully wired up! Here, the reducer is declared at the bottom of the component file: +এখন এটিকে পুরোপুরি সেট আপ করা হয়ে গেছে। এখানে, reducer টিকে component file এর নিচের দিকে declare করা হয়েছে: @@ -674,7 +674,7 @@ li { -If you want, you can even move the reducer to a different file: +যদি চান, তাহলে আপনি reducer টিকে ভিন্ন আরেকটি ফাইলেও নিতে পারেন: @@ -862,7 +862,7 @@ li { -Component logic can be easier to read when you separate concerns like this. Now the event handlers only specify _what happened_ by dispatching actions, and the reducer function determines _how the state updates_ in response to them. +যখন আপনি এমন করে separation of concern বজায় রাখবেন, কম্পোনেন্ট লজিক পড়াটা তখন সহজতর হবে। এখন event handler গুলো actions কে dispatch (প্রেরণ) করার মাধ্যমে শুধু _কি ঘটলো_ সেটা নির্ধারণ করে, আর তার জবাবে reducer function টি নির্ধারণ করে _কিভাবে state টি update হয়_। ## Comparing `useState` and `useReducer` {/*comparing-usestate-and-usereducer*/} From b15f2df99391bb69c109340976b7c614ffb686af Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Wed, 31 Jan 2024 12:35:55 +0600 Subject: [PATCH 14/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Finished=2070%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/extracting-state-logic-into-a-reducer.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index ed5de3691..3f8a627a6 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -864,13 +864,13 @@ li { যখন আপনি এমন করে separation of concern বজায় রাখবেন, কম্পোনেন্ট লজিক পড়াটা তখন সহজতর হবে। এখন event handler গুলো actions কে dispatch (প্রেরণ) করার মাধ্যমে শুধু _কি ঘটলো_ সেটা নির্ধারণ করে, আর তার জবাবে reducer function টি নির্ধারণ করে _কিভাবে state টি update হয়_। -## Comparing `useState` and `useReducer` {/*comparing-usestate-and-usereducer*/} +## `useState` এবং `useReducer` এর তুলনা {/*comparing-usestate-and-usereducer*/} -Reducers are not without downsides! Here's a few ways you can compare them: +Reducer এর যে একদম কোনো খারাপ দিক নেই এমনটি না! আপনি নিচের কয়েকটি উপায়ে উভয়ের মাঝে তুলনা করতে পারেনঃ -- **Code size:** Generally, with `useState` you have to write less code upfront. With `useReducer`, you have to write both a reducer function _and_ dispatch actions. However, `useReducer` can help cut down on the code if many event handlers modify state in a similar way. -- **Readability:** `useState` is very easy to read when the state updates are simple. When they get more complex, they can bloat your component's code and make it difficult to scan. In this case, `useReducer` lets you cleanly separate the _how_ of update logic from the _what happened_ of event handlers. -- **Debugging:** When you have a bug with `useState`, it can be difficult to tell _where_ the state was set incorrectly, and _why_. With `useReducer`, you can add a console log into your reducer to see every state update, and _why_ it happened (due to which `action`). If each `action` is correct, you'll know that the mistake is in the reducer logic itself. However, you have to step through more code than with `useState`. +- **কোডের দৈর্ঘ্য (Code size):** সাধারণত, `useState` এর বেলায় আপনার শুরুতে কম কোড লেখা লাগে। আর `useReducer` এর বেলায়, আপনাকে একটি reducer function লেখা _এবং_ actions কে dispatch করা উভয়টিই করতে হয়। তবে, `useReducer` কোডের দৈর্ঘ্য কমাতে সহায়তা করতে পারে যদি কয়েকটি event handler একইভাবে state কে modify করে থাকে। +- **পড়ার সহজতা (Readability):** `useState` পড়তে খুব সহজ যখন state update গুলো simple হয়। যখন তা জটিল হয়, তখন `useState` গুলো আপনার কম্পোনেটের কোডকে হিজিবিজি করে তোলে ও কোডে চোখ বুলানোটা কঠিনতর করে তোলে। এক্ষেত্রে, `useReducer` আপনাকে লজিক আপডেট _কিভাবে হলো (how)_ এবং event handler গুলোতে _কি ঘটলো (what happened_) পরিষ্কারভাবে আলাদা আলাদা রাখতে দেয়। +- **বাগ দূর করা (Debugging):** যখন আপনার `useState` সংক্রান্ত কোনো bug থাকে, তখন _কোথায়_ এবং _কেনো_ স্টেটটিকে ভুলভাবে সেট করা হয়েছিলো এটা নির্ণয় করা কঠিন হয়ে উঠতে পারে। `useReducer` এর ক্ষেত্রে, আপনি প্রত্যেক স্টেট আপডেট এবং _কেনো_ (কোন `action` এর কারণে) তা ঘটলো সেটা দেখার জন্য reducer টিতে একটি console log যুক্ত করে দিতে পারেন। যদি প্রতিটি `action` সঠিক হয়ে থাকে, তখন আপনি বুঝে যাবেন যে ভুলটি আসলে reducer logic এর ভিতরে রয়েছে। তবে, আপনাকে এক্ষেত্রে `useState` এর থেকে বেশি কোড ঘাঁটাঘাঁটি করতে হবে। - **Testing:** A reducer is a pure function that doesn't depend on your component. This means that you can export and test it separately in isolation. While generally it's best to test components in a more realistic environment, for complex state update logic it can be useful to assert that your reducer returns a particular state for a particular initial state and action. - **Personal preference:** Some people like reducers, others don't. That's okay. It's a matter of preference. You can always convert between `useState` and `useReducer` back and forth: they are equivalent! From 390c46e95f94d0144091b647a2702f3569f23c66 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 2 Feb 2024 02:45:35 +0600 Subject: [PATCH 15/35] feat: :sparkles: Finished 72% --- src/content/learn/extracting-state-logic-into-a-reducer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 3f8a627a6..c9b8ee460 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -871,8 +871,8 @@ Reducer এর যে একদম কোনো খারাপ দিক নে - **কোডের দৈর্ঘ্য (Code size):** সাধারণত, `useState` এর বেলায় আপনার শুরুতে কম কোড লেখা লাগে। আর `useReducer` এর বেলায়, আপনাকে একটি reducer function লেখা _এবং_ actions কে dispatch করা উভয়টিই করতে হয়। তবে, `useReducer` কোডের দৈর্ঘ্য কমাতে সহায়তা করতে পারে যদি কয়েকটি event handler একইভাবে state কে modify করে থাকে। - **পড়ার সহজতা (Readability):** `useState` পড়তে খুব সহজ যখন state update গুলো simple হয়। যখন তা জটিল হয়, তখন `useState` গুলো আপনার কম্পোনেটের কোডকে হিজিবিজি করে তোলে ও কোডে চোখ বুলানোটা কঠিনতর করে তোলে। এক্ষেত্রে, `useReducer` আপনাকে লজিক আপডেট _কিভাবে হলো (how)_ এবং event handler গুলোতে _কি ঘটলো (what happened_) পরিষ্কারভাবে আলাদা আলাদা রাখতে দেয়। - **বাগ দূর করা (Debugging):** যখন আপনার `useState` সংক্রান্ত কোনো bug থাকে, তখন _কোথায়_ এবং _কেনো_ স্টেটটিকে ভুলভাবে সেট করা হয়েছিলো এটা নির্ণয় করা কঠিন হয়ে উঠতে পারে। `useReducer` এর ক্ষেত্রে, আপনি প্রত্যেক স্টেট আপডেট এবং _কেনো_ (কোন `action` এর কারণে) তা ঘটলো সেটা দেখার জন্য reducer টিতে একটি console log যুক্ত করে দিতে পারেন। যদি প্রতিটি `action` সঠিক হয়ে থাকে, তখন আপনি বুঝে যাবেন যে ভুলটি আসলে reducer logic এর ভিতরে রয়েছে। তবে, আপনাকে এক্ষেত্রে `useState` এর থেকে বেশি কোড ঘাঁটাঘাঁটি করতে হবে। -- **Testing:** A reducer is a pure function that doesn't depend on your component. This means that you can export and test it separately in isolation. While generally it's best to test components in a more realistic environment, for complex state update logic it can be useful to assert that your reducer returns a particular state for a particular initial state and action. -- **Personal preference:** Some people like reducers, others don't. That's okay. It's a matter of preference. You can always convert between `useState` and `useReducer` back and forth: they are equivalent! +- **টেস্ট করা (Testing):** Reducer হলো একটি pure function যা আপনার কম্পোনেন্টের উপর নির্ভর করে না। এর মানে আপনি একে আলাদা ভাবে export করে test করতে পারবেন। যদিও স্বাভাবিকভাবে কম্পোনেন্টস কে আরো realistic environment এ টেস্ট করা উত্তম, তবে জটিল state update logic এর ক্ষেত্রে "নির্দিষ্ট initial state এবং action এর জন্য আপনার reducer নির্দিষ্ট state রিটার্ন করে" এ ব্যাপারে নিশ্চিত থাকা উপকারে আসতে পারে। +- **ব্যাক্তিগত পছন্দ (Personal preference):** কেউ reducer পছন্দ করে, কেউ করেনা। এটা কোনো সমস্যা না। এটা একটা রুচির বিষয়। আপনি সর্বদাই `useState` এবং `useReducer` এর মাঝে অদল বদল করতে পারবেনঃ তারা উভয়ই সমান! We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even `useState` and `useReducer` in the same component. From 13758fb23e8b6f6773fac81340e224cbb1cda151 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Sat, 3 Feb 2024 04:43:45 +0600 Subject: [PATCH 16/35] feat: :sparkles: Finished 73% - Completed Comparing useState and useReducer --- src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index c9b8ee460..57e6ebce6 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -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` এর মাঝে অদল বদল করতে পারবেনঃ তারা উভয়ই সমান! -We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even `useState` and `useReducer` in the same component. +যদি আপনি কোনো কম্পোনেন্টে ভুলভাল স্টেট আপডেটের কারণে bug এর সম্মুখীন হন এবং এর কোডের কাঠামো আরো সুন্দর করতে চান, সেক্ষেত্রে আমরা একটি reducer ব্যাবহার করা রেকমেন্ড করি। আপনার সব কিছুর জন্য reducer ব্যাবহার করতে হবে এমন কোনো কথা নেই: আপনি বিনা বাধায় মিলিয়ে মিশিয়ে ব্যাবহার করতে পারেন! এমনকি আপনি একই কম্পোনেন্টে `useState` এবং `useReducer` ব্যাবহার করতে পারেন। ## Writing reducers well {/*writing-reducers-well*/} From 749171d304a06c6714f9cd79bf09753df13e6108 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 12 Jul 2024 03:08:57 +0600 Subject: [PATCH 17/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Finished=2077%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/extracting-state-logic-into-a-reducer.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 57e6ebce6..a59f838a1 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -876,12 +876,12 @@ Reducer এর যে একদম কোনো খারাপ দিক নে যদি আপনি কোনো কম্পোনেন্টে ভুলভাল স্টেট আপডেটের কারণে bug এর সম্মুখীন হন এবং এর কোডের কাঠামো আরো সুন্দর করতে চান, সেক্ষেত্রে আমরা একটি reducer ব্যাবহার করা রেকমেন্ড করি। আপনার সব কিছুর জন্য reducer ব্যাবহার করতে হবে এমন কোনো কথা নেই: আপনি বিনা বাধায় মিলিয়ে মিশিয়ে ব্যাবহার করতে পারেন! এমনকি আপনি একই কম্পোনেন্টে `useState` এবং `useReducer` ব্যাবহার করতে পারেন। -## Writing reducers well {/*writing-reducers-well*/} +## যেভাবে ভালো reducer লেখবেন {/*writing-reducers-well*/} -Keep these two tips in mind when writing reducers: +Reducer লেখার সময় এই দুটি টিপস মনে রাখবেনঃ -- **Reducers must be pure.** Similar to [state updater functions](/learn/queueing-a-series-of-state-updates), reducers run during rendering! (Actions are queued until the next render.) This means that reducers [must be pure](/learn/keeping-components-pure)—same inputs always result in the same output. They should not send requests, schedule timeouts, or perform any side effects (operations that impact things outside the component). They should update [objects](/learn/updating-objects-in-state) and [arrays](/learn/updating-arrays-in-state) without mutations. -- **Each action describes a single user interaction, even if that leads to multiple changes in the data.** For example, if a user presses "Reset" on a form with five fields managed by a reducer, it makes more sense to dispatch one `reset_form` action rather than five separate `set_field` actions. If you log every action in a reducer, that log should be clear enough for you to reconstruct what interactions or responses happened in what order. This helps with debugging! +- **Reducer কে অবশই pure হতে হবে।** [state updater ফাংশনের](/learn/queueing-a-series-of-state-updates) মতো, reducer সমূহ রেন্ডারের সময় run করে! (Action সমূহকে পরবর্তী রেন্ডার পর্যন্ত সারিবদ্ধ ভাবে দাঁড় করিয়ে রাখা হয়।) এর মানে, reducer সমূহ [অবশ্যই pure হতে হবে](/learn/keeping-components-pure)—একই input একই output দিবে। সেগুলো যেন কোনো request সেন্ড, timeout ঠিক করা, অথবা কোনো সাইড ইফেক্ট (এমন অপারেশন যেটা কম্পোনেন্টের বাইরের কোনো কিছুর উপর প্রভাব ফেলে) পারফর্ম না করে। সেগুলো যেন [objects](/learn/updating-objects-in-state) এবং [arrays](/learn/updating-arrays-in-state) mutations ছাড়াই আপডেট করে। +- **প্রতিটি action একটি মাত্র user interaction এর বর্ণনা হবে, যদি তার কারণে ডেটাতে একাধিক পরিবর্তন হয় তবুও।** উদাহরণস্বরূপ, যদি একজন ইউজার একটি ফর্মে "Reset" প্রেস করে যে ফর্মের ৫ টি ফিল্ড আছে যেগুলো একটি reducer দ্বারা নিয়ন্ত্রিত, তখন একটি `reset_form` action কে dispatch করাটা পাঁচটি পৃথক `set_field` action dispatch করার থেকে যৌক্তিক। আপনি যদি একটি reducer এ প্রতিটি action log করেন, ঐ log গুলো আপনার জন্যও যথেষ্ট বোধগম্য হওয়ার কথা যাতে কি কি ইন্টার‍্যাকশন বা কি কি রেসপন্স কোনটার পরে কোনটা হয়েছে তা আন্দাজ করতে পারেন। এটা ডিবাগিং এর সময় সাহায্য করে! ## Writing concise reducers with Immer {/*writing-concise-reducers-with-immer*/} From 03312166de6963bbd76d3f02533b126f22096aa0 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 12 Jul 2024 03:38:56 +0600 Subject: [PATCH 18/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translated=2083%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: HabibMollah --- src/content/learn/extracting-state-logic-into-a-reducer.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index a59f838a1..2a59e2b40 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -883,9 +883,9 @@ Reducer লেখার সময় এই দুটি টিপস মনে র - **Reducer কে অবশই pure হতে হবে।** [state updater ফাংশনের](/learn/queueing-a-series-of-state-updates) মতো, reducer সমূহ রেন্ডারের সময় run করে! (Action সমূহকে পরবর্তী রেন্ডার পর্যন্ত সারিবদ্ধ ভাবে দাঁড় করিয়ে রাখা হয়।) এর মানে, reducer সমূহ [অবশ্যই pure হতে হবে](/learn/keeping-components-pure)—একই input একই output দিবে। সেগুলো যেন কোনো request সেন্ড, timeout ঠিক করা, অথবা কোনো সাইড ইফেক্ট (এমন অপারেশন যেটা কম্পোনেন্টের বাইরের কোনো কিছুর উপর প্রভাব ফেলে) পারফর্ম না করে। সেগুলো যেন [objects](/learn/updating-objects-in-state) এবং [arrays](/learn/updating-arrays-in-state) mutations ছাড়াই আপডেট করে। - **প্রতিটি action একটি মাত্র user interaction এর বর্ণনা হবে, যদি তার কারণে ডেটাতে একাধিক পরিবর্তন হয় তবুও।** উদাহরণস্বরূপ, যদি একজন ইউজার একটি ফর্মে "Reset" প্রেস করে যে ফর্মের ৫ টি ফিল্ড আছে যেগুলো একটি reducer দ্বারা নিয়ন্ত্রিত, তখন একটি `reset_form` action কে dispatch করাটা পাঁচটি পৃথক `set_field` action dispatch করার থেকে যৌক্তিক। আপনি যদি একটি reducer এ প্রতিটি action log করেন, ঐ log গুলো আপনার জন্যও যথেষ্ট বোধগম্য হওয়ার কথা যাতে কি কি ইন্টার‍্যাকশন বা কি কি রেসপন্স কোনটার পরে কোনটা হয়েছে তা আন্দাজ করতে পারেন। এটা ডিবাগিং এর সময় সাহায্য করে! -## Writing concise reducers with Immer {/*writing-concise-reducers-with-immer*/} +## Immer দিয়ে সংক্ষেপে reducers লেখা {/*writing-concise-reducers-with-immer*/} -Just like with [updating objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) and [arrays](/learn/updating-arrays-in-state#write-concise-update-logic-with-immer) in regular state, you can use the Immer library to make reducers more concise. Here, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer) lets you mutate the state with `push` or `arr[i] =` assignment: +স্বাভাবিক স্টেটে [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] =` অ্যাসাইনমেন্ট দিয়ে স্টেট আপডেট করতে দিচ্ছে: @@ -1082,7 +1082,7 @@ li { -Reducers must be pure, so they shouldn't mutate state. But Immer provides you with a special `draft` object which is safe to mutate. Under the hood, Immer will create a copy of your state with the changes you made to the `draft`. This is why reducers managed by `useImmerReducer` can mutate their first argument and don't need to return state. +Reducers কে অবশ্যই pure হতে হবে, যেন সেগুলো স্টেটকে mutate না করে। তবে Immer আপনাকে এখানে একটি স্পেশাল `draft` অবজেক্ট দিচ্ছে যেটিকে মিউটেট করা সম্পূর্ণ নিরাপদ। চোখের আড়ালে, Immer আপনার স্টেটের একটি কপি তৈরি করে নিবে যার মধ্যে `draft` এর মধ্যে আপনি যত কিছু পরিবর্তন করেছেন, সব বিদ্যমান থাকবে। এজন্যে `useImmerReducer` দ্বারা নিয়ন্ত্রিত reducers তাদের প্রথম আর্গুমেন্ট মিউটেট করতে পারে এবং তাদের স্টেট রিটার্ন করতে হয়না। From 33999e639d3595bb5150ddda8f03dec6ed217b56 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 12 Jul 2024 04:05:20 +0600 Subject: [PATCH 19/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translated=2085%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: HabibMollah --- .../extracting-state-logic-into-a-reducer.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 2a59e2b40..e59455829 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1086,14 +1086,14 @@ Reducers কে অবশ্যই pure হতে হবে, যেন সেগ -- To convert from `useState` to `useReducer`: - 1. Dispatch actions from event handlers. - 2. Write a reducer function that returns the next state for a given state and action. - 3. Replace `useState` with `useReducer`. -- Reducers require you to write a bit more code, but they help with debugging and testing. -- Reducers must be pure. -- Each action describes a single user interaction. -- Use Immer if you want to write reducers in a mutating style. +- `useState` কে `useReducer` এ পরিবর্তন করতে: + 1. ইভেন্ট হ্যান্ডলারসমূহ থেকে actions ডিসপ্যাচ করুন। + 2. একটি reducer function যেটি প্রদত্ত স্টেটের জন্য পরবর্তী স্টেট রিটার্ন করে এবং action সমূহ লিখুন। + 3. `useState` এর জায়গায় `useReducer` ব্যবহার করুন। +- Reducers এর জন্য আপনার একটু বাড়তি কোড লিখতে হয়, কিন্তু এরা ডিবাগিং এবং টেস্টিং এ সহায়ক। +- Reducers অবশ্যই pure হতে হবে। +- প্রতিটি action একটি মাত্র user interaction এর বর্ণনা হবে। +- Immer ব্যবহার করুন যদি আপনি reducers কে mutating স্টাইলে লিখতে চান। From 46550d3edea8cb998b84917107b19efd072fad3d Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 12 Jul 2024 13:17:57 +0600 Subject: [PATCH 20/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20challenge?= =?UTF-8?q?=201=20of=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../extracting-state-logic-into-a-reducer.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index e59455829..1393bb4f7 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1099,17 +1099,17 @@ Reducers কে অবশ্যই pure হতে হবে, যেন সেগ -#### Dispatch actions from event handlers {/*dispatch-actions-from-event-handlers*/} +#### ইভেন্ট হ্যান্ডলারস থেকে actions কে dispatch করুন {/*dispatch-actions-from-event-handlers*/} -Currently, the event handlers in `ContactList.js` and `Chat.js` have `// TODO` comments. This is why typing into the input doesn't work, and clicking on the buttons doesn't change the selected recipient. +এখানে, `ContactList.js` এবং `Chat.js` এর ইভেন্ট হ্যান্ডলারগুলোতে `// TODO` কমেন্ট করা আছে। এজন্যেই ইনপুটটিতে টাইপ করলে কিছু হচ্ছে না, এবং পাশের বাটন গুলোতে ক্লিক করলে মেসেজ রিসিভার বদলাচ্ছেনা। -Replace these two `// TODO`s with the code to `dispatch` the corresponding actions. To see the expected shape and the type of the actions, check the reducer in `messengerReducer.js`. The reducer is already written so you won't need to change it. You only need to dispatch the actions in `ContactList.js` and `Chat.js`. +এই দুইটি `// TODO` এর জায়গায় নিজ নিজ action গুলো `dispatch` করার কোড লিখুন। action গুলোর কাঙ্ক্ষিত আকৃতি এবং টাইপ জানার জন্য, `messengerReducer.js` এর মধ্যের reducer টি দেখুন। Reducer টি অলরেডি লিখে দেয়া হয়েছে, তাই সেটিতে আপনার কোনো পরিবর্তন আনতে হবেনা। আপনার শুধু `ContactList.js` এবং `Chat.js` এ action গুলো dispatch করতে হবে। -The `dispatch` function is already available in both of these components because it was passed as a prop. So you need to call `dispatch` with the corresponding action object. +`dispatch` ফাংশনটি অলরেডি উভয় কম্পোনেন্টের মধ্যে বিদ্যমান কারণ সেটিকে প্রপ হিসেবে পাঠিয়ে দেয়া হয়েছিলো। তাই আপনার শুধু `dispatch` এর মধ্যে উপযুক্ত অবজেক্ট দিয়ে কল করতে হবে। -To check the action object shape, you can look at the reducer and see which `action` fields it expects to see. For example, the `changed_selection` case in the reducer looks like this: +Action অবজেক্টটির আকৃতি চেক করার জন্য, আপনি reducer টির কোড দেখতে পারেন এবং বুঝতে পারেন কোন কোন `action` ফিল্ড সেটি পেতে পারে। যেমন, reducer এ `changed_selection` case টি এমন দেখা যাচ্ছেঃ ```js case 'changed_selection': { @@ -1120,7 +1120,7 @@ case 'changed_selection': { } ``` -This means that your action object should have a `type: 'changed_selection'`. You also see the `action.contactId` being used, so you need to include a `contactId` property into your action. +এর মানে হচ্ছে আপনার action অবজেক্ট এ `type: 'changed_selection'` থাকতে হবে। আপনি আরও দেখতে পাচ্ছেন যে `action.contactId` এখানে ব্যাবহৃত হচ্ছে, তাই আপনার action অবজেক্ট এ একটি `contactId` প্রপার্টি থাকতে হবে। @@ -1256,7 +1256,7 @@ textarea { -From the reducer code, you can infer that actions need to look like this: +Reducer এর কোড দেখে, আপনি বুঝতে পারেন যে action গুলো দেখতে এমন হতে হবেঃ ```js // When the user presses "Alice" @@ -1272,7 +1272,7 @@ dispatch({ }); ``` -Here is the example updated to dispatch the corresponding messages: +এই হলো আগের উদাহরণের সমাধান। এখানের কোডে উপযুক্ত action গুলো dispatch করা হয়েছে। From a38349ce1d56e8fd10acfd8f6a92851ff3730f19 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 12 Jul 2024 21:54:27 +0600 Subject: [PATCH 21/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20challenge?= =?UTF-8?q?=202=20of=204=20(partial)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/extracting-state-logic-into-a-reducer.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 1393bb4f7..6841a3280 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1101,7 +1101,7 @@ Reducers কে অবশ্যই pure হতে হবে, যেন সেগ #### ইভেন্ট হ্যান্ডলারস থেকে actions কে dispatch করুন {/*dispatch-actions-from-event-handlers*/} -এখানে, `ContactList.js` এবং `Chat.js` এর ইভেন্ট হ্যান্ডলারগুলোতে `// TODO` কমেন্ট করা আছে। এজন্যেই ইনপুটটিতে টাইপ করলে কিছু হচ্ছে না, এবং পাশের বাটন গুলোতে ক্লিক করলে মেসেজ রিসিভার বদলাচ্ছেনা। +এখানে, `ContactList.js` এবং `Chat.js` এর ইভেন্ট হ্যান্ডলারগুলোতে `// TODO` কমেন্ট করা আছে। এজন্যেই ইনপুটটিতে টাইপ করলে কিছু হচ্ছে না, এবং পাশের বাটন গুলোতে ক্লিক করলে মেসেজের প্রাপক বদলাচ্ছেনা। এই দুইটি `// TODO` এর জায়গায় নিজ নিজ action গুলো `dispatch` করার কোড লিখুন। action গুলোর কাঙ্ক্ষিত আকৃতি এবং টাইপ জানার জন্য, `messengerReducer.js` এর মধ্যের reducer টি দেখুন। Reducer টি অলরেডি লিখে দেয়া হয়েছে, তাই সেটিতে আপনার কোনো পরিবর্তন আনতে হবেনা। আপনার শুধু `ContactList.js` এবং `Chat.js` এ action গুলো dispatch করতে হবে। @@ -1411,12 +1411,12 @@ textarea { -#### Clear the input on sending a message {/*clear-the-input-on-sending-a-message*/} +#### Message সেন্ড করার সাথে সাথে ইনপুট ক্লিয়ার করে দিন {/*clear-the-input-on-sending-a-message*/} -Currently, pressing "Send" doesn't do anything. Add an event handler to the "Send" button that will: +এখানে, "Send" প্রেস করলে কিছু হচ্ছেনা। "Send" বাটনে একটি ইভেন্ট হ্যান্ডলার অ্যাড করুন যার মধ্যেঃ -1. Show an `alert` with the recipient's email and the message. -2. Clear the message input. +1. একটি `alert` দেখান যাতে প্রাপকের ইমেইল এবং মেসেজ থাকবে। +2. মেসেজ ইনপুট ক্লিয়ার করে দিন। @@ -1555,7 +1555,7 @@ textarea { -There are a couple of ways you could do it in the "Send" button event handler. One approach is to show an alert and then dispatch an `edited_message` action with an empty `message`: +আপনি "Send" বাটন ইভেন্ট হ্যান্ডলারে এমনটা করার দুটি পদ্ধতি আছে। প্রথম পদ্ধতিটি হলো, একটি alert শো করার পরে, `edited_message` action dispatch করা যেখানে `message` এর ভ্যালু হবে `''` বা ফাঁকা স্ট্রিংঃ @@ -1701,7 +1701,7 @@ textarea { -This works and clears the input when you hit "Send". +এটা কাজ করবে এবং আপনি যখন "Send" করবেন তখন ইনপুট ক্লিয়ার করে দিবে। However, _from the user's perspective_, sending a message is a different action than editing the field. To reflect that, you could instead create a _new_ action called `sent_message`, and handle it separately in the reducer: From 49e88b0bcf511dacbaa68ea885f6c871450beb06 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Fri, 12 Jul 2024 22:28:46 +0600 Subject: [PATCH 22/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20challenge?= =?UTF-8?q?=202=20of=204=20(partial)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 6841a3280..050306bae 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1703,7 +1703,7 @@ textarea { এটা কাজ করবে এবং আপনি যখন "Send" করবেন তখন ইনপুট ক্লিয়ার করে দিবে। -However, _from the user's perspective_, sending a message is a different action than editing the field. To reflect that, you could instead create a _new_ action called `sent_message`, and handle it separately in the reducer: +তবে, _ইউজার এর দৃষ্টিকোণ থেকে_, মেসেজ সেন্ড করাটা ইনপুট ফিল্ড এডিট করার থেকে ভিন্ন একটি action । সে অনুসারে, আপনি `sent_message` নামের একটি _নতুন_ action তৈরি করতে পারেন, এবং সেটিকে reducer এ আলাদাভাবে হ্যান্ডেল করতে পারেন। From f1510dde208745c7c631a3abf5864e4f9c0a304d Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 01:50:00 +0600 Subject: [PATCH 23/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translated=20Challeng?= =?UTF-8?q?e=202=20of=204=20(partial)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: HabibMollah --- src/content/learn/extracting-state-logic-into-a-reducer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 050306bae..3a54bd4ce 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1854,9 +1854,9 @@ textarea { -The resulting behavior is the same. But keep in mind that action types should ideally describe "what the user did" rather than "how you want the state to change". This makes it easier to later add more features. +উভয় পদ্ধতির ফলাফল একই। তবে মনে রাখবেন, নিয়ম হচ্ছে action এর type যেন "আপনি ষ্টেটের পরিবর্তন কিভাবে চান" সেটা প্রকাশ না করে "ইউজার কি করলো" সেটা যেন প্রকাশ করে। এটা পরবর্তীতে আরো ফিচার যোগ করাটা সহজ করবে। -With either solution, it's important that you **don't** place the `alert` inside a reducer. The reducer should be a pure function--it should only calculate the next state. It should not "do" anything, including displaying messages to the user. That should happen in the event handler. (To help catch mistakes like this, React will call your reducers multiple times in Strict Mode. This is why, if you put an alert in a reducer, it fires twice.) +উভয় সমাধানের ক্ষেত্রেই, এটা গুরুত্বপূর্ণ বিষয় যে আপনি `alert` টি কোনো reducer এর ভিতর **রাখবেন না**। The reducer should be a pure function--it should only calculate the next state. It should not "do" anything, including displaying messages to the user. That should happen in the event handler. (To help catch mistakes like this, React will call your reducers multiple times in Strict Mode. This is why, if you put an alert in a reducer, it fires twice.) From 7a255766968f11a3c0a34b7682db8da36dd02fdd Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 02:03:14 +0600 Subject: [PATCH 24/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translated=20Challeng?= =?UTF-8?q?e=202=20of=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 3a54bd4ce..c21a42598 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1856,7 +1856,7 @@ textarea { উভয় পদ্ধতির ফলাফল একই। তবে মনে রাখবেন, নিয়ম হচ্ছে action এর type যেন "আপনি ষ্টেটের পরিবর্তন কিভাবে চান" সেটা প্রকাশ না করে "ইউজার কি করলো" সেটা যেন প্রকাশ করে। এটা পরবর্তীতে আরো ফিচার যোগ করাটা সহজ করবে। -উভয় সমাধানের ক্ষেত্রেই, এটা গুরুত্বপূর্ণ বিষয় যে আপনি `alert` টি কোনো reducer এর ভিতর **রাখবেন না**। The reducer should be a pure function--it should only calculate the next state. It should not "do" anything, including displaying messages to the user. That should happen in the event handler. (To help catch mistakes like this, React will call your reducers multiple times in Strict Mode. This is why, if you put an alert in a reducer, it fires twice.) +উভয় সমাধানের ক্ষেত্রেই, এটা গুরুত্বপূর্ণ বিষয় যে আপনি `alert` টি কোনো reducer এর ভিতর **রাখবেন না**। Reducer হতে হবে একটি pure function--এটার কাজ যেন হয় শুধুই পরবর্তী ষ্টেট নির্ণয় করে। এটা যেন আর কিছুই না "করে", যেমন ইউজার কে কোনো বিজ্ঞপ্তি দেখানো। এসব করতে হবে ইভেন্ট হ্যান্ডলারে। (এই ধরণের ভুল থেকে বাঁচার জন্য, রিয়েক্ট Strict Mode এ আপনার reducer গুলোকে একাধিক বার কল করবে। একারণেই, আপনি যদি reducer এর মধ্যে কোনো alert কল করেন, এটা দুইবার দেখায়।) From 53b068f9d4a8a61b416401e72758880675b4dc6f Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 05:31:25 +0600 Subject: [PATCH 25/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20Challenge?= =?UTF-8?q?=203=20of=204=20(1st=20paragraph)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index c21a42598..6d9a5f1f3 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1860,9 +1860,9 @@ textarea { -#### Restore input values when switching between tabs {/*restore-input-values-when-switching-between-tabs*/} +#### ট্যাব বদলানোর সময় input ভ্যালু ফিরিয়ে আনুন {/*restore-input-values-when-switching-between-tabs*/} -In this example, switching between different recipients always clears the text input: +এই উদাহরণে, প্রাপক একজন থেকে আরেকজনে পরিবর্তন করলে টেক্সট ইনপুট প্রতিবার ফাঁকা হয়ে যায়: ```js case 'changed_selection': { From 702ead0c03508c9bb14dadd92ce9b92b0f13de34 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 05:41:23 +0600 Subject: [PATCH 26/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20Challenge?= =?UTF-8?q?=203=20of=204=20(2nd=20paragraph)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 6d9a5f1f3..bff9b9507 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1873,7 +1873,7 @@ case 'changed_selection': { }; ``` -This is because you don't want to share a single message draft between several recipients. But it would be better if your app "remembered" a draft for each contact separately, restoring them when you switch contacts. +এটা এ কারণে যাতে আপনি একই ড্রাফট মেসেজ একাধিক প্রাপকের সাথে শেয়ার না করেন। তবে এটা আরো সুন্দর হতো যদি আপনার অ্যাপ আলাদা আলাদা করে প্রত্যেক কন্টাক্টের জন্য ড্রাফট "মনে রাখতে পারতো", আর যখন আপনি কন্টাক্ট পরিবর্তন করতেন তখন ড্রাফট ফিরিয়ে আনতো। Your task is to change the way the state is structured so that you remember a separate message draft _per contact_. You would need to make a few changes to the reducer, the initial state, and the components. From c272431c7cf0576e6f73b117914dc494008da4b6 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 05:49:17 +0600 Subject: [PATCH 27/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20Challenge?= =?UTF-8?q?=203=20of=204=20(3rd=20paragraph)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index bff9b9507..fd2ed064b 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1875,7 +1875,7 @@ case 'changed_selection': { এটা এ কারণে যাতে আপনি একই ড্রাফট মেসেজ একাধিক প্রাপকের সাথে শেয়ার না করেন। তবে এটা আরো সুন্দর হতো যদি আপনার অ্যাপ আলাদা আলাদা করে প্রত্যেক কন্টাক্টের জন্য ড্রাফট "মনে রাখতে পারতো", আর যখন আপনি কন্টাক্ট পরিবর্তন করতেন তখন ড্রাফট ফিরিয়ে আনতো। -Your task is to change the way the state is structured so that you remember a separate message draft _per contact_. You would need to make a few changes to the reducer, the initial state, and the components. +আপনার কাজ হলো এখানে ষ্টেটকে যে গঠন দেয়া হয়েছে তা পরিবর্তন করা যাতে আপনি _পৃথক কন্টাক্টের_ জন্য পৃথক ড্রাফট মনে রাখতে পারেন। আপনার reducer, initial state এবং কম্পোনেন্টগুলোর কোডে কিছু পরিবর্তন আনতে হবে। From 1d0d10ea61161f38fec9a670a40b5aec21a35983 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 05:56:07 +0600 Subject: [PATCH 28/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20Challenge?= =?UTF-8?q?=203=20of=204=20(hint)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index fd2ed064b..0c41d168b 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -1879,7 +1879,7 @@ case 'changed_selection': { -You can structure your state like this: +আপনার স্টেটের গঠনকে এমন করতে পারেন: ```js export const initialState = { @@ -1891,7 +1891,7 @@ export const initialState = { }; ``` -The `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names) syntax can help you update the `messages` object: +এখানের `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names) সিনট্যাক্স আপনাকে `messages` অবজেক্টকে আপডেট করতে সাহায্য করতে পারে: ```js { From 5008d6cbf8e328f12c44fc8dad5606843b78cea7 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 06:52:55 +0600 Subject: [PATCH 29/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20Challenge?= =?UTF-8?q?=203=20of=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn/extracting-state-logic-into-a-reducer.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 0c41d168b..76d248439 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -2053,7 +2053,7 @@ textarea { -You'll need to update the reducer to store and update a separate message draft per contact: +আপনাকে reducer টিতে পরিবর্তন আনতে হবে যাতে আপনি আলাদা আলাদা কন্টাক্টের জন্য আলাদা আলাদা ভাবে ড্রাফট মেসেজ স্টোর এবং আপডেট করতে পারেনঃ ```js // When the input is edited @@ -2071,13 +2071,13 @@ case 'edited_message': { } ``` -You would also update the `Messenger` component to read the message for the currently selected contact: +আপনাকে আরো পরিবর্তন আনতে হবে `Messenger` কম্পোনেন্টটিতে যাতে আপনি বর্তমানে সিলেক্টেড কন্টাক্টটির মেসেজ রিড করতে পারেনঃ ```js const message = state.messages[state.selectedId]; ``` -Here is the complete solution: +এখানে পূর্ণাঙ্গ সমাধান দেয়া হলোঃ @@ -2237,7 +2237,7 @@ textarea { -Notably, you didn't need to change any of the event handlers to implement this different behavior. Without a reducer, you would have to change every event handler that updates the state. +উল্লেখ্য, এই নতুন ফিচারটি বাস্তবায়ন করতে আপনাকে কোনো ইভেন্ট হ্যান্ডলারে পরিবর্তন আনতে হবে না। Reducer না হলে আপনাকে, স্টেট আপডেট করে এমন প্রতিটি ইভেন্ট হ্যান্ডলারে পরিবর্তন আনতে হতো। From b71edb6112c7a8498452844c399cf3f81cced45e Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 07:05:42 +0600 Subject: [PATCH 30/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20Challenge?= =?UTF-8?q?=204=20of=204=20(question)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 76d248439..2e297b21f 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -2241,11 +2241,11 @@ textarea { -#### Implement `useReducer` from scratch {/*implement-usereducer-from-scratch*/} +#### একদম শূন্য থেকে `useReducer` ব্যাবহার করুন {/*implement-usereducer-from-scratch*/} -In the earlier examples, you imported the `useReducer` Hook from React. This time, you will implement _the `useReducer` Hook itself!_ Here is a stub to get you started. It shouldn't take more than 10 lines of code. +পূর্ববর্তী উদাহরণগুলোতে, আপনি React থেকে `useReducer` হুক ইমপোর্ট করেছিলেন। এবার, আপনি নিজেই _গোটা `useReducer` হুকটা_ তৈরি করবেন! নিচে আপনার শুরু করার জন্য কিছু কোড দেয়া হলো। এটা সমাধান করতে আপনার ১০ লাইনের বেশি কোড লাগার কথা না। -To test your changes, try typing into the input or select a contact. +আপনার সমাধান টেস্ট করতে, ইনপুটে টাইপ করার চেষ্টা করুন অথবা কোনো একটি কন্টাক্ট সিলেক্ট করুন। From ab74ab4d99a44cb08953dc57af0e9ff53fc09b2e Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 18:03:33 +0600 Subject: [PATCH 31/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20Challenge?= =?UTF-8?q?=204=20of=204=20(hint)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 2e297b21f..3ff409ea5 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -2249,7 +2249,7 @@ textarea { -Here is a more detailed sketch of the implementation: +এটা কিভাবে সমাধান করবেন তার নকশাটা দেখানো হলোঃ ```js export function useReducer(reducer, initialState) { @@ -2263,7 +2263,7 @@ export function useReducer(reducer, initialState) { } ``` -Recall that a reducer function takes two arguments--the current state and the action object--and it returns the next state. What should your `dispatch` implementation do with it? +মনে করার চেষ্টা করুন যে একটি reducer ফাংশন দুটি আর্গুমেন্ট গ্রহণ করে--বর্তমান স্টেট এবং action অবজেক্ট--এবং এটা পরবর্তী স্টেটকে রিটার্ন করে। আপনার তৈরি করা `dispatch` ফাংশন কিভাবে এটাকে কাজে লাগাতে পারে? From 31f75927b0546a5b3f8ef8c7b6ddf91da0e6c2e8 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 18:17:30 +0600 Subject: [PATCH 32/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20100%=20(C?= =?UTF-8?q?hallenge=204=20of=204)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/extracting-state-logic-into-a-reducer.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 3ff409ea5..088b31ad2 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -2439,7 +2439,7 @@ textarea { -Dispatching an action calls a reducer with the current state and the action, and stores the result as the next state. This is what it looks like in code: +একটি action কে dispatch করলে তা বর্তমান স্টেট এবং action টি নিয়ে reducer কে কল করে, এবং প্রাপ্ত ফলাফলটিকে পরবর্তী স্টেট হিসেবে ব্যাবহার করে। কোডে এটা এমন দেখাবেঃ @@ -2614,7 +2614,7 @@ textarea { -Though it doesn't matter in most cases, a slightly more accurate implementation looks like this: +যদিও অধিকাংশ ক্ষেত্রে তেমন কিছু আসে যায় না, তবে এর আরেকটু সঠিক সমাধান হবেঃ ```js function dispatch(action) { @@ -2622,7 +2622,7 @@ function dispatch(action) { } ``` -This is because the dispatched actions are queued until the next render, [similar to the updater functions.](/learn/queueing-a-series-of-state-updates) +এর কারণ dispatch করা action গুলো পরবর্তী রেন্ডার পর্যন্ত সারিবদ্ধভাবে দাঁড় করিয়ে রাখা হয়, [updater functions এর মতো।](/learn/queueing-a-series-of-state-updates) From 826fb5c21048d7662a05985097c16923d454c366 Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 18:35:37 +0600 Subject: [PATCH 33/35] =?UTF-8?q?fix:=20=E2=9C=A8=20update=20colons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../extracting-state-logic-into-a-reducer.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index 088b31ad2..8e1fbfe90 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/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 এর ব্যবহার করেঃ @@ -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({ -### ধাপ ২: একটি 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 ফাংশনটি পাস করতে হবেঃ @@ -457,21 +457,21 @@ export default function tasksReducer(tasks, action) { -### ধাপ ৩: আপনার কম্পোনেন্টে 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); @@ -479,17 +479,17 @@ 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 করা হয়েছেঃ @@ -674,7 +674,7 @@ li { -যদি চান, তাহলে আপনি reducer টিকে ভিন্ন আরেকটি ফাইলেও নিতে পারেন: +যদি চান, তাহলে আপনি reducer টিকে ভিন্ন আরেকটি ফাইলেও নিতে পারেনঃ @@ -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] =` অ্যাসাইনমেন্ট দিয়ে স্টেট আপডেট করতে দিচ্ছেঃ @@ -1086,7 +1086,7 @@ Reducers কে অবশ্যই pure হতে হবে, যেন সেগ -- `useState` কে `useReducer` এ পরিবর্তন করতে: +- `useState` কে `useReducer` এ পরিবর্তন করতেঃ 1. ইভেন্ট হ্যান্ডলারসমূহ থেকে actions ডিসপ্যাচ করুন। 2. একটি reducer function যেটি প্রদত্ত স্টেটের জন্য পরবর্তী স্টেট রিটার্ন করে এবং action সমূহ লিখুন। 3. `useState` এর জায়গায় `useReducer` ব্যবহার করুন। From c0f49e3c157e4a332b12f5abab83f41cc241702e Mon Sep 17 00:00:00 2001 From: HabibMollah Date: Tue, 16 Jul 2024 19:54:15 +0600 Subject: [PATCH 34/35] =?UTF-8?q?feat:=20=E2=9C=A8=20Translate=20Challenge?= =?UTF-8?q?=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MDX/Challenges/Challenge.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/MDX/Challenges/Challenge.tsx b/src/components/MDX/Challenges/Challenge.tsx index e54bf920a..ed28b4084 100644 --- a/src/components/MDX/Challenges/Challenge.tsx +++ b/src/components/MDX/Challenges/Challenge.tsx @@ -50,7 +50,7 @@ export function Challenge({ className="text-xl text-primary dark:text-primary-dark mb-2 mt-0 font-medium" id={currentChallenge.id}>
- {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '} + {isRecipes ? 'উদাহরণ' : 'চ্যালেঞ্জ'} {currentChallenge.order} /{' '} {totalChallenges} :
@@ -63,14 +63,14 @@ export function Challenge({
) : ( @@ -80,7 +80,7 @@ export function Challenge({ onClick={toggleSolution} active={showSolution}> {' '} - {showSolution ? 'Hide solution' : 'Show solution'} + {showSolution ? 'সমাধান লুকান' : 'সমাধান দেখুন'} ) )} @@ -94,7 +94,7 @@ export function Challenge({ )} onClick={handleClickNextChallenge} active> - Next {isRecipes ? 'Example' : 'Challenge'} + পরবর্তী {isRecipes ? 'উদাহরণ' : 'চ্যালেঞ্জ'} )} @@ -104,13 +104,11 @@ export function Challenge({ {showSolution && (

- Solution + সমাধান

{currentChallenge.solution}
- + {hasNextChallenge && (