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..722980804 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: Escalando com Reducer e 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 permitem que você consolide a lógica de atualização de estado de um componente. Context permite que você passe informações para outros componentes. Você pode combinar reducers e context juntos para gerenciar o estado de uma tela complexa. -* 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 +* Como combinar um reducer com context +* Como evitar passar estado e dispatch através de props +* Como manter a lógica de context e estado em um arquivo separado -## Combining a reducer with context {/*combining-a-reducer-with-context*/} +## Combinando um reducer com context {/*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: +Neste exemplo da [introdução aos reducers](/learn/extracting-state-logic-into-a-reducer), o estado é gerenciado por um reducer. A função reducer contém toda a lógica de atualização do estado e é declarada na parte inferior deste arquivo: @@ -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. +Um reducer ajuda a manter os manipuladores de eventos curtos e concisos. No entanto, à medida que seu aplicativo cresce, você pode encontrar outra dificuldade. **Atualmente, o estado `tasks` e a função `dispatch` estão disponíveis apenas no componente `TaskApp` de nível superior.** Para permitir que outros componentes leiam a lista de tarefas ou a alterem, você tem que [passar explicitamente](/learn/passing-props-to-a-component) o estado atual e os manipuladores de eventos que o alteram como props. -For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`: +Por exemplo, `TaskApp` passa uma lista de tarefas e os manipuladores de eventos para `TaskList`: ```js ``` -And `TaskList` passes the event handlers to `Task`: +E `TaskList` passa os manipuladores de eventos para `Task`: ```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! +Em um pequeno exemplo como este, isso funciona bem, mas se você tiver dezenas ou centenas de componentes no meio, passar todo o estado e as funções pode ser bastante frustrante! -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".** +É por isso que, como alternativa para passá-los por props, você pode querer colocar o estado `tasks` e a função `dispatch` [em context.](/learn/passing-data-deeply-with-context) **Desta forma, qualquer componente abaixo de `TaskApp` na árvore pode ler as tarefas e despachar ações sem a repetitiva "prop drilling".** -Here is how you can combine a reducer with context: +Veja como você pode combinar um reducer com context: -1. **Create** the context. -2. **Put** state and dispatch into context. -3. **Use** context anywhere in the tree. +1. **Crie** o context. +2. **Coloque** o estado e dispatch no context. +3. **Use** o context em qualquer lugar na árvore. -### Step 1: Create the context {/*step-1-create-the-context*/} +### Etapa 1: Crie o context {/*step-1-create-the-context*/} -The `useReducer` Hook returns the current `tasks` and the `dispatch` function that lets you update them: +O Hook `useReducer` retorna as `tasks` atuais e a função `dispatch` que permite atualizá-las: ```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: +Para passá-los pela árvore, você irá [criar](/learn/passing-data-deeply-with-context#step-2-use-the-context) dois contextos separados: -- `TasksContext` provides the current list of tasks. -- `TasksDispatchContext` provides the function that lets components dispatch actions. +- `TasksContext` fornece a lista atual de tarefas. +- `TasksDispatchContext` fornece a função que permite que os componentes despachem ações. -Export them from a separate file so that you can later import them from other files: +Exporte-os de um arquivo separado para que você possa importá-los mais tarde de outros arquivos: @@ -448,11 +448,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. +Aqui, você está passando `null` como o valor padrão para ambos os contextos. Os valores reais serão fornecidos pelo componente `TaskApp`. -### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/} +### Etapa 2: Coloque o estado e dispatch no 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: +Agora você pode importar ambos os contextos no seu componente `TaskApp`. Pegue as `tasks` e `dispatch` retornadas por `useReducer()` e [forneça-as](/learn/passing-data-deeply-with-context#step-3-provide-the-context) para toda a árvore abaixo: ```js {4,7-8} import { TasksContext, TasksDispatchContext } from './TasksContext.js'; @@ -470,7 +470,7 @@ export default function TaskApp() { } ``` -For now, you pass the information both via props and in context: +Por enquanto, você passa as informações tanto via props quanto em context: @@ -582,7 +582,8 @@ export default function AddTask({ onAddTask }) { + }} + >Add ) } @@ -669,11 +670,11 @@ ul, li { margin: 0; padding: 0; } -In the next step, you will remove prop passing. +Na próxima etapa, você removerá a passagem de props. -### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/} +### Etapa 3: Use o context em qualquer lugar na árvore {/*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: +Agora você não precisa passar a lista de tarefas ou os manipuladores de eventos para baixo na árvore: ```js {4-5} @@ -685,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`: +Em vez disso, qualquer componente que precise da lista de tarefas pode lê-la do `TaskContext`: ```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: +Para atualizar a lista de tarefas, qualquer componente pode ler a função `dispatch` do context e chamá-la: ```js {3,9-13} export default function AddTask() { @@ -709,11 +710,11 @@ export default function AddTask() { id: nextId++, text: text, }); - }}>Add + }}>Adicionar // ... ``` -**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: +**O componente `TaskApp` não passa nenhum manipulador de eventos e `TaskList` também não passa nenhum manipulador de eventos para o componente `Task`.** Cada componente lê o contexto que precisa: @@ -732,7 +733,7 @@ export default function TaskApp() { return ( -

Day off in Kyoto

+

Folga em Kyoto

@@ -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('Ação desconhecida: ' + 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: 'Caminho do Filósofo', done: true }, + { id: 1, text: 'Visitar o templo', done: false }, + { id: 2, text: 'Beber matcha', 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 + }}>Adicionar ); } @@ -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 + Apagar ); @@ -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. +**O `state` ainda "vive" no componente `TaskApp` de nível superior, gerenciado com `useReducer`.** Mas seus `tasks` e `dispatch` agora estão disponíveis para cada componente abaixo na árvore importando e usando esses contextos. -## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/} +## Mover toda a fiação para um único arquivo {/*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: +Você não precisa fazer isso, mas você pode remover mais a desordem dos componentes, movendo tanto o redutor quanto o contexto para um único arquivo. Atualmente, `TasksContext.js` contém apenas duas declarações de contexto: ```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: +Este arquivo está prestes a ficar lotado! Você moverá o redutor para o mesmo arquivo. Então você declarará um novo componente `TasksProvider` no mesmo arquivo. Este componente irá unir todas as peças: -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. Ele irá gerenciar o estado com um redutor. +2. Ele irá fornecer ambos os contextos para componentes abaixo. +3. Ele irá [receber `children` como uma prop](/learn/passing-props-to-a-component#passing-jsx-as-children) para que você possa passar JSX para ele. ```js export function TasksProvider({ children }) { @@ -930,7 +931,7 @@ export function TasksProvider({ children }) { } ``` -**This removes all the complexity and wiring from your `TaskApp` component:** +**Isso remove toda a complexidade e fiação do seu componente `TaskApp`:** @@ -942,7 +943,7 @@ import { TasksProvider } from './TasksContext.js'; export default function TaskApp() { return ( -

Day off in Kyoto

+

Folga em Kyoto

@@ -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('Ação desconhecida: ' + 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: 'Caminho do Filósofo', done: true }, + { id: 1, text: 'Visitar o templo', done: false }, + { id: 2, text: 'Beber matcha', 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 + }}>Adicionar ); } @@ -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 + Apagar ); @@ -1121,7 +1122,7 @@ ul, li { margin: 0; padding: 0; }
-You can also export functions that _use_ the context from `TasksContext.js`: +Você também pode exportar funções que _usam_ o contexto de `TasksContext.js`: ```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: +Quando um componente precisa ler o contexto, ele pode fazê-lo por meio dessas funções: ```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:** +Isso não altera o comportamento de forma alguma, mas permite que você divida esses contextos posteriormente ou adicione alguma lógica a essas funções. **Agora, toda a fiação do contexto e do redutor está em `TasksContext.js`. Isso mantém os componentes limpos e organizados, focados no que eles exibem e não de onde obtêm os dados:** @@ -1152,7 +1153,7 @@ import { TasksProvider } from './TasksContext.js'; export default function TaskApp() { return ( -

Day off in Kyoto

+

Folga em Kyoto

@@ -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('Ação desconhecida: ' + 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: 'Caminho do Filósofo', done: true }, + { id: 1, text: 'Visitar o templo', done: false }, + { id: 2, text: 'Beber matcha', 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 + }}>Adicionar ); } @@ -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 + Apagar ); @@ -1340,27 +1341,26 @@ 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. +Você pode pensar no `TasksProvider` como uma parte da tela que sabe como lidar com tarefas, no `useTasks` como uma maneira de lê-las, e no `useTasksDispatch` como uma maneira de atualizá-las de qualquer componente abaixo na árvore. -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. +Funções como `useTasks` e `useTasksDispatch` são chamadas de *[Custom Hooks.](/learn/reusing-logic-with-custom-hooks)* Sua função é considerada um custom `Hook` se seu nome começar com `use`. Isso permite que você use outros Hooks, como `useContext`, dentro dele. -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. +Conforme seu aplicativo cresce, você pode ter muitos pares de contexto-redutor como este. Esta é uma maneira poderosa de dimensionar seu aplicativo e [elevar o estado](/learn/sharing-state-between-components) sem muito trabalho sempre que você quiser acessar os dados no fundo da árvore. -- 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. +- Você pode combinar um redutor com contexto para permitir que qualquer componente leia e atualize o estado acima dele. +- Para fornecer o estado e a função de envio para os componentes abaixo: + 1. Crie dois contextos (para estado e para funções de envio). + 2. Forneça ambos os contextos do componente que usa o redutor. + 3. Use qualquer um dos contextos de componentes que precisam lê-los. +- Você pode remover ainda mais a desordem dos componentes movendo toda a fiação para um arquivo. + - Você pode exportar um componente como `TasksProvider` que fornece o contexto. + - Você também pode exportar custom `Hooks` como `useTasks` e `useTasksDispatch` para lê-lo. +- Você pode ter muitos pares de contexto-redutor como este em seu aplicativo. -