From e4d2b92c9e1a83a4b3dfac4494666f09ee1489a3 Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Sun, 24 Sep 2023 08:45:42 +0600 Subject: [PATCH 01/13] feat: translate intro of scaling up with reducer and context page --- src/content/learn/scaling-up-with-reducer-and-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 0281afcec..1a35339dd 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -4,7 +4,7 @@ title: Scaling Up with Reducer and Context -Reducers let you consolidate a component's state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen. +Reducers একটি কম্পোনেন্টের state আপডেট লজিক সংক্ষেপণ করতে সাহায্য করে। Context আপনাকে তথ্য অন্যান্য কম্পোনেন্টগুলির গভীরে পাঠানোর সুযোগ দেয়। আপনি reducers এবং context দুটি একসাথে সংমিলিত করে একটি জটিল স্ক্রিনের state ব্যবস্থাপনা করতে পারেন । From fa294377cacc33cb8f32af0ae3c26dd7ad8c0561 Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Mon, 25 Sep 2023 19:27:39 +0600 Subject: [PATCH 02/13] feat: translate what you will learn and combine reducer with context section --- .../learn/scaling-up-with-reducer-and-context.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 1a35339dd..0330ed5e1 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -10,16 +10,18 @@ Reducers একটি কম্পোনেন্টের state আপডেট -* How to combine a reducer with context -* How to avoid passing state and dispatch through props -* How to keep context and state logic in a separate file +* কিভাবে reducer কে context এর সাথে সংযুক্ত করতে হয় +* কিভাবে state এবং dispatch কে props এর মাধ্যমে পাঠানো থেকে বিরত থাকা যায় +* কিভাবে context এবং state এর যুক্তিকে ভিন্ন ফাইলে রাখা যায় -## Combining a reducer with context {/*combining-a-reducer-with-context*/} +## Context এর সাথে reducer এর সংযুক্তি {/*combining-a-reducer-with-context*/} In this example from [the introduction to reducers](/learn/extracting-state-logic-into-a-reducer), the state is managed by a reducer. The reducer function contains all of the state update logic and is declared at the bottom of this file: +[Reducers এর সাথে পরিচিতি](/learn/extracting-state-logic-into-a-reducer) এই উদাহরণে, state কে reducer ব্যবস্থাপনা করেছে । Reducer ফাংশনটি সকল state হালানাগাদ যুক্তিসমূহ ধারন করে এবং একে ফাইলের একদম শেষে ডিক্লেয়ার করা হয় । + ```js App.js From a92e8e44021cde04f014f7f6c6cdd679a88dae38 Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Mon, 25 Sep 2023 19:50:12 +0600 Subject: [PATCH 03/13] feat: translate middle section paragraph of combining reducer with context --- .../learn/scaling-up-with-reducer-and-context.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 0330ed5e1..2457b9245 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -10,16 +10,14 @@ Reducers একটি কম্পোনেন্টের state আপডেট -* কিভাবে reducer কে context এর সাথে সংযুক্ত করতে হয় -* কিভাবে state এবং dispatch কে props এর মাধ্যমে পাঠানো থেকে বিরত থাকা যায় -* কিভাবে context এবং state এর যুক্তিকে ভিন্ন ফাইলে রাখা যায় +* কিভাবে reducer কে context এর সাথে সংযুক্ত করতে হয় । +* কিভাবে state এবং dispatch কে props এর মাধ্যমে পাঠানো থেকে বিরত থাকা যায় । +* কিভাবে context এবং state এর যুক্তিকে ভিন্ন ফাইলে রাখা যায় । ## Context এর সাথে reducer এর সংযুক্তি {/*combining-a-reducer-with-context*/} -In this example from [the introduction to reducers](/learn/extracting-state-logic-into-a-reducer), the state is managed by a reducer. The reducer function contains all of the state update logic and is declared at the bottom of this file: - [Reducers এর সাথে পরিচিতি](/learn/extracting-state-logic-into-a-reducer) এই উদাহরণে, state কে reducer ব্যবস্থাপনা করেছে । Reducer ফাংশনটি সকল state হালানাগাদ যুক্তিসমূহ ধারন করে এবং একে ফাইলের একদম শেষে ডিক্লেয়ার করা হয় । @@ -209,9 +207,9 @@ ul, li { margin: 0; padding: 0; } -A reducer helps keep the event handlers short and concise. However, as your app grows, you might run into another difficulty. **Currently, the `tasks` state and the `dispatch` function are only available in the top-level `TaskApp` component.** To let other components read the list of tasks or change it, you have to explicitly [pass down](/learn/passing-props-to-a-component) the current state and the event handlers that change it as props. +একটি Reducer ইভেন্ট হ্যান্ডলারগুলি ছোট এবং সংক্ষিপ্ত রাখতে সাহায্য করে । তবে, আপনার অ্যাপ্লিকেশন বাড়তে শুরু করলে, আপনি আরও একটি সমস্যায় পরে যেতে পারেন । **বর্তমানে, `tasks` state এবং `dispatch` ফাংশনটি শুধুমাত্র শীর্ষ-স্তরের `TaskApp` কম্পোনেন্টে উপলব্ধ রয়েছে।** অন্য কম্পোনেন্টগুলিকে টাস্কের তালিকা পড়তে অথবা তা পরিবর্তন করতে দিতে হলে, আপনাকে বর্তমান state এবং তা পরিবর্তন করার ইভেন্ট হ্যান্ডলারগুলি স্পষ্টভাবে props হিসেবে [পাঠাতে](/learn/passing-props-to-a-component) হবে। -For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`: +উদাহরণস্বরূপ, `TaskApp` টাস্কের তালিকা এবং ইভেন্ট হ্যান্ডলারগুলি `TaskList` এ পাঠিয়ে দেয়: ```js ``` -And `TaskList` passes the event handlers to `Task`: +এবং `TaskList` ইভেন্ট হ্যান্ডলারগুলোকে `Task` এ পাঠিয়ে দেয়ঃ ```js Date: Sun, 1 Oct 2023 07:38:49 +0600 Subject: [PATCH 04/13] feat: translate upto step 2 of combining context with reducer. --- .../scaling-up-with-reducer-and-context.md | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 2457b9245..bb19033ff 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -229,30 +229,30 @@ ul, li { margin: 0; padding: 0; } /> ``` -In a small example like this, this works well, but if you have tens or hundreds of components in the middle, passing down all state and functions can be quite frustrating! +একটি ছোট উদাহরনে এটি ভালো কাজ করে, কিন্তু যদি এর মাঝে আপনার দশ বা শতাধিক কম্পোনেন্ট থাকে, তাহলে সকল state এবং ফাংশনগুলিকে পাঠানো অনেক বিরক্তিকর হতে পারে । -This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context.](/learn/passing-data-deeply-with-context) **This way, any component below `TaskApp` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".** +এই কারনে, props এর মাধমে পাঠানোর বিকল্প হিসেবে, আপনি সমস্ত `tasks` স্টেট এবং `dispatch` ফাংশনকে [context এর মধ্যে](/learn/passing-data-deeply-with-context) রাখতে পারেন । **এইভাবে, `TaskApp` এর নীচে যেকোনো কম্পোনেন্ট রুটে আপনি "prop drilling" এর পুনরাবৃত্তি ছাড়াই task পড়তে এবং একশনগুলিকে dispatch করতে পারবেন ।** -Here is how you can combine a reducer with context: +যেভাবে আপনি reducer এবং context এর সংযুক্তি করতে পারেনঃ +1. Context **তৈরি** করুন। +2. state এবং dispatch কে Context এর ভেতরে **রাখুন**। +3. Context কে যেকোনো কম্পোনেন্ট রুটে **ব্যবহার** করুন। -1. **Create** the context. -2. **Put** state and dispatch into context. -3. **Use** context anywhere in the tree. +### ধাপ ১: Context তৈরি করুন {/*step-1-create-the-context*/} -### Step 1: Create the context {/*step-1-create-the-context*/} - -The `useReducer` Hook returns the current `tasks` and the `dispatch` function that lets you update them: +`useReducer` হুক আপনাকে বর্তমান `tasks` এবং তা আপডেট করার জন্য `dispatch` ফাংশনকে রিটার্ন করে । ```js const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); ``` To pass them down the tree, you will [create](/learn/passing-data-deeply-with-context#step-2-use-the-context) two separate contexts: +তাদেরকে ট্রি-এর নিচে পাঠানোর জন্য আপনি দুটি ভিন্ন context [তৈরি](/learn/passing-data-deeply-with-context#step-2-use-the-context) করবেন । -- `TasksContext` provides the current list of tasks. -- `TasksDispatchContext` provides the function that lets components dispatch actions. +- `TasksContext` বর্তমান tasks তালিকা প্রদান করে । +- `TasksDispatchContext` একটি ফাংশন প্রদান করে যা কম্পোনেন্টগুলিকে একশনগুলি dispatch করতে দেয় । -Export them from a separate file so that you can later import them from other files: +এদেরকে একটি আলাদা ফাইলে এক্সপোর্ট করুন যাতে আপনি পরবর্তিতে অন্য ফাইলে ইম্পোর্ট করতে পারেন: @@ -448,7 +448,8 @@ ul, li { margin: 0; padding: 0; } -Here, you're passing `null` as the default value to both contexts. The actual values will be provided by the `TaskApp` component. +এখানে আপনি `null` কে ডিফল্ট মান হিসেবে দুটি context এ পাঠাচ্ছেন । আসল মানগুলি `TaskApp` এর মাধ্যমে সরাসরি প্রদান হবে । + ### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/} From c928071a73635b988f1bfcda56b5bdc9c670368d Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Fri, 6 Oct 2023 08:19:27 +0600 Subject: [PATCH 05/13] feat: translate step 2 of scaling up with reducer and context page --- src/content/learn/scaling-up-with-reducer-and-context.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index bb19033ff..cf13763a8 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -451,9 +451,9 @@ ul, li { margin: 0; padding: 0; } এখানে আপনি `null` কে ডিফল্ট মান হিসেবে দুটি context এ পাঠাচ্ছেন । আসল মানগুলি `TaskApp` এর মাধ্যমে সরাসরি প্রদান হবে । -### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/} +### ধাপ ২: State এবং dispatch কে context এর ভেতরে রাখুন {/*step-2-put-state-and-dispatch-into-context*/} -Now you can import both contexts in your `TaskApp` component. Take the `tasks` and `dispatch` returned by `useReducer()` and [provide them](/learn/passing-data-deeply-with-context#step-3-provide-the-context) to the entire tree below: +এখন আপনি দুটো context কে `TaskApp` কম্পোনেন্টে ইম্পোর্ট করতে পারেন । `useReducer()` এর রিটার্ন করা `tasks` এবং `dispatch` কে গ্রহণ করুন এবং এদেরকে নিচের সম্পূর্ন ট্রিতে [প্রদান করুন](/learn/passing-data-deeply-with-context#step-3-provide-the-context): ```js {4,7-8} import { TasksContext, TasksDispatchContext } from './TasksContext.js'; @@ -471,7 +471,7 @@ export default function TaskApp() { } ``` -For now, you pass the information both via props and in context: +এখন, আপনি তথ্যকে props এবং context উভয়ের মাধ্যমে পাঠাতে পারবেনঃ @@ -670,7 +670,7 @@ ul, li { margin: 0; padding: 0; } -In the next step, you will remove prop passing. +পরবর্তী ধাপে, আপনি prop পাঠানো মুছে ফেলবেন । ### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/} From b416a8a2155a1304f17d1900f3896eff089dd558 Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Sat, 14 Oct 2023 07:34:21 +0600 Subject: [PATCH 06/13] feat: translate step 3 of the scaling up with reducer and context page --- .../learn/scaling-up-with-reducer-and-context.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index cf13763a8..b54348e50 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -672,9 +672,9 @@ ul, li { margin: 0; padding: 0; } পরবর্তী ধাপে, আপনি prop পাঠানো মুছে ফেলবেন । -### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/} +### ধাপ ৩: ট্রি এর যেকোনো জায়গায় context ব্যবহার করুন {/*step-3-use-context-anywhere-in-the-tree*/} -Now you don't need to pass the list of tasks or the event handlers down the tree: +এখন আপনাকে আর task এর তালিকা অথবা event handlers কে ট্রি এর নিচে পাঠাতে হবেনা : ```js {4-5} @@ -686,7 +686,7 @@ Now you don't need to pass the list of tasks or the event handlers down the tree ``` -Instead, any component that needs the task list can read it from the `TaskContext`: +এর পরিবর্তে যেকোনো কম্পোনেন্ট যার task তালিকা দরকার হবে সে তা `TaskContext` থেকে পড়তে পারবে । ```js {2} export default function TaskList() { @@ -694,7 +694,7 @@ export default function TaskList() { // ... ``` -To update the task list, any component can read the `dispatch` function from context and call it: +Task তালিকা হালনাগাদ করার জন্য যেকোনো কম্পোনেন্ট `dispatch` ফাংশনকে context থেকে পড়তে পারেন এবং call করতে পারেন । ```js {3,9-13} export default function AddTask() { @@ -714,7 +714,8 @@ export default function AddTask() { // ... ``` -**The `TaskApp` component does not pass any event handlers down, and the `TaskList` does not pass any event handlers to the `Task` component either.** Each component reads the context that it needs: +**`TaskApp` কম্পোনেন্ট কোনো event handlers কে নিচে পাঠায় না এবং `TaskList` কোনো event handlers কে `Task` কম্পোনেন্টেও পাঠায় না ।** প্রতিটা কম্পোনেন্ট তার প্রয়োজনীয় context কে পড়েঃ + @@ -898,7 +899,7 @@ ul, li { margin: 0; padding: 0; } -**The state still "lives" in the top-level `TaskApp` component, managed with `useReducer`.** But its `tasks` and `dispatch` are now available to every component below in the tree by importing and using these contexts. +**State টি এখনো টপ-লেভেল `TaskApp` কম্পোনেন্টেই অবস্থান করছে, `useReducer` এর ব্যবস্থাপনায়।** কিন্তু এর `tasks` এবং `dispatch` এখন ট্রিয়ের নিচের প্রতিটি কম্পোনেন্ট পাওয়া যাবে ইম্পোর্টিং এবং এই context গুলিকে ব্যবহারের মাধ্যমে। ## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/} From 5c5a25a2379f2a64d049839a3850e82fa2d5f5df Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Fri, 20 Oct 2023 10:23:08 +0600 Subject: [PATCH 07/13] feat: translate the remaining part of scaling up with reducer and context page --- .../scaling-up-with-reducer-and-context.md | 54 +++++++++++-------- 1 file changed, 31 insertions(+), 23 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index b54348e50..94232af82 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -246,7 +246,6 @@ ul, li { margin: 0; padding: 0; } const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); ``` -To pass them down the tree, you will [create](/learn/passing-data-deeply-with-context#step-2-use-the-context) two separate contexts: তাদেরকে ট্রি-এর নিচে পাঠানোর জন্য আপনি দুটি ভিন্ন context [তৈরি](/learn/passing-data-deeply-with-context#step-2-use-the-context) করবেন । - `TasksContext` বর্তমান tasks তালিকা প্রদান করে । @@ -901,9 +900,10 @@ ul, li { margin: 0; padding: 0; } **State টি এখনো টপ-লেভেল `TaskApp` কম্পোনেন্টেই অবস্থান করছে, `useReducer` এর ব্যবস্থাপনায়।** কিন্তু এর `tasks` এবং `dispatch` এখন ট্রিয়ের নিচের প্রতিটি কম্পোনেন্ট পাওয়া যাবে ইম্পোর্টিং এবং এই context গুলিকে ব্যবহারের মাধ্যমে। -## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/} -You don't have to do this, but you could further declutter the components by moving both reducer and context into a single file. Currently, `TasksContext.js` contains only two context declarations: +## সকল সংযোগসমূহকে একটি ফাইলে সরানো {/*moving-all-wiring-into-a-single-file*/} + +আপনার এটি করার দরকার নেই, কিন্তু আপনি কম্পোনেন্টগুলিকে আরো সাজানোর জন্য reducer এবং context উভয়কেই একটি ফাইলে সরিয়ে নিতে পারেন। বর্তমানে, `TaskContext.js` এ কেবল দুটি context ডিক্লেয়ারেশন রয়েছেঃ ```js import { createContext } from 'react'; @@ -912,11 +912,12 @@ export const TasksContext = createContext(null); export const TasksDispatchContext = createContext(null); ``` -This file is about to get crowded! You'll move the reducer into that same file. Then you'll declare a new `TasksProvider` component in the same file. This component will tie all the pieces together: -1. It will manage the state with a reducer. -2. It will provide both contexts to components below. -3. It will [take `children` as a prop](/learn/passing-props-to-a-component#passing-jsx-as-children) so you can pass JSX to it. +এই ফাইলটিতে এখন জটলা বেঁধে যাবে! আপনি reducer কে একই ফাইলে সরাবেন। এরপর আপনি একটি নতুন `TaskProvider` কম্পোনেন্ট একই ফাইলে ডিক্লেয়ার করবেন। এই কম্পোনেন্ট সকল অংশকে একীভূত করবে। + +1. এটি state কে reducer দিয়ে পরিচালনা করবে । +2. এটি উভয় context কে নিচের কম্পোনেন্টে পাঠাবে । +3. এটি [`children` কে prop হিসেবে নেয়](/learn/passing-props-to-a-component#passing-jsx-as-children) যাতে আপনি এতে JSX পাঠাতে পারেন। ```js export function TasksProvider({ children }) { @@ -932,7 +933,8 @@ export function TasksProvider({ children }) { } ``` -**This removes all the complexity and wiring from your `TaskApp` component:** +**এটি আপনার `TaskApp` থেকে সকল জটিলতা এবং সংযোগকে সরিয়ে দেয় :** + @@ -1123,7 +1125,8 @@ ul, li { margin: 0; padding: 0; } -You can also export functions that _use_ the context from `TasksContext.js`: + +আপনি ফাংশনগুলি এক্সপোর্টও করতে পারেন যেটা `TasksContext.js` এর context কে _ব্যবহার_ করেন ঃ ```js export function useTasks() { @@ -1135,14 +1138,14 @@ export function useTasksDispatch() { } ``` -When a component needs to read context, it can do it through these functions: +যখন একটি কম্পোনেন্ট এর context পড়ার প্রয়োজন হয়, এটি ফাংশনের মাধ্যমে তা করতে পারে ঃ ```js const tasks = useTasks(); const dispatch = useTasksDispatch(); ``` -This doesn't change the behavior in any way, but it lets you later split these contexts further or add some logic to these functions. **Now all of the context and reducer wiring is in `TasksContext.js`. This keeps the components clean and uncluttered, focused on what they display rather than where they get the data:** +এটি আচরণকে কোনোভাবেই পরিবর্তন করেনা, কিন্তু এটি আপনাকে পরবর্তীতে এই context গুলিকে ভাগ করতে দেয় অথবা কিছু যুক্তি যোগ করতে দেয় এই ফাংশগুলিতে। **এখন সকল context এবং reducer সংযোগসমূহ `TasksContext.js` এ আছে। এটি কম্পোনেন্টগুলিকে পরিচ্ছন্ন এবং গোছানো রাখে,কোথায় থেকে ডেটা পাচ্ছে তা নয় বরং তারা কি প্রদর্শন করে তাতে মনোযোগ দেয়ঃ** @@ -1342,27 +1345,32 @@ ul, li { margin: 0; padding: 0; } -You can think of `TasksProvider` as a part of the screen that knows how to deal with tasks, `useTasks` as a way to read them, and `useTasksDispatch` as a way to update them from any component below in the tree. + +আপনি `TasksProvider` কে স্ক্রীন এর একটি অংশ হিসেবে চিন্তা করতে পারেন যে জানে কিভাবে tasks এর সাথে আচরন করতে হয়, `useTasks` এদেরকে পড়ার একটি উপায় এবং `useDispatch` তাদেরকে ট্রি এর নিচের যেকোন কম্পোনেন্ট থেকে আপডেট করার একটি উপায়। -Functions like `useTasks` and `useTasksDispatch` are called *[Custom Hooks.](/learn/reusing-logic-with-custom-hooks)* Your function is considered a custom Hook if its name starts with `use`. This lets you use other Hooks, like `useContext`, inside it. +`useTasks` এবং `useTasksDispatch` এর মত ফাংশনগুলি *[কাস্টম হুক](/learn/reusing-logic-with-custom-hooks)* হিসেবে চিহ্নিত হয়। আপনার ফাংশনটির নাম যদি use দিয়ে শুরু হয় তবে তা একটি কাস্টম হুক হিসেবে বিবেচিত হয়। এটি আপনাকে এর মধ্যে অন্য হুক ব্যবহার করতে দেয় যেমন `useContext`. -As your app grows, you may have many context-reducer pairs like this. This is a powerful way to scale your app and [lift state up](/learn/sharing-state-between-components) without too much work whenever you want to access the data deep in the tree. +যখন আপনার অ্যাপ্লিকেশন বাড়তে থাকে, আপনার এরকম অনেক context-reducer জোড়া থাকতে পারে। এটি আপনার অ্যাপ্লিকেশন স্কেল করার একটি শক্তিশালী উপায় এবং আপনি যখনই ট্রির গভীরে ডেটা অ্যাক্সেস করতে চান তখন অধিক কাজ না করেই স্টেট [উঠাতে পারে](/learn/sharing-state-between-components)। -- You can combine reducer with context to let any component read and update state above it. -- To provide state and the dispatch function to components below: - 1. Create two contexts (for state and for dispatch functions). - 2. Provide both contexts from the component that uses the reducer. - 3. Use either context from components that need to read them. -- You can further declutter the components by moving all wiring into one file. - - You can export a component like `TasksProvider` that provides context. - - You can also export custom Hooks like `useTasks` and `useTasksDispatch` to read it. -- You can have many context-reducer pairs like this in your app. + +- আপনি Reducer সঙ্গে context যোগ করে যেকোনো কোম্পোনেন্টকে এর উপরের state পড়তে এবং আপডেট করতে দিতে পারেন। + +- state এবং dispatch ফাংশনকে নীচের কোম্পোনেন্টগুলিকে প্রদান করতে: + 1. দুটি কনটেক্সট তৈরি করুন (state এবং dispatch ফাংশনের জন্য)। + 2. যে কোম্পোনেন্ট রিডিউসারটি ব্যবহার করে, তার থেকে উভয় কনটেক্সট প্রদান করুন। + 3. যে কোম্পোনেন্ট এর তাদের পড়ার দরকার সেগুলি থেকে যেকোনো কনটেক্সট ব্যবহার করুন। + +- আপনি কম্পোনেন্টগুলিকে আরো গোছাতে পারেন এদেরকে একটি ফাইলে সরিয়ে ফেলার মাধ্যমে। + - আপনি `TasksProvider` এর মতো কম্পোনেন্টকে এক্সপোর্ট করতে পারেন যারা context প্রদান করেন। + - আপনি `useTasks` এবং `useTasksDispatch` এর মতো কাস্টম হুকগিলে এক্সপোর্ট করতে পারেন পড়ার জন্য। + - আপনি অনেকগুলি context-reducer জোড়া রাখতে পারেন আপনার app এ। + From 096b50cdd7766bed8dbc1a35433bfc7f8e60699e Mon Sep 17 00:00:00 2001 From: Shahriar Rumel <71602274+Shahriar-Rumel@users.noreply.github.com> Date: Fri, 20 Oct 2023 21:42:13 +0600 Subject: [PATCH 08/13] feat: update src/content/learn/scaling-up-with-reducer-and-context.md Co-authored-by: Nafis Tiham --- src/content/learn/scaling-up-with-reducer-and-context.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 94232af82..47a397098 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -4,7 +4,7 @@ title: Scaling Up with Reducer and Context -Reducers একটি কম্পোনেন্টের state আপডেট লজিক সংক্ষেপণ করতে সাহায্য করে। Context আপনাকে তথ্য অন্যান্য কম্পোনেন্টগুলির গভীরে পাঠানোর সুযোগ দেয়। আপনি reducers এবং context দুটি একসাথে সংমিলিত করে একটি জটিল স্ক্রিনের state ব্যবস্থাপনা করতে পারেন । +Reducers একটি কম্পোনেন্টের state আপডেট লজিক সংক্ষেপণ করতে সাহায্য করে। Context আপনাকে অন্যান্য কম্পোনেন্টের গভীরে তথ্য পাঠানোর সুযোগ দেয়। আপনি reducers এবং context দুটি একসাথে সংমিলিত করে একটি জটিল স্ক্রিনের state ব্যবস্থাপনা করতে পারেন । From a95c31046bf812f73abad3a41d693c0397749524 Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Sat, 21 Oct 2023 12:44:09 +0600 Subject: [PATCH 09/13] fix: remove extra spaces --- .../scaling-up-with-reducer-and-context.md | 47 +++++++++---------- 1 file changed, 21 insertions(+), 26 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 47a397098..429080c38 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -4,21 +4,21 @@ title: Scaling Up with Reducer and Context -Reducers একটি কম্পোনেন্টের state আপডেট লজিক সংক্ষেপণ করতে সাহায্য করে। Context আপনাকে অন্যান্য কম্পোনেন্টের গভীরে তথ্য পাঠানোর সুযোগ দেয়। আপনি reducers এবং context দুটি একসাথে সংমিলিত করে একটি জটিল স্ক্রিনের state ব্যবস্থাপনা করতে পারেন । +Reducers একটি কম্পোনেন্টের state আপডেট লজিক সংক্ষেপণ করতে সাহায্য করে। Context আপনাকে অন্যান্য কম্পোনেন্টের গভীরে তথ্য পাঠানোর সুযোগ দেয়। আপনি reducers এবং context দুটি একসাথে সংমিলিত করে একটি জটিল স্ক্রিনের state ব্যবস্থাপনা করতে পারেন। -* কিভাবে reducer কে context এর সাথে সংযুক্ত করতে হয় । -* কিভাবে state এবং dispatch কে props এর মাধ্যমে পাঠানো থেকে বিরত থাকা যায় । -* কিভাবে context এবং state এর যুক্তিকে ভিন্ন ফাইলে রাখা যায় । +* কিভাবে reducer কে context এর সাথে সংযুক্ত করতে হয়। +* কিভাবে state এবং dispatch কে props এর মাধ্যমে পাঠানো থেকে বিরত থাকা যায়। +* কিভাবে context এবং state এর যুক্তিকে ভিন্ন ফাইলে রাখা যায়। ## Context এর সাথে reducer এর সংযুক্তি {/*combining-a-reducer-with-context*/} -[Reducers এর সাথে পরিচিতি](/learn/extracting-state-logic-into-a-reducer) এই উদাহরণে, state কে reducer ব্যবস্থাপনা করেছে । Reducer ফাংশনটি সকল state হালানাগাদ যুক্তিসমূহ ধারন করে এবং একে ফাইলের একদম শেষে ডিক্লেয়ার করা হয় । +[Reducers এর সাথে পরিচিতি](/learn/extracting-state-logic-into-a-reducer) এই উদাহরণে, state কে reducer ব্যবস্থাপনা করেছে। Reducer ফাংশনটি সকল state হালানাগাদ যুক্তিসমূহ ধারন করে এবং একে ফাইলের একদম শেষে ডিক্লেয়ার করা হয়। @@ -207,7 +207,7 @@ ul, li { margin: 0; padding: 0; } -একটি Reducer ইভেন্ট হ্যান্ডলারগুলি ছোট এবং সংক্ষিপ্ত রাখতে সাহায্য করে । তবে, আপনার অ্যাপ্লিকেশন বাড়তে শুরু করলে, আপনি আরও একটি সমস্যায় পরে যেতে পারেন । **বর্তমানে, `tasks` state এবং `dispatch` ফাংশনটি শুধুমাত্র শীর্ষ-স্তরের `TaskApp` কম্পোনেন্টে উপলব্ধ রয়েছে।** অন্য কম্পোনেন্টগুলিকে টাস্কের তালিকা পড়তে অথবা তা পরিবর্তন করতে দিতে হলে, আপনাকে বর্তমান state এবং তা পরিবর্তন করার ইভেন্ট হ্যান্ডলারগুলি স্পষ্টভাবে props হিসেবে [পাঠাতে](/learn/passing-props-to-a-component) হবে। +একটি Reducer ইভেন্ট হ্যান্ডলারগুলি ছোট এবং সংক্ষিপ্ত রাখতে সাহায্য করে। তবে, আপনার অ্যাপ্লিকেশন বাড়তে শুরু করলে, আপনি আরও একটি সমস্যায় পরে যেতে পারেন। **বর্তমানে, `tasks` state এবং `dispatch` ফাংশনটি শুধুমাত্র শীর্ষ-স্তরের `TaskApp` কম্পোনেন্টে উপলব্ধ রয়েছে।** অন্য কম্পোনেন্টগুলিকে টাস্কের তালিকা পড়তে অথবা তা পরিবর্তন করতে দিতে হলে, আপনাকে বর্তমান state এবং তা পরিবর্তন করার ইভেন্ট হ্যান্ডলারগুলি স্পষ্টভাবে props হিসেবে [পাঠাতে](/learn/passing-props-to-a-component) হবে। উদাহরণস্বরূপ, `TaskApp` টাস্কের তালিকা এবং ইভেন্ট হ্যান্ডলারগুলি `TaskList` এ পাঠিয়ে দেয়: @@ -229,9 +229,9 @@ ul, li { margin: 0; padding: 0; } /> ``` -একটি ছোট উদাহরনে এটি ভালো কাজ করে, কিন্তু যদি এর মাঝে আপনার দশ বা শতাধিক কম্পোনেন্ট থাকে, তাহলে সকল state এবং ফাংশনগুলিকে পাঠানো অনেক বিরক্তিকর হতে পারে । +একটি ছোট উদাহরনে এটি ভালো কাজ করে, কিন্তু যদি এর মাঝে আপনার দশ বা শতাধিক কম্পোনেন্ট থাকে, তাহলে সকল state এবং ফাংশনগুলিকে পাঠানো অনেক বিরক্তিকর হতে পারে। -এই কারনে, props এর মাধমে পাঠানোর বিকল্প হিসেবে, আপনি সমস্ত `tasks` স্টেট এবং `dispatch` ফাংশনকে [context এর মধ্যে](/learn/passing-data-deeply-with-context) রাখতে পারেন । **এইভাবে, `TaskApp` এর নীচে যেকোনো কম্পোনেন্ট রুটে আপনি "prop drilling" এর পুনরাবৃত্তি ছাড়াই task পড়তে এবং একশনগুলিকে dispatch করতে পারবেন ।** +এই কারনে, props এর মাধমে পাঠানোর বিকল্প হিসেবে, আপনি সমস্ত `tasks` স্টেট এবং `dispatch` ফাংশনকে [context এর মধ্যে](/learn/passing-data-deeply-with-context) রাখতে পারেন। **এইভাবে, `TaskApp` এর নীচে যেকোনো কম্পোনেন্ট রুটে আপনি "prop drilling" এর পুনরাবৃত্তি ছাড়াই task পড়তে এবং একশনগুলিকে dispatch করতে পারবেন ।** যেভাবে আপনি reducer এবং context এর সংযুক্তি করতে পারেনঃ 1. Context **তৈরি** করুন। @@ -240,7 +240,7 @@ ul, li { margin: 0; padding: 0; } ### ধাপ ১: Context তৈরি করুন {/*step-1-create-the-context*/} -`useReducer` হুক আপনাকে বর্তমান `tasks` এবং তা আপডেট করার জন্য `dispatch` ফাংশনকে রিটার্ন করে । +`useReducer` হুক আপনাকে বর্তমান `tasks` এবং তা আপডেট করার জন্য `dispatch` ফাংশনকে রিটার্ন করে। ```js const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); @@ -248,8 +248,8 @@ const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); তাদেরকে ট্রি-এর নিচে পাঠানোর জন্য আপনি দুটি ভিন্ন context [তৈরি](/learn/passing-data-deeply-with-context#step-2-use-the-context) করবেন । -- `TasksContext` বর্তমান tasks তালিকা প্রদান করে । -- `TasksDispatchContext` একটি ফাংশন প্রদান করে যা কম্পোনেন্টগুলিকে একশনগুলি dispatch করতে দেয় । +- `TasksContext` বর্তমান tasks তালিকা প্রদান করে। +- `TasksDispatchContext` একটি ফাংশন প্রদান করে যা কম্পোনেন্টগুলিকে একশনগুলি dispatch করতে দেয়। এদেরকে একটি আলাদা ফাইলে এক্সপোর্ট করুন যাতে আপনি পরবর্তিতে অন্য ফাইলে ইম্পোর্ট করতে পারেন: @@ -447,12 +447,12 @@ ul, li { margin: 0; padding: 0; } -এখানে আপনি `null` কে ডিফল্ট মান হিসেবে দুটি context এ পাঠাচ্ছেন । আসল মানগুলি `TaskApp` এর মাধ্যমে সরাসরি প্রদান হবে । +এখানে আপনি `null` কে ডিফল্ট মান হিসেবে দুটি context এ পাঠাচ্ছেন। আসল মানগুলি `TaskApp` এর মাধ্যমে সরাসরি প্রদান হবে। ### ধাপ ২: State এবং dispatch কে context এর ভেতরে রাখুন {/*step-2-put-state-and-dispatch-into-context*/} -এখন আপনি দুটো context কে `TaskApp` কম্পোনেন্টে ইম্পোর্ট করতে পারেন । `useReducer()` এর রিটার্ন করা `tasks` এবং `dispatch` কে গ্রহণ করুন এবং এদেরকে নিচের সম্পূর্ন ট্রিতে [প্রদান করুন](/learn/passing-data-deeply-with-context#step-3-provide-the-context): +এখন আপনি দুটো context কে `TaskApp` কম্পোনেন্টে ইম্পোর্ট করতে পারেন। `useReducer()` এর রিটার্ন করা `tasks` এবং `dispatch` কে গ্রহণ করুন এবং এদেরকে নিচের সম্পূর্ন ট্রিতে [প্রদান করুন](/learn/passing-data-deeply-with-context#step-3-provide-the-context): ```js {4,7-8} import { TasksContext, TasksDispatchContext } from './TasksContext.js'; @@ -669,11 +669,11 @@ ul, li { margin: 0; padding: 0; } -পরবর্তী ধাপে, আপনি prop পাঠানো মুছে ফেলবেন । +পরবর্তী ধাপে, আপনি prop পাঠানো মুছে ফেলবেন। ### ধাপ ৩: ট্রি এর যেকোনো জায়গায় context ব্যবহার করুন {/*step-3-use-context-anywhere-in-the-tree*/} -এখন আপনাকে আর task এর তালিকা অথবা event handlers কে ট্রি এর নিচে পাঠাতে হবেনা : +এখন আপনাকে আর task এর তালিকা অথবা event handlers কে ট্রি এর নিচে পাঠাতে হবেনা: ```js {4-5} @@ -685,15 +685,14 @@ ul, li { margin: 0; padding: 0; } ``` -এর পরিবর্তে যেকোনো কম্পোনেন্ট যার task তালিকা দরকার হবে সে তা `TaskContext` থেকে পড়তে পারবে । +এর পরিবর্তে যেকোনো কম্পোনেন্ট যার task তালিকা দরকার হবে সে তা `TaskContext` থেকে পড়তে পারবে। ```js {2} export default function TaskList() { const tasks = useContext(TasksContext); // ... ``` - -Task তালিকা হালনাগাদ করার জন্য যেকোনো কম্পোনেন্ট `dispatch` ফাংশনকে context থেকে পড়তে পারেন এবং call করতে পারেন । +Task তালিকা হালনাগাদ করার জন্য যেকোনো কম্পোনেন্ট `dispatch` ফাংশনকে context থেকে পড়তে পারেন এবং call করতে পারেন। ```js {3,9-13} export default function AddTask() { @@ -713,7 +712,7 @@ export default function AddTask() { // ... ``` -**`TaskApp` কম্পোনেন্ট কোনো event handlers কে নিচে পাঠায় না এবং `TaskList` কোনো event handlers কে `Task` কম্পোনেন্টেও পাঠায় না ।** প্রতিটা কম্পোনেন্ট তার প্রয়োজনীয় context কে পড়েঃ +**`TaskApp` কম্পোনেন্ট কোনো event handlers কে নিচে পাঠায় না এবং `TaskList` কোনো event handlers কে `Task` কম্পোনেন্টেও পাঠায় না।** প্রতিটা কম্পোনেন্ট তার প্রয়োজনীয় context কে পড়েঃ @@ -915,8 +914,8 @@ export const TasksDispatchContext = createContext(null); এই ফাইলটিতে এখন জটলা বেঁধে যাবে! আপনি reducer কে একই ফাইলে সরাবেন। এরপর আপনি একটি নতুন `TaskProvider` কম্পোনেন্ট একই ফাইলে ডিক্লেয়ার করবেন। এই কম্পোনেন্ট সকল অংশকে একীভূত করবে। -1. এটি state কে reducer দিয়ে পরিচালনা করবে । -2. এটি উভয় context কে নিচের কম্পোনেন্টে পাঠাবে । +1. এটি state কে reducer দিয়ে পরিচালনা করবে। +2. এটি উভয় context কে নিচের কম্পোনেন্টে পাঠাবে। 3. এটি [`children` কে prop হিসেবে নেয়](/learn/passing-props-to-a-component#passing-jsx-as-children) যাতে আপনি এতে JSX পাঠাতে পারেন। ```js @@ -933,7 +932,7 @@ export function TasksProvider({ children }) { } ``` -**এটি আপনার `TaskApp` থেকে সকল জটিলতা এবং সংযোগকে সরিয়ে দেয় :** +**এটি আপনার `TaskApp` থেকে সকল জটিলতা এবং সংযোগকে সরিয়ে দেয়:** @@ -1358,19 +1357,15 @@ ul, li { margin: 0; padding: 0; } - - আপনি Reducer সঙ্গে context যোগ করে যেকোনো কোম্পোনেন্টকে এর উপরের state পড়তে এবং আপডেট করতে দিতে পারেন। - - state এবং dispatch ফাংশনকে নীচের কোম্পোনেন্টগুলিকে প্রদান করতে: 1. দুটি কনটেক্সট তৈরি করুন (state এবং dispatch ফাংশনের জন্য)। 2. যে কোম্পোনেন্ট রিডিউসারটি ব্যবহার করে, তার থেকে উভয় কনটেক্সট প্রদান করুন। 3. যে কোম্পোনেন্ট এর তাদের পড়ার দরকার সেগুলি থেকে যেকোনো কনটেক্সট ব্যবহার করুন। - - আপনি কম্পোনেন্টগুলিকে আরো গোছাতে পারেন এদেরকে একটি ফাইলে সরিয়ে ফেলার মাধ্যমে। - আপনি `TasksProvider` এর মতো কম্পোনেন্টকে এক্সপোর্ট করতে পারেন যারা context প্রদান করেন। - আপনি `useTasks` এবং `useTasksDispatch` এর মতো কাস্টম হুকগিলে এক্সপোর্ট করতে পারেন পড়ার জন্য। - আপনি অনেকগুলি context-reducer জোড়া রাখতে পারেন আপনার app এ। - From dee221e235dd73d0a77451b63ba1305f7c0cff22 Mon Sep 17 00:00:00 2001 From: Shahriar Rumel <71602274+Shahriar-Rumel@users.noreply.github.com> Date: Sat, 21 Oct 2023 12:47:33 +0600 Subject: [PATCH 10/13] fix: remove extra line Co-authored-by: Nafis Tiham --- src/content/learn/scaling-up-with-reducer-and-context.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 429080c38..484b555ba 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -714,7 +714,6 @@ export default function AddTask() { **`TaskApp` কম্পোনেন্ট কোনো event handlers কে নিচে পাঠায় না এবং `TaskList` কোনো event handlers কে `Task` কম্পোনেন্টেও পাঠায় না।** প্রতিটা কম্পোনেন্ট তার প্রয়োজনীয় context কে পড়েঃ - ```js App.js From 516074124845c63b5fec1e08d7cf657df67487a8 Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Sat, 21 Oct 2023 13:06:33 +0600 Subject: [PATCH 11/13] fix: remove extra space line and fix typo --- .../scaling-up-with-reducer-and-context.md | 39 ++++++++----------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 484b555ba..642500754 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -4,7 +4,7 @@ title: Scaling Up with Reducer and Context -Reducers একটি কম্পোনেন্টের state আপডেট লজিক সংক্ষেপণ করতে সাহায্য করে। Context আপনাকে অন্যান্য কম্পোনেন্টের গভীরে তথ্য পাঠানোর সুযোগ দেয়। আপনি reducers এবং context দুটি একসাথে সংমিলিত করে একটি জটিল স্ক্রিনের state ব্যবস্থাপনা করতে পারেন। +Reducers একটি কম্পোনেন্টের state আপডেট লজিক সংক্ষেপণ করতে সাহায্য করে। Context আপনাকে অন্যান্য কম্পোনেন্টের গভীরে তথ্য পাঠানোর সুযোগ দেয়। আপনি reducers এবং context দুটি একসাথে সংমিলিত করে একটি জটিল স্ক্রীনের state ব্যবস্থাপনা করতে পারেন। @@ -207,7 +207,7 @@ ul, li { margin: 0; padding: 0; } -একটি Reducer ইভেন্ট হ্যান্ডলারগুলি ছোট এবং সংক্ষিপ্ত রাখতে সাহায্য করে। তবে, আপনার অ্যাপ্লিকেশন বাড়তে শুরু করলে, আপনি আরও একটি সমস্যায় পরে যেতে পারেন। **বর্তমানে, `tasks` state এবং `dispatch` ফাংশনটি শুধুমাত্র শীর্ষ-স্তরের `TaskApp` কম্পোনেন্টে উপলব্ধ রয়েছে।** অন্য কম্পোনেন্টগুলিকে টাস্কের তালিকা পড়তে অথবা তা পরিবর্তন করতে দিতে হলে, আপনাকে বর্তমান state এবং তা পরিবর্তন করার ইভেন্ট হ্যান্ডলারগুলি স্পষ্টভাবে props হিসেবে [পাঠাতে](/learn/passing-props-to-a-component) হবে। +একটি Reducer ইভেন্ট হ্যান্ডলারগুলি ছোট এবং সংক্ষিপ্ত রাখতে সাহায্য করে । তবে, আপনার অ্যাপ্লিকেশন বড় হতে শুরু করলে, আপনি আরও একটি সমস্যায় পড়ে যেতে পারেন । **বর্তমানে, `tasks` state এবং `dispatch` ফাংশনটি শুধুমাত্র শীর্ষ-স্তরের `TaskApp` কম্পোনেন্টে পাওয়া যাচ্ছে।** অন্য কম্পোনেন্টকে টাস্কের তালিকা পড়তে অথবা তা পরিবর্তন করতে দিতে হলে, আপনাকে বর্তমান state এবং তা পরিবর্তন করার ইভেন্ট হ্যান্ডলারগুলি explicit ভাবে props হিসেবে [পাঠাতে](/learn/passing-props-to-a-component) হবে। উদাহরণস্বরূপ, `TaskApp` টাস্কের তালিকা এবং ইভেন্ট হ্যান্ডলারগুলি `TaskList` এ পাঠিয়ে দেয়: @@ -229,11 +229,12 @@ ul, li { margin: 0; padding: 0; } /> ``` -একটি ছোট উদাহরনে এটি ভালো কাজ করে, কিন্তু যদি এর মাঝে আপনার দশ বা শতাধিক কম্পোনেন্ট থাকে, তাহলে সকল state এবং ফাংশনগুলিকে পাঠানো অনেক বিরক্তিকর হতে পারে। +একটি ছোট উদাহরণে এটি ভালো কাজ করে, কিন্তু যদি এর মাঝে আপনার দশ বা শতাধিক কম্পোনেন্ট থাকে, তাহলে সকল state এবং ফাংশনকে পাঠানো অনেক বিরক্তিকর হতে পারে। -এই কারনে, props এর মাধমে পাঠানোর বিকল্প হিসেবে, আপনি সমস্ত `tasks` স্টেট এবং `dispatch` ফাংশনকে [context এর মধ্যে](/learn/passing-data-deeply-with-context) রাখতে পারেন। **এইভাবে, `TaskApp` এর নীচে যেকোনো কম্পোনেন্ট রুটে আপনি "prop drilling" এর পুনরাবৃত্তি ছাড়াই task পড়তে এবং একশনগুলিকে dispatch করতে পারবেন ।** +এই কারণে, props এর মাধমে পাঠানোর বিকল্প হিসেবে, আপনি সমস্ত `tasks` স্টেট এবং `dispatch` ফাংশনকে [context এর মধ্যে](/learn/passing-data-deeply-with-context) রাখতে পারেন। **এইভাবে, `TaskApp` এর নীচে যেকোনো কম্পোনেন্ট রুটে আপনি "prop drilling" এর পুনরাবৃত্তি ছাড়াই task পড়তে এবং একশনকে dispatch করতে পারবেন ।** যেভাবে আপনি reducer এবং context এর সংযুক্তি করতে পারেনঃ + 1. Context **তৈরি** করুন। 2. state এবং dispatch কে Context এর ভেতরে **রাখুন**। 3. Context কে যেকোনো কম্পোনেন্ট রুটে **ব্যবহার** করুন। @@ -249,9 +250,9 @@ const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); তাদেরকে ট্রি-এর নিচে পাঠানোর জন্য আপনি দুটি ভিন্ন context [তৈরি](/learn/passing-data-deeply-with-context#step-2-use-the-context) করবেন । - `TasksContext` বর্তমান tasks তালিকা প্রদান করে। -- `TasksDispatchContext` একটি ফাংশন প্রদান করে যা কম্পোনেন্টগুলিকে একশনগুলি dispatch করতে দেয়। +- `TasksDispatchContext` একটি ফাংশন প্রদান করে যা কম্পোনেন্টকে একশন dispatch করতে দেয়। -এদেরকে একটি আলাদা ফাইলে এক্সপোর্ট করুন যাতে আপনি পরবর্তিতে অন্য ফাইলে ইম্পোর্ট করতে পারেন: +এদেরকে একটি আলাদা ফাইলে এক্সপোর্ট করুন যাতে আপনি পরবর্তীতে অন্য ফাইলে ইম্পোর্ট করতে পারেন: @@ -447,7 +448,7 @@ ul, li { margin: 0; padding: 0; } -এখানে আপনি `null` কে ডিফল্ট মান হিসেবে দুটি context এ পাঠাচ্ছেন। আসল মানগুলি `TaskApp` এর মাধ্যমে সরাসরি প্রদান হবে। +এখানে আপনি `null` কে ডিফল্ট ভ্যালু হিসেবে দুটি context এ পাঠাচ্ছেন। আসল মানগুলি `TaskApp` এর মাধ্যমে সরাসরি প্রদান হবে। ### ধাপ ২: State এবং dispatch কে context এর ভেতরে রাখুন {/*step-2-put-state-and-dispatch-into-context*/} @@ -712,7 +713,7 @@ export default function AddTask() { // ... ``` -**`TaskApp` কম্পোনেন্ট কোনো event handlers কে নিচে পাঠায় না এবং `TaskList` কোনো event handlers কে `Task` কম্পোনেন্টেও পাঠায় না।** প্রতিটা কম্পোনেন্ট তার প্রয়োজনীয় context কে পড়েঃ +**`TaskApp` কম্পোনেন্ট কোনো event handlers কে নিচে পাঠায় না এবং `TaskList` কোনো event handlers কে `Task` কম্পোনেন্টেও পাঠায় না।** প্রতিটা কম্পোনেন্ট তার প্রয়োজনীয় context কে পড়েঃ @@ -896,12 +897,12 @@ ul, li { margin: 0; padding: 0; } -**State টি এখনো টপ-লেভেল `TaskApp` কম্পোনেন্টেই অবস্থান করছে, `useReducer` এর ব্যবস্থাপনায়।** কিন্তু এর `tasks` এবং `dispatch` এখন ট্রিয়ের নিচের প্রতিটি কম্পোনেন্ট পাওয়া যাবে ইম্পোর্টিং এবং এই context গুলিকে ব্যবহারের মাধ্যমে। +**State টি এখনো টপ-লেভেল `TaskApp` কম্পোনেন্টেই অবস্থান করছে, `useReducer` এর ব্যবস্থাপনায়।** কিন্তু এর `tasks` এবং `dispatch` এখন ট্রিয়ের নিচের প্রতিটি কম্পোনেন্ট পাওয়া যাবে ইম্পোর্টিং এবং এই context কে ব্যবহারের মাধ্যমে। ## সকল সংযোগসমূহকে একটি ফাইলে সরানো {/*moving-all-wiring-into-a-single-file*/} -আপনার এটি করার দরকার নেই, কিন্তু আপনি কম্পোনেন্টগুলিকে আরো সাজানোর জন্য reducer এবং context উভয়কেই একটি ফাইলে সরিয়ে নিতে পারেন। বর্তমানে, `TaskContext.js` এ কেবল দুটি context ডিক্লেয়ারেশন রয়েছেঃ +আপনার এটি করার দরকার নেই, কিন্তু আপনি কম্পোনেন্টকে আরো সাজানোর জন্য reducer এবং context উভয়কেই একটি ফাইলে সরিয়ে নিতে পারেন। বর্তমানে, `TaskContext.js` এ কেবল দুটি context ডিক্লেয়ারেশন রয়েছেঃ ```js import { createContext } from 'react'; @@ -909,8 +910,6 @@ import { createContext } from 'react'; export const TasksContext = createContext(null); export const TasksDispatchContext = createContext(null); ``` - - এই ফাইলটিতে এখন জটলা বেঁধে যাবে! আপনি reducer কে একই ফাইলে সরাবেন। এরপর আপনি একটি নতুন `TaskProvider` কম্পোনেন্ট একই ফাইলে ডিক্লেয়ার করবেন। এই কম্পোনেন্ট সকল অংশকে একীভূত করবে। 1. এটি state কে reducer দিয়ে পরিচালনা করবে। @@ -933,7 +932,6 @@ export function TasksProvider({ children }) { **এটি আপনার `TaskApp` থেকে সকল জটিলতা এবং সংযোগকে সরিয়ে দেয়:** - ```js App.js @@ -1123,8 +1121,7 @@ ul, li { margin: 0; padding: 0; } - -আপনি ফাংশনগুলি এক্সপোর্টও করতে পারেন যেটা `TasksContext.js` এর context কে _ব্যবহার_ করেন ঃ +আপনি ফাংশন এক্সপোর্টও করতে পারেন যেটা `TasksContext.js` এর context কে _ব্যবহার_ করেন ঃ ```js export function useTasks() { @@ -1143,7 +1140,7 @@ const tasks = useTasks(); const dispatch = useTasksDispatch(); ``` -এটি আচরণকে কোনোভাবেই পরিবর্তন করেনা, কিন্তু এটি আপনাকে পরবর্তীতে এই context গুলিকে ভাগ করতে দেয় অথবা কিছু যুক্তি যোগ করতে দেয় এই ফাংশগুলিতে। **এখন সকল context এবং reducer সংযোগসমূহ `TasksContext.js` এ আছে। এটি কম্পোনেন্টগুলিকে পরিচ্ছন্ন এবং গোছানো রাখে,কোথায় থেকে ডেটা পাচ্ছে তা নয় বরং তারা কি প্রদর্শন করে তাতে মনোযোগ দেয়ঃ** +এটি আচরণকে কোনোভাবেই পরিবর্তন করেনা, কিন্তু এটি আপনাকে পরবর্তীতে এই ফাংশনে context কে ভাগ করতে দেয় অথবা কিছু যুক্তি যোগ করতে দেয়। **এখন সকল context এবং reducer সংযোগসমূহ `TasksContext.js` এ আছে। এটি কম্পোনেন্টকে পরিচ্ছন্ন এবং গোছানো রাখে, কোথায় থেকে ডেটা পাচ্ছে তা নয় বরং তারা কি প্রদর্শন করে তাতে মনোযোগ দেয়ঃ** @@ -1343,7 +1340,6 @@ ul, li { margin: 0; padding: 0; } - আপনি `TasksProvider` কে স্ক্রীন এর একটি অংশ হিসেবে চিন্তা করতে পারেন যে জানে কিভাবে tasks এর সাথে আচরন করতে হয়, `useTasks` এদেরকে পড়ার একটি উপায় এবং `useDispatch` তাদেরকে ট্রি এর নিচের যেকোন কম্পোনেন্ট থেকে আপডেট করার একটি উপায়। @@ -1357,14 +1353,13 @@ ul, li { margin: 0; padding: 0; } - আপনি Reducer সঙ্গে context যোগ করে যেকোনো কোম্পোনেন্টকে এর উপরের state পড়তে এবং আপডেট করতে দিতে পারেন। -- state এবং dispatch ফাংশনকে নীচের কোম্পোনেন্টগুলিকে প্রদান করতে: +- state এবং dispatch ফাংশনকে নীচের কোম্পোনেন্টকে প্রদান করতে: 1. দুটি কনটেক্সট তৈরি করুন (state এবং dispatch ফাংশনের জন্য)। 2. যে কোম্পোনেন্ট রিডিউসারটি ব্যবহার করে, তার থেকে উভয় কনটেক্সট প্রদান করুন। - 3. যে কোম্পোনেন্ট এর তাদের পড়ার দরকার সেগুলি থেকে যেকোনো কনটেক্সট ব্যবহার করুন। + 3. যে কোম্পোনেন্ট এর তাদের পড়ার দরকার সেখান থেকে যেকোনো কনটেক্সট ব্যবহার করুন। - আপনি কম্পোনেন্টগুলিকে আরো গোছাতে পারেন এদেরকে একটি ফাইলে সরিয়ে ফেলার মাধ্যমে। - আপনি `TasksProvider` এর মতো কম্পোনেন্টকে এক্সপোর্ট করতে পারেন যারা context প্রদান করেন। - - আপনি `useTasks` এবং `useTasksDispatch` এর মতো কাস্টম হুকগিলে এক্সপোর্ট করতে পারেন পড়ার জন্য। - - আপনি অনেকগুলি context-reducer জোড়া রাখতে পারেন আপনার app এ। + - আপনি `useTasks` এবং `useTasksDispatch` এর মতো কাস্টম হুক এক্সপোর্ট করতে পারেন পড়ার জন্য। + - আপনি অনেক context-reducer জোড়া রাখতে পারেন আপনার app এ। - From ec59e13e10c9502589c6ad445173fe6a425f781a Mon Sep 17 00:00:00 2001 From: Shahriar Rumel Date: Sat, 21 Oct 2023 13:13:24 +0600 Subject: [PATCH 12/13] fix: remove extra lines and change wording --- src/content/learn/scaling-up-with-reducer-and-context.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 642500754..644f5986e 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -207,9 +207,9 @@ ul, li { margin: 0; padding: 0; } -একটি Reducer ইভেন্ট হ্যান্ডলারগুলি ছোট এবং সংক্ষিপ্ত রাখতে সাহায্য করে । তবে, আপনার অ্যাপ্লিকেশন বড় হতে শুরু করলে, আপনি আরও একটি সমস্যায় পড়ে যেতে পারেন । **বর্তমানে, `tasks` state এবং `dispatch` ফাংশনটি শুধুমাত্র শীর্ষ-স্তরের `TaskApp` কম্পোনেন্টে পাওয়া যাচ্ছে।** অন্য কম্পোনেন্টকে টাস্কের তালিকা পড়তে অথবা তা পরিবর্তন করতে দিতে হলে, আপনাকে বর্তমান state এবং তা পরিবর্তন করার ইভেন্ট হ্যান্ডলারগুলি explicit ভাবে props হিসেবে [পাঠাতে](/learn/passing-props-to-a-component) হবে। +একটি Reducer ইভেন্ট হ্যান্ডলারগুলি ছোট এবং সংক্ষিপ্ত রাখতে সাহায্য করে । তবে, আপনার অ্যাপ্লিকেশন বড় হতে শুরু করলে, আপনি আরও একটি সমস্যায় পড়ে যেতে পারেন । **বর্তমানে, `tasks` state এবং `dispatch` ফাংশনটি শুধুমাত্র শীর্ষ-স্তরের `TaskApp` কম্পোনেন্টে পাওয়া যাচ্ছে।** অন্য কম্পোনেন্টকে টাস্কের তালিকা পড়তে অথবা তা পরিবর্তন করতে দিতে হলে, আপনাকে বর্তমান state এবং তা পরিবর্তন করার ইভেন্ট হ্যান্ডলার explicit ভাবে props হিসেবে [পাঠাতে](/learn/passing-props-to-a-component) হবে। -উদাহরণস্বরূপ, `TaskApp` টাস্কের তালিকা এবং ইভেন্ট হ্যান্ডলারগুলি `TaskList` এ পাঠিয়ে দেয়: +উদাহরণস্বরূপ, `TaskApp` টাস্কের তালিকা এবং ইভেন্ট হ্যান্ডলার `TaskList` এ পাঠিয়ে দেয়: ```js ``` -এবং `TaskList` ইভেন্ট হ্যান্ডলারগুলোকে `Task` এ পাঠিয়ে দেয়ঃ +এবং `TaskList` ইভেন্ট হ্যান্ডলারকে `Task` এ পাঠিয়ে দেয়ঃ ```js Date: Sat, 21 Oct 2023 13:16:44 +0600 Subject: [PATCH 13/13] fix: remove extra line on 913 --- src/content/learn/scaling-up-with-reducer-and-context.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 644f5986e..3970d2a21 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -909,6 +909,7 @@ import { createContext } from 'react'; export const TasksContext = createContext(null); export const TasksDispatchContext = createContext(null); ``` + এই ফাইলটিতে এখন জটলা বেঁধে যাবে! আপনি reducer কে একই ফাইলে সরাবেন। এরপর আপনি একটি নতুন `TaskProvider` কম্পোনেন্ট একই ফাইলে ডিক্লেয়ার করবেন। এই কম্পোনেন্ট সকল অংশকে একীভূত করবে। 1. এটি state কে reducer দিয়ে পরিচালনা করবে।