diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index dbd18f6b8..89a35d13c 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -4,7 +4,7 @@ title: useReducer -`useReducer` is a React Hook that lets you add a [reducer](/learn/extracting-state-logic-into-a-reducer) to your component. +`useReducer` é um Hook do React que permite adicionar um [reducer](/learn/extracting-state-logic-into-a-reducer) ao seu componente. ```js const [state, dispatch] = useReducer(reducer, initialArg, init?) @@ -16,11 +16,11 @@ const [state, dispatch] = useReducer(reducer, initialArg, init?) --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `useReducer(reducer, initialArg, init?)` {/*usereducer*/} -Call `useReducer` at the top level of your component to manage its state with a [reducer.](/learn/extracting-state-logic-into-a-reducer) +Chame `useReducer` na raiz do seu componente para gerenciar seu estado com um [reducer.](/learn/extracting-state-logic-into-a-reducer) ```js import { useReducer } from 'react'; @@ -34,31 +34,31 @@ function MyComponent() { // ... ``` -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) -#### Parameters {/*parameters*/} +#### Parâmetros {/*parameters*/} -* `reducer`: The reducer function that specifies how the state gets updated. It must be pure, should take the state and action as arguments, and should return the next state. State and action can be of any types. -* `initialArg`: The value from which the initial state is calculated. It can be a value of any type. How the initial state is calculated from it depends on the next `init` argument. -* **optional** `init`: The initializer function that should return the initial state. If it's not specified, the initial state is set to `initialArg`. Otherwise, the initial state is set to the result of calling `init(initialArg)`. +* `reducer`: A função reducer que especifica como o estado deve ser atualizado. Deve ser pura, deve receber o estado e a ação como argumentos, e deve retornar o próximo estado. Estado e ação podem ser de quaisquer tipos. +* `initialArg`: O valor a partir do qual o estado inicial é calculado. Pode ser um valor de qualquer tipo. Como o estado inicial é calculado a partir dele depende do próximo argumento `init`. +* **opcional** `init`: A função de inicialização que deve retornar o estado inicial. Se não for especificada, o estado inicial é definido como `initialArg`. Caso contrário, o estado inicial é definido como o resultado da chamada `init(initialArg)`. -#### Returns {/*returns*/} +#### Retornos {/*returns*/} -`useReducer` returns an array with exactly two values: +`useReducer` retorna um array com exatamente dois valores: -1. The current state. During the first render, it's set to `init(initialArg)` or `initialArg` (if there's no `init`). -2. The [`dispatch` function](#dispatch) that lets you update the state to a different value and trigger a re-render. +1. O estado atual. Durante a primeira renderização, é definido como `init(initialArg)` ou `initialArg` (se não houver `init`). +2. A [`função dispatch`](#dispatch) que permite atualizar o estado para um valor diferente e acionar uma nova renderização. -#### Caveats {/*caveats*/} +#### Ressalvas {/*caveats*/} -* `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. -* In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored. +* `useReducer` é um Hook, então você só pode chamá-lo **na raiz do seu componente** ou em seus próprios Hooks. Você não pode chamá-lo dentro de loops ou condições. Se precisar disso, extraia um novo componente e mova o estado para ele. +* No Modo Estrito, o React **chamará seu reducer e inicializador duas vezes** para [ajudar você a encontrar impurezas acidentais.](#my-reducer-or-initializer-function-runs-twice) Este comportamento é exclusivo do desenvolvimento e não afeta a produção. Se seu reducer e inicializador forem puros (como deveriam ser), isso não deve afetar sua lógica. O resultado de uma das chamadas é ignorado. --- -### `dispatch` function {/*dispatch*/} +### Função `dispatch` {/*dispatch*/} -The `dispatch` function returned by `useReducer` lets you update the state to a different value and trigger a re-render. You need to pass the action as the only argument to the `dispatch` function: +A função `dispatch` retornada pelo `useReducer` permite atualizar o estado para um valor diferente e acionar uma nova renderização. Você precisa passar a ação como o único argumento para a função `dispatch`: ```js const [state, dispatch] = useReducer(reducer, { age: 42 }); @@ -68,31 +68,31 @@ function handleClick() { // ... ``` -React will set the next state to the result of calling the `reducer` function you've provided with the current `state` and the action you've passed to `dispatch`. +O React definirá o próximo estado como o resultado da chamada da função `reducer` que você forneceu com o `state` atual e a ação que você passou ao `dispatch`. -#### Parameters {/*dispatch-parameters*/} +#### Parâmetros {/*dispatch-parameters*/} -* `action`: The action performed by the user. It can be a value of any type. By convention, an action is usually an object with a `type` property identifying it and, optionally, other properties with additional information. +* `action`: A ação realizada pelo usuário. Pode ser um valor de qualquer tipo. Por convenção, uma ação é geralmente um objeto com uma propriedade `type` identificando-a e, opcionalmente, outras propriedades com informações adicionais. -#### Returns {/*dispatch-returns*/} +#### Retornos {/*dispatch-returns*/} -`dispatch` functions do not have a return value. +As funções `dispatch` não têm um valor de retorno. -#### Caveats {/*setstate-caveats*/} +#### Ressalvas {/*setstate-caveats*/} -* The `dispatch` function **only updates the state variable for the *next* render**. If you read the state variable after calling the `dispatch` function, [you will still get the old value](#ive-dispatched-an-action-but-logging-gives-me-the-old-state-value) that was on the screen before your call. +* A função `dispatch` **apenas atualiza a variável de estado para o *próximo* render**. Se você ler a variável de estado após chamar a função `dispatch`, [ainda obterá o antigo valor](#ive-dispatched-an-action-but-logging-gives-me-the-old-state-value) que estava na tela antes da sua chamada. -* If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. React may still need to call your component before ignoring the result, but it shouldn't affect your code. +* Se o novo valor que você fornecer for idêntico ao `state` atual, conforme determinado por uma comparação [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is), o React **pulará a renderização do componente e de seus filhos.** Esta é uma otimização. O React ainda pode precisar chamar seu componente antes de ignorar o resultado, mas isso não deve afetar seu código. -* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync) +* O React [agrupa atualizações de estado.](/learn/queueing-a-series-of-state-updates) Ele atualiza a tela **após todos os manipuladores de eventos terem sido executados** e chamaram suas funções `set`. Isso previne várias re-renderizações durante um único evento. No raro caso de você precisar forçar o React a atualizar a tela mais cedo, por exemplo, para acessar o DOM, você pode usar [`flushSync`.](/reference/react-dom/flushSync) --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Adding a reducer to a component {/*adding-a-reducer-to-a-component*/} +### Adicionando um reducer a um componente {/*adding-a-reducer-to-a-component*/} -Call `useReducer` at the top level of your component to manage state with a [reducer.](/learn/extracting-state-logic-into-a-reducer) +Chame `useReducer` na raiz do seu componente para gerenciar o estado com um [reducer.](/learn/extracting-state-logic-into-a-reducer) ```js [[1, 8, "state"], [2, 8, "dispatch"], [4, 8, "reducer"], [3, 8, "{ age: 42 }"]] import { useReducer } from 'react'; @@ -106,12 +106,12 @@ function MyComponent() { // ... ``` -`useReducer` returns an array with exactly two items: +`useReducer` retorna um array com exatamente dois itens: -1. The current state of this state variable, initially set to the initial state you provided. -2. The `dispatch` function that lets you change it in response to interaction. +1. O estado atual desta variável de estado, inicialmente definido como o estado inicial que você forneceu. +2. A função `dispatch` que permite você mudá-lo em resposta à interação. -To update what's on the screen, call `dispatch` with an object representing what the user did, called an *action*: +Para atualizar o que está na tela, chame `dispatch` com um objeto representando o que o usuário fez, chamado de *ação*: ```js [[2, 2, "dispatch"]] function handleClick() { @@ -119,7 +119,7 @@ function handleClick() { } ``` -React will pass the current state and the action to your reducer function. Your reducer will calculate and return the next state. React will store that next state, render your component with it, and update the UI. +O React passará o estado atual e a ação para sua função reducer. Seu reducer calculará e retornará o próximo estado. O React armazenará esse próximo estado, renderizará seu componente com ele e atualizará a UI. @@ -132,7 +132,7 @@ function reducer(state, action) { age: state.age + 1 }; } - throw Error('Unknown action.'); + throw Error('Ação desconhecida.'); } export default function Counter() { @@ -143,9 +143,9 @@ export default function Counter() { -

Hello! You are {state.age}.

+

Olá! Você tem {state.age} anos.

); } @@ -157,13 +157,13 @@ button { display: block; margin-top: 10px; }
-`useReducer` is very similar to [`useState`](/reference/react/useState), but it lets you move the state update logic from event handlers into a single function outside of your component. Read more about [choosing between `useState` and `useReducer`.](/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer) +`useReducer` é muito similar ao [`useState`](/reference/react/useState), mas permite que você mova a lógica de atualização de estado dos manipuladores de eventos para uma única função fora do seu componente. Leia mais sobre [escolhendo entre `useState` e `useReducer`.](/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer) --- -### Writing the reducer function {/*writing-the-reducer-function*/} +### Escrevendo a função reducer {/*writing-the-reducer-function*/} -A reducer function is declared like this: +Uma função reducer é declarada assim: ```js function reducer(state, action) { @@ -171,7 +171,7 @@ function reducer(state, action) { } ``` -Then you need to fill in the code that will calculate and return the next state. By convention, it is common to write it as a [`switch` statement.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) For each `case` in the `switch`, calculate and return some next state. +Então você precisa preencher o código que calculará e retornará o próximo estado. Por convenção, é comum escrevê-la como uma [instrução `switch`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) Para cada `case` no `switch`, calcule e retorne algum próximo estado. ```js {4-7,10-13} function reducer(state, action) { @@ -189,11 +189,11 @@ function reducer(state, action) { }; } } - throw Error('Unknown action: ' + action.type); + throw Error('Ação desconhecida: ' + action.type); } ``` -Actions can have any shape. By convention, it's common to pass objects with a `type` property identifying the action. It should include the minimal necessary information that the reducer needs to compute the next state. +As ações podem ter qualquer formato. Por convenção, é comum passar objetos com uma propriedade `type` identificando a ação. Deve incluir as informações mínimas necessárias que o reducer precisa para calcular o próximo estado. ```js {5,9-12} function Form() { @@ -212,31 +212,31 @@ function Form() { // ... ``` -The action type names are local to your component. [Each action describes a single interaction, even if that leads to multiple changes in data.](/learn/extracting-state-logic-into-a-reducer#writing-reducers-well) The shape of the state is arbitrary, but usually it'll be an object or an array. +Os nomes dos tipos de ação são locais ao seu componente. [Cada ação descreve uma única interação, mesmo que isso leve a várias mudanças nos dados.](/learn/extracting-state-logic-into-a-reducer#writing-reducers-well) A forma do estado é arbitrária, mas geralmente será um objeto ou um array. -Read [extracting state logic into a reducer](/learn/extracting-state-logic-into-a-reducer) to learn more. +Leia [extraindo a lógica de estado em um reducer](/learn/extracting-state-logic-into-a-reducer) para saber mais. -State is read-only. Don't modify any objects or arrays in state: +O estado é somente leitura. Não modifique nenhum objeto ou array no estado: ```js {4,5} function reducer(state, action) { switch (action.type) { case 'incremented_age': { - // 🚩 Don't mutate an object in state like this: + // 🚩 Não mutar um objeto no estado assim: state.age = state.age + 1; return state; } ``` -Instead, always return new objects from your reducer: +Em vez disso, sempre retorne novos objetos do seu reducer: ```js {4-8} function reducer(state, action) { switch (action.type) { case 'incremented_age': { - // ✅ Instead, return a new object + // ✅ Em vez disso, retorne um novo objeto return { ...state, age: state.age + 1 @@ -244,15 +244,15 @@ function reducer(state, action) { } ``` -Read [updating objects in state](/learn/updating-objects-in-state) and [updating arrays in state](/learn/updating-arrays-in-state) to learn more. +Leia [atualizando objetos no estado](/learn/updating-objects-in-state) e [atualizando arrays no estado](/learn/updating-arrays-in-state) para saber mais. - + -#### Form (object) {/*form-object*/} +#### Formulário (objeto) {/*form-object*/} -In this example, the reducer manages a state object with two fields: `name` and `age`. +Neste exemplo, o reducer gerencia um objeto de estado com dois campos: `name` e `age`. @@ -274,7 +274,7 @@ function reducer(state, action) { }; } } - throw Error('Unknown action: ' + action.type); + throw Error('Ação desconhecida: ' + action.type); } const initialState = { name: 'Taylor', age: 42 }; @@ -300,9 +300,9 @@ export default function Form() { onChange={handleInputChange} /> -

Hello, {state.name}. You are {state.age}.

+

Olá, {state.name}. Você tem {state.age} anos.

); } @@ -316,9 +316,9 @@ button { display: block; margin-top: 10px; } -#### Todo list (array) {/*todo-list-array*/} +#### Lista de tarefas (array) {/*todo-list-array*/} -In this example, the reducer manages an array of tasks. The array needs to be updated [without mutation.](/learn/updating-arrays-in-state) +Neste exemplo, o reducer gerencia um array de tarefas. O array precisa ser atualizado [sem mutação.](/learn/updating-arrays-in-state) @@ -349,7 +349,7 @@ 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); } } } @@ -384,7 +384,7 @@ export default function TaskApp() { return ( <> -

Prague itinerary

+

Itinerário de Praga

@@ -399,9 +399,9 @@ export default function TaskApp() { let nextId = 3; const initialTasks = [ - { id: 0, text: 'Visit Kafka Museum', done: true }, - { id: 1, text: 'Watch a puppet show', done: false }, - { id: 2, text: 'Lennon Wall pic', done: false } + { id: 0, text: 'Visitar o Museu Kafka', done: true }, + { id: 1, text: 'Assistir a um show de fantoches', done: false }, + { id: 2, text: 'Foto do Muro Lennon', done: false } ]; ``` @@ -413,14 +413,14 @@ export default function AddTask({ onAddTask }) { return ( <> setText(e.target.value)} /> + }}>Adicionar ) } @@ -464,7 +464,7 @@ function Task({ task, onChange, onDelete }) { }); }} /> ); @@ -473,7 +473,7 @@ function Task({ task, onChange, onDelete }) { <> {task.text} ); @@ -492,7 +492,7 @@ function Task({ task, onChange, onDelete }) { /> {taskContent} ); @@ -509,9 +509,9 @@ ul, li { margin: 0; padding: 0; } -#### Writing concise update logic with Immer {/*writing-concise-update-logic-with-immer*/} +#### Escrevendo lógica de atualização concisa com Immer {/*writing-concise-update-logic-with-immer*/} -If updating arrays and objects without mutation feels tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer#useimmerreducer) to reduce repetitive code. Immer lets you write concise code as if you were mutating objects, but under the hood it performs immutable updates: +Se atualizar arrays e objetos sem mutação parecer tedioso, você pode usar uma biblioteca como [Immer](https://github.com/immerjs/use-immer#useimmerreducer) para reduzir o código repetitivo. Immer permite que você escreva código conciso como se estivesse mutando objetos, mas nos bastidores realiza atualizações imutáveis: @@ -541,7 +541,7 @@ function tasksReducer(draft, action) { return draft.filter(t => t.id !== action.id); } default: { - throw Error('Unknown action: ' + action.type); + throw Error('Ação desconhecida: ' + action.type); } } } @@ -576,7 +576,7 @@ export default function TaskApp() { return ( <> -

Prague itinerary

+

Itinerário de Praga

@@ -591,9 +591,9 @@ export default function TaskApp() { let nextId = 3; const initialTasks = [ - { id: 0, text: 'Visit Kafka Museum', done: true }, - { id: 1, text: 'Watch a puppet show', done: false }, - { id: 2, text: 'Lennon Wall pic', done: false }, + { id: 0, text: 'Visitar o Museu Kafka', done: true }, + { id: 1, text: 'Assistir a um show de fantoches', done: false }, + { id: 2, text: 'Foto do Muro Lennon', done: false }, ]; ``` @@ -605,14 +605,14 @@ export default function AddTask({ onAddTask }) { return ( <> setText(e.target.value)} /> + }}>Adicionar ) } @@ -656,7 +656,7 @@ function Task({ task, onChange, onDelete }) { }); }} /> ); @@ -665,7 +665,7 @@ function Task({ task, onChange, onDelete }) { <> {task.text} ); @@ -684,7 +684,7 @@ function Task({ task, onChange, onDelete }) { /> {taskContent} ); @@ -723,9 +723,9 @@ ul, li { margin: 0; padding: 0; } --- -### Avoiding recreating the initial state {/*avoiding-recreating-the-initial-state*/} +### Evitando recriações do estado inicial {/*avoiding-recreating-the-initial-state*/} -React saves the initial state once and ignores it on the next renders. +O React salva o estado inicial uma vez e o ignora nas renderizações seguintes. ```js function createInitialState(username) { @@ -737,9 +737,9 @@ function TodoList({ username }) { // ... ``` -Although the result of `createInitialState(username)` is only used for the initial render, you're still calling this function on every render. This can be wasteful if it's creating large arrays or performing expensive calculations. +Embora o resultado de `createInitialState(username)` seja usado apenas para a renderização inicial, você ainda está chamando essa função em todas as renderizações. Isso pode ser desperdício se estiver criando arrays grandes ou realizando cálculos custosos. -To solve this, you may **pass it as an _initializer_ function** to `useReducer` as the third argument instead: +Para resolver isso, você pode **passá-la como uma função _inicializadora_** para `useReducer` como o terceiro argumento: ```js {6} function createInitialState(username) { @@ -751,15 +751,15 @@ function TodoList({ username }) { // ... ``` -Notice that you’re passing `createInitialState`, which is the *function itself*, and not `createInitialState()`, which is the result of calling it. This way, the initial state does not get re-created after initialization. +Observe que você está passando `createInitialState`, que é a *função em si*, e não `createInitialState()`, que é o resultado de sua chamada. Dessa forma, o estado inicial não é recriado após a inicialização. -In the above example, `createInitialState` takes a `username` argument. If your initializer doesn't need any information to compute the initial state, you may pass `null` as the second argument to `useReducer`. +No exemplo acima, `createInitialState` recebe um argumento `username`. Se seu inicializador não precisar de informações para calcular o estado inicial, você pode passar `null` como o segundo argumento para `useReducer`. - + -#### Passing the initializer function {/*passing-the-initializer-function*/} +#### Passando a função inicializadora {/*passing-the-initializer-function*/} -This example passes the initializer function, so the `createInitialState` function only runs during initialization. It does not run when component re-renders, such as when you type into the input. +Este exemplo passa a função inicializadora, então a função `createInitialState` é executada apenas durante a inicialização. Ela não é executada quando o componente é renderizado novamente, como ao digitar no input. @@ -806,7 +806,7 @@ function reducer(state, action) { } } } - throw Error('Unknown action: ' + action.type); + throw Error('Ação desconhecida: ' + action.type); } export default function TodoList({ username }) { @@ -828,7 +828,7 @@ export default function TodoList({ username }) { /> + }}>Adicionar
    {state.todos.map(item => (
  • @@ -845,9 +845,9 @@ export default function TodoList({ username }) { -#### Passing the initial state directly {/*passing-the-initial-state-directly*/} +#### Passando o estado inicial diretamente {/*passing-the-initial-state-directly*/} -This example **does not** pass the initializer function, so the `createInitialState` function runs on every render, such as when you type into the input. There is no observable difference in behavior, but this code is less efficient. +Este exemplo **não** passa a função inicializadora, então a função `createInitialState` é executada em cada renderização, como ao digitar no input. Não há diferença observável no comportamento, mas esse código é menos eficiente. @@ -894,7 +894,7 @@ function reducer(state, action) { } } } - throw Error('Unknown action: ' + action.type); + throw Error('Ação desconhecida: ' + action.type); } export default function TodoList({ username }) { @@ -915,7 +915,7 @@ export default function TodoList({ username }) { /> + }}>Adicionar
      {state.todos.map(item => (
    • @@ -936,28 +936,28 @@ export default function TodoList({ username }) { --- -## Troubleshooting {/*troubleshooting*/} +## Solução de Problemas {/*troubleshooting*/} -### I've dispatched an action, but logging gives me the old state value {/*ive-dispatched-an-action-but-logging-gives-me-the-old-state-value*/} +### Eu dispatch uma ação, mas o log me dá o antigo valor do estado {/*ive-dispatched-an-action-but-logging-gives-me-the-old-state-value*/} -Calling the `dispatch` function **does not change state in the running code**: +Chamar a função `dispatch` **não altera o estado no código em execução**: ```js {4,5,8} function handleClick() { console.log(state.age); // 42 - dispatch({ type: 'incremented_age' }); // Request a re-render with 43 - console.log(state.age); // Still 42! + dispatch({ type: 'incremented_age' }); // Solicita uma nova renderização com 43 + console.log(state.age); // Ainda 42! setTimeout(() => { - console.log(state.age); // Also 42! + console.log(state.age); // Também 42! }, 5000); } ``` -This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `state` JavaScript variable in your already-running event handler. +Isso acontece porque [os estados se comportam como um instantâneo.](/learn/state-as-a-snapshot) Atualizar o estado solicita uma nova renderização com o novo valor de estado, mas não afeta a variável de `state` em seu manipulador de eventos que já está em execução. -If you need to guess the next state value, you can calculate it manually by calling the reducer yourself: +Se você precisar adivinhar o próximo valor de estado, pode calculá-lo manualmente chamando o reducer você mesmo: ```js const action = { type: 'incremented_age' }; @@ -970,20 +970,20 @@ console.log(nextState); // { age: 43 } --- -### I've dispatched an action, but the screen doesn't update {/*ive-dispatched-an-action-but-the-screen-doesnt-update*/} +### Eu dispatch uma ação, mas a tela não atualiza {/*ive-dispatched-an-action-but-the-screen-doesnt-update*/} -React will **ignore your update if the next state is equal to the previous state,** as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. This usually happens when you change an object or an array in state directly: +O React **ignora sua atualização se o próximo estado for igual ao estado anterior,** conforme determinado por uma comparação [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Isso geralmente acontece quando você modifica um objeto ou um array diretamente no estado: ```js {4-5,9-10} function reducer(state, action) { switch (action.type) { case 'incremented_age': { - // 🚩 Wrong: mutating existing object + // 🚩 Errado: mutando o objeto existente state.age++; return state; } case 'changed_name': { - // 🚩 Wrong: mutating existing object + // 🚩 Errado: mutando o objeto existente state.name = action.nextName; return state; } @@ -992,20 +992,20 @@ function reducer(state, action) { } ``` -You mutated an existing `state` object and returned it, so React ignored the update. To fix this, you need to ensure that you're always [updating objects in state](/learn/updating-objects-in-state) and [updating arrays in state](/learn/updating-arrays-in-state) instead of mutating them: +Você mutou um objeto `state` existente e o retornou, então o React ignorou a atualização. Para corrigir isso, você precisa garantir que está sempre [atualizando objetos no estado](/learn/updating-objects-in-state) e [atualizando arrays no estado](/learn/updating-arrays-in-state) em vez de mutá-los: ```js {4-8,11-15} function reducer(state, action) { switch (action.type) { case 'incremented_age': { - // ✅ Correct: creating a new object + // ✅ Correto: criando um novo objeto return { ...state, age: state.age + 1 }; } case 'changed_name': { - // ✅ Correct: creating a new object + // ✅ Correto: criando um novo objeto return { ...state, name: action.nextName @@ -1018,29 +1018,29 @@ function reducer(state, action) { --- -### A part of my reducer state becomes undefined after dispatching {/*a-part-of-my-reducer-state-becomes-undefined-after-dispatching*/} +### Uma parte do meu estado do reducer se torna indefinida após a dispatch {/*a-part-of-my-reducer-state-becomes-undefined-after-dispatching*/} -Make sure that every `case` branch **copies all of the existing fields** when returning the new state: +Certifique-se de que cada branch de `case` **copia todos os campos existentes** ao retornar o novo estado: ```js {5} function reducer(state, action) { switch (action.type) { case 'incremented_age': { return { - ...state, // Don't forget this! + ...state, // Não esqueça disso! age: state.age + 1 }; } // ... ``` -Without `...state` above, the returned next state would only contain the `age` field and nothing else. +Sem o `...state` acima, o próximo estado retornado conteria apenas o campo `age` e mais nada. --- -### My entire reducer state becomes undefined after dispatching {/*my-entire-reducer-state-becomes-undefined-after-dispatching*/} +### Meu estado inteiro do reducer se torna indefinido após a dispatch {/*my-entire-reducer-state-becomes-undefined-after-dispatching*/} -If your state unexpectedly becomes `undefined`, you're likely forgetting to `return` state in one of the cases, or your action type doesn't match any of the `case` statements. To find why, throw an error outside the `switch`: +Se o seu estado inesperadamente se torna `undefined`, você provavelmente está esquecendo de `return` estado em um dos cases, ou seu tipo de ação não corresponde a nenhuma das instruções `case`. Para descobrir o motivo, lance um erro fora do `switch`: ```js {10} function reducer(state, action) { @@ -1052,46 +1052,46 @@ function reducer(state, action) { // ... } } - throw Error('Unknown action: ' + action.type); + throw Error('Ação desconhecida: ' + action.type); } ``` -You can also use a static type checker like TypeScript to catch such mistakes. +Você também pode usar um verificador de tipo estático como TypeScript para pegar esses erros. --- -### I'm getting an error: "Too many re-renders" {/*im-getting-an-error-too-many-re-renders*/} +### Estou recebendo um erro: "Muitas re-renderizações" {/*im-getting-an-error-too-many-re-renders*/} -You might get an error that says: `Too many re-renders. React limits the number of renders to prevent an infinite loop.` Typically, this means that you're unconditionally dispatching an action *during render*, so your component enters a loop: render, dispatch (which causes a render), render, dispatch (which causes a render), and so on. Very often, this is caused by a mistake in specifying an event handler: +Você pode receber um erro que diz: `Muitas re-renderizações. O React limita o número de renderizações para evitar um loop infinito.` Normalmente, isso significa que você está dispatchando uma ação incondicionalmente *durante a renderização*, então seu componente entra em um loop: renderizar, dispatch (o que causa uma renderização), renderizar, dispatch (o que causa uma renderização), e assim por diante. Muito frequentemente, isso é causado por um erro ao especificar um manipulador de eventos: ```js {1-2} -// 🚩 Wrong: calls the handler during render -return +// 🚩 Errado: chama o manipulador durante a renderização +return -// ✅ Correct: passes down the event handler -return +// ✅ Correto: passa o manipulador de eventos +return -// ✅ Correct: passes down an inline function -return +// ✅ Correto: passa uma função inline +return ``` -If you can't find the cause of this error, click on the arrow next to the error in the console and look through the JavaScript stack to find the specific `dispatch` function call responsible for the error. +Se você não conseguir encontrar a causa desse erro, clique na seta ao lado do erro no console e olhe através da pilha JavaScript para encontrar a chamada específica da função `dispatch` responsável pelo erro. --- -### My reducer or initializer function runs twice {/*my-reducer-or-initializer-function-runs-twice*/} +### Meu reducer ou função inicializadora é chamado duas vezes {/*my-reducer-or-initializer-function-runs-twice*/} -In [Strict Mode](/reference/react/StrictMode), React will call your reducer and initializer functions twice. This shouldn't break your code. +No [Modo Estrito](/reference/react/StrictMode), o React chamará suas funções reducer e inicializadora duas vezes. Isso não deve quebrar seu código. -This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component, initializer, and reducer functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes. +Este comportamento **é exclusivo do desenvolvimento** e ajuda você a [manter os componentes puros.](/learn/keeping-components-pure) O React usa o resultado de uma das chamadas e ignora o resultado da outra chamada. Contanto que seu componente, inicializador e funções reducer sejam puros, isso não deverá afetar sua lógica. No entanto, se forem acidentalmente impuros, isso ajudará você a notar os erros. -For example, this impure reducer function mutates an array in state: +Por exemplo, essa função reducer impura muta um array no estado: ```js {4-6} function reducer(state, action) { switch (action.type) { case 'added_todo': { - // 🚩 Mistake: mutating state + // 🚩 Erro: mutando o estado state.todos.push({ id: nextId++, text: action.text }); return state; } @@ -1100,13 +1100,13 @@ function reducer(state, action) { } ``` -Because React calls your reducer function twice, you'll see the todo was added twice, so you'll know that there is a mistake. In this example, you can fix the mistake by [replacing the array instead of mutating it](/learn/updating-arrays-in-state#adding-to-an-array): +Como o React chama sua função reducer duas vezes, você verá que a tarefa foi adicionada duas vezes, então saberá que há um erro. Neste exemplo, você pode corrigir o erro [substituindo o array em vez de mutá-lo](/learn/updating-arrays-in-state#adding-to-an-array): ```js {4-11} function reducer(state, action) { switch (action.type) { case 'added_todo': { - // ✅ Correct: replacing with new state + // ✅ Correto: substituindo pelo novo estado return { ...state, todos: [ @@ -1120,6 +1120,6 @@ function reducer(state, action) { } ``` -Now that this reducer function is pure, calling it an extra time doesn't make a difference in behavior. This is why React calling it twice helps you find mistakes. **Only component, initializer, and reducer functions need to be pure.** Event handlers don't need to be pure, so React will never call your event handlers twice. +Agora que essa função reducer é pura, chamar ela uma vez a mais não faz diferença no comportamento. É por isso que o React chamá-la duas vezes ajuda você a encontrar erros. **Somente funções de componente, inicializadora e reducer precisam ser puras.** Manipuladores de eventos não precisam ser puros, então o React nunca chamará seus manipuladores de eventos duas vezes. -Read [keeping components pure](/learn/keeping-components-pure) to learn more. +Leia [mantendo componentes puros](/learn/keeping-components-pure) para saber mais. \ No newline at end of file