Translate extracting-state-logic-into-a-reducer #760
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
jlucfarias
suggested changes
Jun 1, 2024
| @@ -1,25 +1,25 @@ | |||
| --- | |||
| title: Extracting State Logic into a Reducer | |||
| title: Extraindo Lógica de Estado Em Um Reducer | |||
There was a problem hiding this comment.
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
| --- | ||
|
|
||
| <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._ |
There was a problem hiding this comment.
O mais próximo do sentido original seria "[...] espalhadas por muitos event handlers".
| @@ -179,17 +179,17 @@ li { | |||
|
|
|||
| </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.** | |||
There was a problem hiding this comment.
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)
| @@ -220,13 +220,13 @@ function handleDeleteTask(taskId) { | |||
| } | |||
| ``` | |||
|
|
|||
| 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: | |||
There was a problem hiding this comment.
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: |
|
|
||
| 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. |
There was a problem hiding this comment.
É 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
| @@ -266,13 +266,13 @@ function handleDeleteTask(taskId) { | |||
| } | |||
| ``` | |||
|
|
|||
| 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.) | |||
There was a problem hiding this comment.
O mais correto seria "isso deve conter" ao invés de "isso pode conter". Tem um espaço a mais em "em si mesmo"
|
|
||
| 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! |
There was a problem hiding this comment.
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! |
| @@ -284,25 +284,25 @@ dispatch({ | |||
|
|
|||
| </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*/} | |||
|
|
||
| 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: |
There was a problem hiding this comment.
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: |
| @@ -331,13 +331,13 @@ function tasksReducer(tasks, action) { | |||
| } | |||
| ``` | |||
|
|
|||
| 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. | |||
There was a problem hiding this comment.
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adiciona tradução para a página /learn/extracting-state-logic-into-a-reducer.