Translate extracting-state-logic-into-a-reducer by marcusviniciusg03dev · Pull Request #760 · reactjs/pt-br.react.dev

marcusviniciusg03dev · 2024-05-24T22:21:05Z

Adiciona tradução para a página /learn/extracting-state-logic-into-a-reducer.

vercel · 2024-05-24T22:21:09Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
pt-br-legacy-reactjs-org	⬜️ Ignored (Inspect)	Visit Preview		May 24, 2024 10:21pm

jlucfarias

Infelizmente ainda não consegui fazer uma revisão completa, mas já coloquei alguns apontamentos. Se possível, tente aproveitar os apontamentos já colocado para o restante das alterações, mas depois eu dou continuidade

jlucfarias · 2024-06-01T00:05:18Z

@@ -1,25 +1,25 @@
 ---
-title: Extracting State Logic into a Reducer
+title: Extraindo Lógica de Estado Em Um Reducer


Como o próprio glossário menciona, state é uma palavra que não deve ser traduzida. Então só precisaria alterar Estado para State. Aplicar essa alteração no restante do texto

jlucfarias · 2024-06-01T00:07:53Z

 <Intro>

-Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a _reducer._
+Componentes com atualizações de estado espalhadas por alguns event handlers podem ficar muito pesados. Para estes casos, você pode consolidar toda a lógica de atualização de estado fora do seu componente em uma única função, chamada de _reducer._


O mais próximo do sentido original seria "[...] espalhadas por muitos event handlers".

jlucfarias · 2024-06-01T00:22:04Z

 </Sandpack>

-Each of its event handlers calls `setTasks` in order to update the state. As this component grows, so does the amount of state logic sprinkled throughout it. To reduce this complexity and keep all your logic in one easy-to-access place, you can move that state logic into a single function outside your component, **called a "reducer".**
+Cada um de seus event handlers chama `setTasks` em ordem para atualizar o estado. À medida que o componente cresce, então a lógica de estado se espalha por toda parte. Para reduzir essa complexidade e manter toda a lógica em um lugar fácil de acessar, você pode mover aquela lógica de estado em uma função única fora do seu componente, **chamado reducer.**


Acho mais interessante alterar "em ordem para" para "a fim de", "lugar fácil de acessar" para "lugar de fácil acesso" e "chamado reducer" para "chamada "reducer"" (é interessante manter as aspas e a concordância em gênero pois está sendo falado de uma função)

jlucfarias · 2024-06-01T00:45:56Z

 ```

-Remove all the state setting logic. What you are left with are three event handlers:
+Remover toda a lógica que define o estado. O que você deixa são três event handlers:


Acredito que a seguinte sugestão se adeque mais ao sentido original

Suggested change

Remover toda a lógica que define o estado. O que você deixa são três event handlers:

Remova toda a lógica que define o estado. O que fica com você são três event handlers:

jlucfarias · 2024-06-01T01:00:26Z

+- `handleDeleteTask(taskId)` é chamado quando o usuário pressiona "Remover".

-Managing state with reducers is slightly different from directly setting state. Instead of telling React "what to do" by setting state, you specify "what the user just did" by dispatching "actions" from your event handlers. (The state update logic will live elsewhere!) So instead of "setting `tasks`" via an event handler, you're dispatching an "added/changed/deleted a task" action. This is more descriptive of the user's intent.
+O gerenciamento de estado com reducers é um pouco diferente de definir o estado diretamente. Em vez de dizer ao React "o que fazer" definindo o estado, você especifica "o que o usuário acabou de fazer" disparando "actions"("ações") do seus event handlers. (A lógica de atualização de estado vai sobreviver em outro lugar!) Então em vez de "definir `tasks`" através de um event handler, você está disparando um evento de tarefa "adicionada/mudada/removida". Isto é mais descritivo à respeito do que o usuário pretende fazer.


É bom deixar um espaço entre "actions" e a abertura de parênteses. É preciso concordar em número, então o correto seria "dos seus event handlers". Melhor manter a palavra "tarefa" dentro das aspas como no original

jlucfarias · 2024-06-01T01:05:31Z

 ```

-It is a regular JavaScript object. You decide what to put in it, but generally it should contain the minimal information about _what happened_. (You will add the `dispatch` function itself in a later step.)
+É um objeto regular do JavaScript. Você decide o que colocar nele, mas geralmente isso pode conter o mínimo de informações sobre _o que aconteceu_. (Você vai adicionar a função `dispatch` em  si mesmo em um último passo.)


O mais correto seria "isso deve conter" ao invés de "isso pode conter". Tem um espaço a mais em "em si mesmo"

jlucfarias · 2024-06-01T01:07:00Z

+Um objeto de ação pode ter qualquer forma.

-By convention, it is common to give it a string `type` that describes what happened, and pass any additional information in other fields. The `type` is specific to a component, so in this example either `'added'` or `'added_task'` would be fine. Choose a name that says what happened!
+Por convenção, é comum dar uma string `type` que descreve o que aconteceu, e passar qualquer informação adicional em outros campos. O `type` é especifico para um componente, então nesse exemplo tanto `'added'` ou `'added_task'` seriam bom. Escolha um nome que diz o que aconteceu!


Suggested change

Por convenção, é comum dar uma string `type` que descreve o que aconteceu, e passar qualquer informação adicional em outros campos. O `type` é especifico para um componente, então nesse exemplo tanto `'added'` ou `'added_task'` seriam bom. Escolha um nome que diz o que aconteceu!

Por convenção, é comum dar uma string `type` que descreve o que aconteceu, e passar qualquer informação adicional em outros campos. O `type` é especifico para um componente, então nesse exemplo tanto `'added'` ou `'added_task'` seriam bons. Escolha um nome que diz o que aconteceu!

jlucfarias · 2024-06-01T01:07:30Z

 </Note>

-### Step 2: Write a reducer function {/*step-2-write-a-reducer-function*/}
+### Passo 2: **Escrever** uma função de reducer {/*step-2-write-a-reducer-function*/}


Remova as **

jlucfarias · 2024-06-01T01:17:23Z

+### Passo 2: **Escrever** uma função de reducer {/*step-2-write-a-reducer-function*/}

-A reducer function is where you will put your state logic. It takes two arguments, the current state and the action object, and it returns the next state:
+Uma função reducer é onde você vai colocar a sua lógica de estado. Ele recebe dois argumentos, o estado atual e o objeto de ação, e retorna o próximo estado:


Suggested change

Uma função reducer é onde você vai colocar a sua lógica de estado. Ele recebe dois argumentos, o estado atual e o objeto de ação, e retorna o próximo estado:

Uma função reducer é onde você vai colocar a sua lógica de estado. Ela recebe dois argumentos, o estado atual e o objeto de ação, e retorna o próximo estado:

jlucfarias · 2024-06-01T01:20:38Z

 ```

-Because the reducer function takes state (`tasks`) as an argument, you can **declare it outside of your component.** This decreases the indentation level and can make your code easier to read.
+Por causa que a função reducer pega o estado (`tasks`) como um argumento, você pode **declarar isso for do seu componente.** Isto diminui a nível de indentação e pode fazer seu código ser facilmente lido.


Suggested change

Por causa que a função reducer pega o estado (`tasks`) como um argumento, você pode **declarar isso for do seu componente.** Isto diminui a nível de indentação e pode fazer seu código ser facilmente lido.

Por causa que a função reducer pega o estado (`tasks`) como um argumento, você pode **declarar isso fora do seu componente.** Isto diminui o nível de indentação e pode fazer seu código ser facilmente lido.

jhonmike · 2026-06-16T02:13:18Z

Olá @marcusviniciusg03dev, obrigado pela tradução! 🙏 Avaliamos os PRs abertos para esta página e o seu é o mais completo e íntegro — queremos seguir com ele.

Para conseguirmos mergear, faltam dois passos:

Atualizar a branch com a main (o branch está desatualizado e o CI não roda). No botão do PR: Update branch, ou git merge main na sua branch e push.
Dois ajustes pequenos:
- O **Escrever** em negrito está vazando para o título do Step 2 (por volta da linha 114) — separe do heading.
- Typo: for do → fora do.

Depois disso, com o CI verde, revisamos e mergeamos. Valeu! 🚀

Translate extracting-state-logic-into-a-reducer

b2f5434

vercel Bot deployed to Preview – pt-br-react-dev May 24, 2024 22:22 View deployment

marcusviniciusg03dev mentioned this pull request May 24, 2024

Tradução da documentação para pt-br (Translation Progress) #555

Closed

jlucfarias suggested changes Jun 1, 2024

View reviewed changes

jhonmike added the needs author response Changes requested needing author's input label Nov 1, 2024

jhonmike mentioned this pull request Jun 16, 2026

Tradução de extracting-state-logic-into-a-reducer.md para Português (Brasil) #1197

Closed

	Remover toda a lógica que define o estado. O que você deixa são três event handlers:
	Remova toda a lógica que define o estado. O que fica com você são três event handlers:

	Por convenção, é comum dar uma string `type` que descreve o que aconteceu, e passar qualquer informação adicional em outros campos. O `type` é especifico para um componente, então nesse exemplo tanto `'added'` ou `'added_task'` seriam bom. Escolha um nome que diz o que aconteceu!
	Por convenção, é comum dar uma string `type` que descreve o que aconteceu, e passar qualquer informação adicional em outros campos. O `type` é especifico para um componente, então nesse exemplo tanto `'added'` ou `'added_task'` seriam bons. Escolha um nome que diz o que aconteceu!

	Uma função reducer é onde você vai colocar a sua lógica de estado. Ele recebe dois argumentos, o estado atual e o objeto de ação, e retorna o próximo estado:
	Uma função reducer é onde você vai colocar a sua lógica de estado. Ela recebe dois argumentos, o estado atual e o objeto de ação, e retorna o próximo estado:

	Por causa que a função reducer pega o estado (`tasks`) como um argumento, você pode declarar isso for do seu componente. Isto diminui a nível de indentação e pode fazer seu código ser facilmente lido.
	Por causa que a função reducer pega o estado (`tasks`) como um argumento, você pode declarar isso fora do seu componente. Isto diminui o nível de indentação e pode fazer seu código ser facilmente lido.

Conversation

marcusviniciusg03dev commented May 24, 2024

Uh oh!

vercel Bot commented May 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jlucfarias left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jhonmike commented Jun 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented May 24, 2024 •

edited

Loading