Skip to content

Commit 5c54099

Browse files
committed
Translate "Scaling Up with Reducer and Context" to "Scalare con Reducer e Context" in sidebar and update glossary terms to Italian.
1 parent e88f0ea commit 5c54099

File tree

3 files changed

+67
-65
lines changed

3 files changed

+67
-65
lines changed

GLOSSARY.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
# Glossary
1+
# Glossary
22

33
Glossary of the translations of technical and React-specific terms.
44

55
## Untranslatable terms
6+
67
- props (**core concept**)
78
- state (**core concept**)
89
- hooks (**core concept**)
@@ -30,21 +31,22 @@ Glossary of the translations of technical and React-specific terms.
3031
- wrapper
3132
- provider
3233
- consumer
34+
- context
3335
- reducer
3436

3537
# Common Translations
3638

3739
Suggestion on words and terms:
3840

39-
| Original word/term | Suggestion |
40-
| ------------------ | ---------- |
41-
| refactor | rifattorizzare |
42-
| refactoring | rifattorizzazione |
43-
| render | renderizzare (verbo), renderizzato (nome) |
44-
| React component class | classe componente React |
45-
| React component type | tipo componente React |
46-
| function component | componente funzione |
47-
| error boundary | contenitore di errori |
41+
| Original word/term | Suggestion |
42+
| --------------------- | ----------------------------------------- |
43+
| refactor | rifattorizzare |
44+
| refactoring | rifattorizzazione |
45+
| render | renderizzare (verbo), renderizzato (nome) |
46+
| React component class | classe componente React |
47+
| React component type | tipo componente React |
48+
| function component | componente funzione |
49+
| error boundary | contenitore di errori |
4850

4951
## Problematic terms
5052

src/content/learn/scaling-up-with-reducer-and-context.md

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
---
2-
title: Scaling Up with Reducer and Context
2+
title: Scalare con Reducer e Context
33
---
44

55
<Intro>
66

7-
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.
7+
I reducer ti permettono di consolidare la logica di aggiornamento dello stato di un componente. Il context consente di passare informazioni in profondità ad altri componenti. Puoi combinare reducer e context per gestire lo stato di una chiamata complessa.
88

99
</Intro>
1010

1111
<YouWillLearn>
1212

13-
* How to combine a reducer with context
14-
* How to avoid passing state and dispatch through props
15-
* How to keep context and state logic in a separate file
13+
* Come combinare un reducer con il context
14+
* Come evitare di passare lo state e il dispatch attraverso le props
15+
* Come separare la logica dello stato e del context in un file esterno
1616

1717
</YouWillLearn>
1818

19-
## Combining a reducer with context {/*combining-a-reducer-with-context*/}
19+
## Combinare un reducer con il context {/*combining-a-reducer-with-context*/}
2020

21-
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:
21+
In questo esempio tratto da [l'introduzione ai reducers](/learn/extracting-state-logic-into-a-reducer), lo state è gestito da un reducer. La funzione del reducer contiene tutta la logica di aggiornamento dello state ed è dichiarata in fondo a questo file:
2222

2323
<Sandpack>
2424

@@ -207,9 +207,9 @@ ul, li { margin: 0; padding: 0; }
207207

208208
</Sandpack>
209209

210-
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.
210+
Un reducer aiuta a mantenere gli event handlers brevi e coincisi. Tuttavia, con la crescita della tua applicazione, potresti riscontrare un'altra difficoltà. **Attualmente, lo stato `tasks` e la funzione di `dispatch` sono disponibili solo nel componente principale `TaskApp`.** Per permettere agli altri componenti di leggere l'elenco dei tasks o di modificarlo, devi [passarli](/learn/passing-props-to-a-component) esplicitamente come props, includendo sia lo state corrente che gli event handlers necessari a modificarlo.
211211

212-
For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`:
212+
Per esempio, `TaskApp` passa una lista di task e gli event handlers a `TaskList`:
213213

214214
```js
215215
<TaskList
@@ -229,30 +229,30 @@ And `TaskList` passes the event handlers to `Task`:
229229
/>
230230
```
231231

232-
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!
232+
In un piccolo esempio come questo, questo approccio funziona bene, ma se hai decine o centinaia di componenti nel mezzo, passare tutto lo stato e tutte le funzioni può diventare piuttosto frustrante!
233233

234-
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".**
234+
Per questo motivo, in alternativa al passaggio tramite props, potresti voler inserire sia lo state `tasks` che la funzione `dispatch` [all'interno del context.](/learn/passing-data-deeply-with-context) **In questo modo, qualsiasi componente che si trovi al di sotto di `TaskApp` nell'albero potrà leggere le tasks e inviare (dispatch) azioni senza il ripetitivo "prop drilling".**
235235

236-
Here is how you can combine a reducer with context:
236+
Ecco come puoi combinare un reducer con il context:
237237

238-
1. **Create** the context.
239-
2. **Put** state and dispatch into context.
240-
3. **Use** context anywhere in the tree.
238+
1. **Crea** il context.
239+
2. **Metti** state e dispatch nel context.
240+
3. **Usa** il context ovunque nell'albero dei componenti.
241241

242-
### Step 1: Create the context {/*step-1-create-the-context*/}
242+
### Passo 1: Crea il context {/*step-1-create-the-context*/}
243243

244-
The `useReducer` Hook returns the current `tasks` and the `dispatch` function that lets you update them:
244+
L'hook `useReducer` ritorna lo state `tasks` corrente e la funzione `dispatch` ti permette di aggiornarlo:
245245

246246
```js
247247
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
248248
```
249249

250-
To pass them down the tree, you will [create](/learn/passing-data-deeply-with-context#step-2-use-the-context) two separate contexts:
250+
Per passarle giù nell'albero dei componenti, [creerai](/learn/passing-data-deeply-with-context#step-2-use-the-context) due context separati:
251251

252-
- `TasksContext` provides the current list of tasks.
253-
- `TasksDispatchContext` provides the function that lets components dispatch actions.
252+
- `TasksContext` fornisce la lista corrente di tasks.
253+
- `TasksDispatchContext` fornisce la funzione che permette ai componenti di dispatchare (dispatch) azioni.
254254

255-
Export them from a separate file so that you can later import them from other files:
255+
Esportali in due file separati così puoi importarli più avanti in altri file:
256256

257257
<Sandpack>
258258

@@ -448,11 +448,11 @@ ul, li { margin: 0; padding: 0; }
448448

449449
</Sandpack>
450450

451-
Here, you're passing `null` as the default value to both contexts. The actual values will be provided by the `TaskApp` component.
451+
Qui, stai passando `null` come valore di default in entrambi i context. I valori effettivi verranno forniti dal componente `TaskApp`.
452452

453-
### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/}
453+
### Passo 2: Metti lo state e il dispatch nel context {/*step-2-put-state-and-dispatch-into-context*/}
454454

455-
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:
455+
Ore puoi importare entrambi i context nel tuo componente `TaskApp`. Prendi `tasks` e `dispatch` ritornati dallo `useReducer()` e [forniscili](/learn/passing-data-deeply-with-context#step-3-provide-the-context) all'intero albero sotto:
456456

457457
```js {4,7-8}
458458
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
@@ -470,7 +470,7 @@ export default function TaskApp() {
470470
}
471471
```
472472

473-
For now, you pass the information both via props and in context:
473+
Per adesso, puoi passare le informazioni sia via props e sia nel context:
474474

475475
<Sandpack>
476476

@@ -669,11 +669,11 @@ ul, li { margin: 0; padding: 0; }
669669

670670
</Sandpack>
671671

672-
In the next step, you will remove prop passing.
672+
Nel prossimo step, rimuoverai il passaggio delle props.
673673

674-
### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/}
674+
### Passo 3: Usa il context ovunque nell'albero {/*step-3-use-context-anywhere-in-the-tree*/}
675675

676-
Now you don't need to pass the list of tasks or the event handlers down the tree:
676+
Ora non hai bisogno di passare la lista di tasks o gli event handlers giù nell'albero:
677677

678678
```js {4-5}
679679
<TasksContext value={tasks}>
@@ -685,15 +685,15 @@ Now you don't need to pass the list of tasks or the event handlers down the tree
685685
</TasksContext>
686686
```
687687

688-
Instead, any component that needs the task list can read it from the `TasksContext`:
688+
Invece, ogni componente che ne ha bisogno può leggerlo dal `TasksContext`:
689689

690690
```js {2}
691691
export default function TaskList() {
692692
const tasks = useContext(TasksContext);
693693
// ...
694694
```
695695
696-
To update the task list, any component can read the `dispatch` function from context and call it:
696+
Per aggiornare la lista di task, ogni componente può leggere la funzione `dispatch` e richiamarla:
697697
698698
```js {3,9-13}
699699
export default function AddTask() {
@@ -713,7 +713,7 @@ export default function AddTask() {
713713
// ...
714714
```
715715
716-
**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:
716+
**Il componente `TaskApp` non passa più alcun event handler verso il basso, e allo stesso modo `TaskList` non passa nessun event handler al componente `Task`.** Ogni componente legge semplicemente il context di cui ha bisogno:
717717
718718
<Sandpack>
719719
@@ -897,11 +897,11 @@ ul, li { margin: 0; padding: 0; }
897897
898898
</Sandpack>
899899
900-
**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.
900+
**Lo state risiede ancora nel componente principale `TaskApp`, gestito con `useReducer`.** Tuttavia, i suoi `tasks` e la funzione `dispatch` sono adesso disponibili per ogni componente sottostante nell'albero, importando e utilizzando questi context.
901901
902-
## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/}
902+
## Spostare tutti i collegamenti in un unico file {/*moving-all-wiring-into-a-single-file*/}
903903
904-
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:
904+
Non è obbligatorio farlo, ma potresti pulire ulteriormente i componenti spostando sia il reducer che il context in un singolo file. Attualmente, `TasksContext.js` contiene solo le dichiarazioni di due context:
905905
906906
```js
907907
import { createContext } from 'react';
@@ -910,11 +910,11 @@ export const TasksContext = createContext(null);
910910
export const TasksDispatchContext = createContext(null);
911911
```
912912
913-
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:
913+
Questo file sta per diventare piuttosto affolato! Sposterai il reducer nello stesso file. Poi dichiarerai nello stesso file un nuovo componente `TasksProvider`. Questo componente unirà tutti i pezzi insieme:
914914
915-
1. It will manage the state with a reducer.
916-
2. It will provide both contexts to components below.
917-
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.
915+
1. Gestirà lo state con un reducer.
916+
2. Fornirà entrambi i context ai componenti sottostanti.
917+
3. [Accetterà `children` come prop](/learn/passing-props-to-a-component#passing-jsx-as-children) in modo da potergli passare del codice JSX.
918918
919919
```js
920920
export function TasksProvider({ children }) {
@@ -930,7 +930,7 @@ export function TasksProvider({ children }) {
930930
}
931931
```
932932
933-
**This removes all the complexity and wiring from your `TaskApp` component:**
933+
**Questo rimuoverà tutta la complessità e i collegamenti dal tuo componente `TaskApp`:**
934934
935935
<Sandpack>
936936
@@ -1121,7 +1121,7 @@ ul, li { margin: 0; padding: 0; }
11211121
11221122
</Sandpack>
11231123
1124-
You can also export functions that _use_ the context from `TasksContext.js`:
1124+
Puoi anche esportare funzioni che _usano_ il context da `TasksContext.js`:
11251125
11261126
```js
11271127
export function useTasks() {
@@ -1133,14 +1133,14 @@ export function useTasksDispatch() {
11331133
}
11341134
```
11351135
1136-
When a component needs to read context, it can do it through these functions:
1136+
Quando un componente necessità di leggere il context, può farlo attraverso queste funzioni:
11371137
11381138
```js
11391139
const tasks = useTasks();
11401140
const dispatch = useTasksDispatch();
11411141
```
11421142
1143-
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:**
1143+
Questo non modifica il comportamento in nessuna maniera, ma ti permette poi di dividere ancor di più questi context o di aggiungere della logica a queste funzioni. **Ora tutti i collegamenti del context e del reducer si trovano in `TasksContext.js`. Questo mantiene i componenti puliti e ordinati, concentrati su cosa devono mostrare piuttosto che su dove recuperano i dati:**
11441144
11451145
<Sandpack>
11461146
@@ -1340,26 +1340,26 @@ ul, li { margin: 0; padding: 0; }
13401340
13411341
</Sandpack>
13421342
1343-
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.
1343+
Puoi pensare a `TasksProvider` come una parte dello schermo che conoscere come interagire con i tasks, `useTasks` come un modo di leggerli e `useTasksDispatch` come un modo per aggiornarli da ogni componente in basso nell'albero.
13441344
13451345
<Note>
13461346
1347-
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.
1347+
Funzioni come `useTasks` e `useTasksDispatch` sono chiamati *[Custom Hooks.](/learn/reusing-logic-with-custom-hooks)* La tua funzione è considerata un custom Hook se il suo nome inizia con `use`. Questo ti permette di usare altri hook, come `useContext`, dentro di essa.
13481348
13491349
</Note>
13501350
1351-
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.
1351+
Man mano che la tua app cresce, potresti avere molte coppie context-reducer di questo tipo. Questo è un modo efficace di scalare la tua app e [portare lo stato verso l'alto](/learn/sharing-state-between-components) senza troppo sforzoogni volta che desideri accedere ai dati in profondità nell'albero dei componenti.
13521352
13531353
<Recap>
13541354
1355-
- You can combine reducer with context to let any component read and update state above it.
1356-
- To provide state and the dispatch function to components below:
1357-
1. Create two contexts (for state and for dispatch functions).
1358-
2. Provide both contexts from the component that uses the reducer.
1359-
3. Use either context from components that need to read them.
1360-
- You can further declutter the components by moving all wiring into one file.
1361-
- You can export a component like `TasksProvider` that provides context.
1362-
- You can also export custom Hooks like `useTasks` and `useTasksDispatch` to read it.
1363-
- You can have many context-reducer pairs like this in your app.
1355+
- Puoi combinare un reducer con un context per permettere a qualsiasi componente di leggere e aggiornare lo state che si trova sopra di esso.
1356+
- Per fornire lo state e la funzione di dispatch ai componenti sottostanti:
1357+
1. Crea due context (per lo state e per le funzioni di dispatch).
1358+
2. Fornisci entrambi i context dal componente che utilizza il reducer.
1359+
3. Usa l'uno o l'altro context dai componenti che hanno bisogno di leggerli.
1360+
- Puoi pulire ulteriormente i componenti spostando tutti i collegamenti in un unico file.
1361+
- Puoi esportare un componente come `TasksProvider` che fornisce il context.
1362+
- Puoi anche esportare dei custom Hooks come `useTasks` e `useTasksDispatch` per leggerlo.
1363+
- Puoi avere molte coppie context-reducer di questo tipo all'interno della tua applicazione.
13641364
13651365
</Recap>

src/sidebarLearn.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@
191191
"path": "/learn/passing-data-deeply-with-context"
192192
},
193193
{
194-
"title": "Scaling Up with Reducer and Context",
194+
"title": "Scalare con Reducer e Context",
195195
"path": "/learn/scaling-up-with-reducer-and-context"
196196
}
197197
]

0 commit comments

Comments
 (0)