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 c3da0c637..f543ca309 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -1,24 +1,24 @@ --- -title: Scaling Up with Reducer and Context +title: 'Reducer ve Context ile Ölçeklendirme' --- -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. +Reducer'lar bir bileşenin state güncelleme mantığını bir araya getirmenizi sağlar. Context, bilgileri diğer bileşenlere derinlemesine iletmeye olanak tanır. Reducer'ları ve context'i bir araya getirerek karmaşık bir ekranın state'ini yönetebilirsiniz. -* 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 +* Bir reducer context ile nasıl birleştirilir +* State ve dispatch'i props üzerinden iletmekten nasıl kaçınılır +* Context ve State mantığını ayrı bir dosyada nasıl tutabiliriz -## Combining a reducer with context {/*combining-a-reducer-with-context*/} +## Reducer'ı context ile birleştirmek {/*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: +[Reducerlara giriş](/learn/extracting-state-logic-into-a-reducer) bölümünden bu örnekte, state bir reducer tarafından yönetilmektedir. Reducer fonksiyonu tüm state güncelleme mantığını içerir ve bu dosyanın en alt kısmında belirtilir: @@ -57,7 +57,7 @@ export default function TaskApp() { return ( <> -

Day off in Kyoto

+

İstanbul'da bir gün

@@ -92,16 +92,16 @@ function tasksReducer(tasks, action) { return tasks.filter(t => t.id !== action.id); } default: { - throw Error('Unknown action: ' + action.type); + throw Error('Bilinmeyen eylem: ' + action.type); } } } let nextId = 3; const initialTasks = [ - { id: 0, text: 'Philosopher’s Path', done: true }, - { id: 1, text: 'Visit the temple', done: false }, - { id: 2, text: 'Drink matcha', done: false } + { id: 0, text: 'Tarihi Yarımada Yürüyüşü.', done: true }, + { id: 1, text: 'Galata Kulesi Ziyareti.', done: false }, + { id: 2, text: 'Türk kahvesi iç.', done: false } ]; ``` @@ -113,14 +113,14 @@ export default function AddTask({ onAddTask }) { return ( <> setText(e.target.value)} /> + }}>Ekle ) } @@ -164,7 +164,7 @@ function Task({ task, onChange, onDelete }) { }); }} /> ); @@ -173,7 +173,7 @@ function Task({ task, onChange, onDelete }) { <> {task.text} ); @@ -192,7 +192,7 @@ function Task({ task, onChange, onDelete }) { /> {taskContent} ); @@ -207,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, olay yöneticilerini kısa ve öz tutmaya yardımcı olur. Ancak, uygulamanız büyüdükçe başka bir zorlukla karşılaşabilirsiniz. **Şu anda, `tasks` state'i ve `dispatch` fonksiyonu yalnızca üst düzey `TaskApp` bileşeninde mevcuttur.** Diğer bileşenlerin görev listesini okumasına veya değiştirmesine izin vermek için, mevcut state'i ve onu değiştiren olay yöneticilerini açıkça [prop olarak](/learn/passing-props-to-a-component) aktarmanız gerekir. -For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`: +Örneğin, `TaskApp` görevlerin listesini ve olay yöneticilerini `TaskList`'e aktarır: ```js ``` -And `TaskList` passes the event handlers to `Task`: +Ayrıca `TaskList` olay yöneticilerini `Task`'e aktarır: ```js ``` -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! +Bunun gibi küçük bir örnekte bu yapı iyi çalışır, ancak ortada onlarca veya yüzlerce bileşen varsa, tüm state ve fonksiyonları aktarmak oldukça sinir bozucu olabilir! -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".** +Bu nedenle, bunları proplar aracılığıyla aktarmaya alternatif olarak, hem `tasks` state'ini hem de `dispatch` fonksiyonunu [context'e](/learn/passing-data-deeply-with-context) yerleştirmek isteyebilirsiniz. **Bu şekilde, hiyerarşide `TaskApp` altındaki herhangi bir bileşen görevleri okuyabilir ve tekrarlanan "prop drilling" olmadan eylemleri gönderebilir.** -Here is how you can combine a reducer with context: +Burada bir reducer'ı context ile nasıl birleştirebileceğiniz anlatılmıştır: -1. **Create** the context. -2. **Put** state and dispatch into context. -3. **Use** context anywhere in the tree. -### Step 1: Create the context {/*step-1-create-the-context*/} +1. Context'i **Oluştur**. +2. Context'in içine state ve dispatch'i **Yerleştir**. +3. Hiyerarşi'nin herhangi bir yerinde context'i **Kullan**. -The `useReducer` Hook returns the current `tasks` and the `dispatch` function that lets you update them: +### Adım 1: Context'i oluşturun. {/*step-1-create-the-context*/} + +`useReducer` hook'u mevcut `tasks` ve bunları güncellemenizi sağlayan `dispatch` fonksiyonunu döndürür: ```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: +Bunları hiyerarşide aşağı aktarmak için iki ayrı context [oluşturacaksınız](/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` geçerli görev listesini sağlar. +- `TasksDispatchContext` bileşenlerin eylemleri göndermesini sağlayan fonksiyonu sağlar. -Export them from a separate file so that you can later import them from other files: +Bunları ayrı bir dosyadan dışa aktarın, böylece daha sonra diğer dosyalardan içe aktarabilirsiniz: @@ -291,7 +292,7 @@ export default function TaskApp() { return ( <> -

Day off in Kyoto

+

İstanbul'da bir gün

@@ -326,16 +327,16 @@ function tasksReducer(tasks, action) { return tasks.filter(t => t.id !== action.id); } default: { - throw Error('Unknown action: ' + action.type); + throw Error('Bilinmeyen eylem: ' + action.type); } } } let nextId = 3; const initialTasks = [ - { id: 0, text: 'Philosopher’s Path', done: true }, - { id: 1, text: 'Visit the temple', done: false }, - { id: 2, text: 'Drink matcha', done: false } + { id: 0, text: 'Tarihi Yarımada Yürüyüşü.', done: true }, + { id: 1, text: 'Galata Kulesi Ziyareti.', done: false }, + { id: 2, text: 'Türk kahvesi iç.', done: false } ]; ``` @@ -354,14 +355,14 @@ export default function AddTask({ onAddTask }) { return ( <> setText(e.target.value)} /> + }}>Ekle ) } @@ -405,7 +406,7 @@ function Task({ task, onChange, onDelete }) { }); }} /> ); @@ -414,7 +415,7 @@ function Task({ task, onChange, onDelete }) { <> {task.text} ); @@ -433,7 +434,7 @@ function Task({ task, onChange, onDelete }) { /> {taskContent} ); @@ -448,11 +449,11 @@ 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. +Burada, her iki context de varsayılan değer olarak `null` değerini veriyorsunuz. Gerçek değerler `TaskApp` bileşeni tarafından sağlanacaktır. -### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/} +### Adım 2: Context’in içine state ve dispatch’i yerleştir {/*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: +Artık her iki context'i de `TaskApp` bileşeninize aktarabilirsiniz. `useReducer()` tarafından döndürülen `tasks` ve `dispatch` bileşenlerini alın ve aşağıdaki hiyerarşinin tamamına [sağlayın](/learn/passing-data-deeply-with-context#step-3-provide-the-context): ```js {4,7-8} import { TasksContext, TasksDispatchContext } from './TasksContext.js'; @@ -470,7 +471,7 @@ export default function TaskApp() { } ``` -For now, you pass the information both via props and in context: +Şimdilik, bilgileri hem prop'lar aracılığıyla hem de context içinde iletebilirsiniz: @@ -511,7 +512,7 @@ export default function TaskApp() { return ( -

Day off in Kyoto

+

İstanbul'da bir gün

@@ -547,16 +548,16 @@ function tasksReducer(tasks, action) { return tasks.filter(t => t.id !== action.id); } default: { - throw Error('Unknown action: ' + action.type); + throw Error('Bilinmeyen eylem: ' + action.type); } } } let nextId = 3; const initialTasks = [ - { id: 0, text: 'Philosopher’s Path', done: true }, - { id: 1, text: 'Visit the temple', done: false }, - { id: 2, text: 'Drink matcha', done: false } + { id: 0, text: 'Tarihi Yarımada Yürüyüşü.', done: true }, + { id: 1, text: 'Galata Kulesi Ziyareti.', done: false }, + { id: 2, text: 'Türk kahvesi iç.', done: false } ]; ``` @@ -575,14 +576,14 @@ export default function AddTask({ onAddTask }) { return ( <> setText(e.target.value)} /> + }}>Ekle ) } @@ -626,7 +627,7 @@ function Task({ task, onChange, onDelete }) { }); }} /> ); @@ -635,7 +636,7 @@ function Task({ task, onChange, onDelete }) { <> {task.text} ); @@ -654,7 +655,7 @@ function Task({ task, onChange, onDelete }) { /> {taskContent} ); @@ -669,23 +670,23 @@ ul, li { margin: 0; padding: 0; }
-In the next step, you will remove prop passing. +Bir sonraki adımda, prop geçişini kaldıracaksınız. -### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/} +### Adım 3: Hiyerarşi’nin herhangi bir yerinde context’i kullan {/*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: +Artık görevlerin listesini veya olay yöneticilerini hiyerarşi boyunca iletmek zorunda değilsiniz: ```js {4-5} -

Day off in Kyoto

+

İstanbul'da bir gün

``` -Instead, any component that needs the task list can read it from the `TaskContext`: +Bunun yerine, görev listesine ihtiyaç duyan herhangi bir bileşen bunu `TaskContext`'ten okuyabilir: ```js {2} export default function TaskList() { @@ -693,7 +694,7 @@ export default function TaskList() { // ... ``` -To update the task list, any component can read the `dispatch` function from context and call it: +Görev listesini güncellemek için, herhangi bir bileşen `dispatch` fonksiyonunu context'den okuyabilir ve çağırabilir: ```js {3,9-13} export default function AddTask() { @@ -709,11 +710,11 @@ export default function AddTask() { id: nextId++, text: text, }); - }}>Add + }}>Ekle // ... ``` -**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` bileşeni herhangi bir olay yöneticisini aşağıya iletmemekte ve `TaskList` bileşeni de `Task` bileşenine herhangi bir olay yöneticisini iletmemektedir.** Her bileşen ihtiyacı olan context'i okur: @@ -732,7 +733,7 @@ export default function TaskApp() { return ( -

Day off in Kyoto

+

İstanbul'da bir gün

@@ -762,15 +763,15 @@ function tasksReducer(tasks, action) { return tasks.filter(t => t.id !== action.id); } default: { - throw Error('Unknown action: ' + action.type); + throw Error('Bilinmeyen eylem: ' + action.type); } } } const initialTasks = [ - { id: 0, text: 'Philosopher’s Path', done: true }, - { id: 1, text: 'Visit the temple', done: false }, - { id: 2, text: 'Drink matcha', done: false } + { id: 0, text: 'Tarihi Yarımada Yürüyüşü.', done: true }, + { id: 1, text: 'Galata Kulesi Ziyareti.', done: false }, + { id: 2, text: 'Türk kahvesi iç.', done: false } ]; ``` @@ -791,7 +792,7 @@ export default function AddTask() { return ( <> setText(e.target.value)} /> @@ -802,7 +803,7 @@ export default function AddTask() { id: nextId++, text: text, }); - }}>Add + }}>Ekle ); } @@ -846,7 +847,7 @@ function Task({ task }) { }); }} /> ); @@ -855,7 +856,7 @@ function Task({ task }) { <> {task.text} ); @@ -882,7 +883,7 @@ function Task({ task }) { id: task.id }); }}> - Delete + Sil ); @@ -897,11 +898,11 @@ 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 hala `useReducer` ile yönetilen en üst düzey `TaskApp` bileşeninde "barınıyor".** Ancak `tasks` ve `dispatch` artık bu contextleri içe aktarıp kullanarak hiyerarşi'de aşağıdaki her bileşen tarafından kullanılabilir. -## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/} +## Tüm bağlantıları tek bir dosyaya taşıma {/*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: +Bunu yapmak zorunda değilsiniz, ancak hem reducer hem de context tek bir dosyaya taşıyarak bileşenleri daha da sadeleştirebilirsiniz. Şu anda, `TasksContext.js` sadece iki context bildirimi içermektedir: ```js import { createContext } from 'react'; @@ -910,11 +911,11 @@ 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: +Bu dosya kalabalıklaşmak üzere! Reducer'ı aynı dosyaya taşıyacaksınız. Ardından aynı dosyada yeni bir `TasksProvider` bileşeni tanımlayacaksınız. Bu bileşen tüm parçaları birbirine bağlayacak: -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. +1. Reducer'la state'i yönetecek. +2. Aşağıdaki bileşenlere her iki context'i de sağlayacaktır. +3. [`children`'ı bir prop olarak](/learn/passing-props-to-a-component#passing-jsx-as-children) alacak, böylece ona JSX'i iletebilirsiniz. ```js export function TasksProvider({ children }) { @@ -930,7 +931,7 @@ export function TasksProvider({ children }) { } ``` -**This removes all the complexity and wiring from your `TaskApp` component:** +**Bu, `TaskApp` bileşeninizden tüm karmaşıklığı ve bağlantıyı kaldırır:** @@ -942,7 +943,7 @@ import { TasksProvider } from './TasksContext.js'; export default function TaskApp() { return ( -

Day off in Kyoto

+

İstanbul'da bir gün

@@ -993,15 +994,15 @@ function tasksReducer(tasks, action) { return tasks.filter(t => t.id !== action.id); } default: { - throw Error('Unknown action: ' + action.type); + throw Error('Bilinmeyen eylem: ' + action.type); } } } const initialTasks = [ - { id: 0, text: 'Philosopher’s Path', done: true }, - { id: 1, text: 'Visit the temple', done: false }, - { id: 2, text: 'Drink matcha', done: false } + { id: 0, text: 'Tarihi Yarımada Yürüyüşü.', done: true }, + { id: 1, text: 'Galata Kulesi Ziyareti.', done: false }, + { id: 2, text: 'Türk kahvesi iç.', done: false } ]; ``` @@ -1015,7 +1016,7 @@ export default function AddTask() { return ( <> setText(e.target.value)} /> @@ -1026,7 +1027,7 @@ export default function AddTask() { id: nextId++, text: text, }); - }}>Add + }}>Ekle ); } @@ -1070,7 +1071,7 @@ function Task({ task }) { }); }} /> ); @@ -1079,7 +1080,7 @@ function Task({ task }) { <> {task.text} ); @@ -1106,7 +1107,7 @@ function Task({ task }) { id: task.id }); }}> - Delete + Sil ); @@ -1121,7 +1122,7 @@ ul, li { margin: 0; padding: 0; }
-You can also export functions that _use_ the context from `TasksContext.js`: +Ayrıca context'i _kullanan_ fonksiyonları `TasksContext.js` dosyasından dışa aktarabilirsiniz: ```js export function useTasks() { @@ -1133,14 +1134,14 @@ export function useTasksDispatch() { } ``` -When a component needs to read context, it can do it through these functions: +Bir bileşenin context'i okuması gerektiğinde, bunu bu fonksiyonlar aracılığıyla yapabilir: ```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:** +Bu, davranışı herhangi bir şekilde değiştirmez, ancak daha sonra bu contextleri daha da bölmenize veya bu fonksiyonlara bazı mantıklar eklemenize olanak tanır. **Artık tüm context ve reducer bağlantıları `TasksContext.js` içindedir. Bu, bileşenleri temiz ve düzensiz olmayan, verileri nereden aldıklarından ziyade neyi görüntülediklerine odaklanmış tutar.** @@ -1152,7 +1153,7 @@ import { TasksProvider } from './TasksContext.js'; export default function TaskApp() { return ( -

Day off in Kyoto

+

İstanbul'da bir gün

@@ -1212,15 +1213,15 @@ function tasksReducer(tasks, action) { return tasks.filter(t => t.id !== action.id); } default: { - throw Error('Unknown action: ' + action.type); + throw Error('Bilinmeyen eylem: ' + action.type); } } } const initialTasks = [ - { id: 0, text: 'Philosopher’s Path', done: true }, - { id: 1, text: 'Visit the temple', done: false }, - { id: 2, text: 'Drink matcha', done: false } + { id: 0, text: 'Tarihi Yarımada Yürüyüşü.', done: true }, + { id: 1, text: 'Galata Kulesi Ziyareti.', done: false }, + { id: 2, text: 'Türk kahvesi iç.', done: false } ]; ``` @@ -1234,7 +1235,7 @@ export default function AddTask() { return ( <> setText(e.target.value)} /> @@ -1245,7 +1246,7 @@ export default function AddTask() { id: nextId++, text: text, }); - }}>Add + }}>Ekle ); } @@ -1289,7 +1290,7 @@ function Task({ task }) { }); }} /> ); @@ -1298,7 +1299,7 @@ function Task({ task }) { <> {task.text} ); @@ -1325,7 +1326,7 @@ function Task({ task }) { id: task.id }); }}> - Delete + Sil ); @@ -1340,27 +1341,25 @@ 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`'ı görevleri nasıl işleyeceğini bilen bir ekran parçası olarak düşünebilirsiniz, `useTasks` onları okumanın bir yolu olarak, ve `useTasksDispatch` onları hiyerarşideki herhangi bir bileşenden güncellemenin bir yolu olarak düşünülebilir. - -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` ve `useTasksDispatch` gibi fonksiyonlara *[Özel Hook'lar](/learn/reusing-logic-with-custom-hooks)* denir. Bir fonksiyonunuzun adı `use` ile başlıyorsa fonksiyonunuz bir özel hook olarak kabul edilir. Bu, içinde `useContext` gibi diğer hook`ları kullanmanızı sağlar. -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. +Uygulamanız büyüdükçe, bunun gibi birçok context-reducer çiftine sahip olabilirsiniz. Bu, uygulamanızı ölçeklendirmenin ve hiyerarşinin derinliklerindeki verilere erişmek istediğinizde çok fazla iş yapmadan [state'i yükseltmenin](/learn/sharing-state-between-components) güçlü bir yoludur. -- 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. +- Herhangi bir bileşenin üzerindeki state'i okumasına ve güncellemesine izin vermek için reducer'ı context ile birleştirebilirsiniz. +- Aşağıdakiler bileşenlere state ve dispatch fonksiyonu sağlamak için: + 1. İki context oluşturun (state ve dispatch fonksiyonları için). + 2. Reducer'ı kullanan bileşende her iki context'i de sağlayın. + 3. Bunları okuması gereken bileşenlerin contextlerinden birini kullanın. +- Bileşenleri daha da temizleyebilirsiniz; tüm bağlantıları tek bir dosyaya taşıyarak. + - Context sağlayan `TasksProvider` gibi bir bileşeni dışa aktarabilirsiniz. + - Ayrıca okumak için `useTasks` ve `useTasksDispatch` gibi özel hook'ları da dışa aktarabilirsiniz. +- Uygulamanızda bunun gibi birçok context-reducer çiftine sahip olabilirsiniz. diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index ec12fd547..cfbef3281 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -160,7 +160,7 @@ "path": "/learn/passing-data-deeply-with-context" }, { - "title": "Scaling Up with Reducer and Context", + "title": "Reducer ve Context ile Ölçeklendirme", "path": "/learn/scaling-up-with-reducer-and-context" } ]