Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions GLOSSARY.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
# Glossary
# Glossary

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

## Untranslatable terms

- props (**core concept**)
- state (**core concept**)
- hooks (**core concept**)
Expand Down Expand Up @@ -30,21 +31,22 @@ Glossary of the translations of technical and React-specific terms.
- wrapper
- provider
- consumer
- context
- reducer

# Common Translations

Suggestion on words and terms:

| Original word/term | Suggestion |
| ------------------ | ---------- |
| refactor | rifattorizzare |
| refactoring | rifattorizzazione |
| render | renderizzare (verbo), renderizzato (nome) |
| React component class | classe componente React |
| React component type | tipo componente React |
| function component | componente funzione |
| error boundary | contenitore di errori |
| Original word/term | Suggestion |
| --------------------- | ----------------------------------------- |
| refactor | rifattorizzare |
| refactoring | rifattorizzazione |
| render | renderizzare (verbo), renderizzato (nome) |
| React component class | classe componente React |
| React component type | tipo componente React |
| function component | componente funzione |
| error boundary | contenitore di errori |

## Problematic terms

Expand Down
108 changes: 54 additions & 54 deletions src/content/learn/scaling-up-with-reducer-and-context.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
title: Scaling Up with Reducer and Context
title: Scalare con Reducer e Context
---

<Intro>

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.
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.

</Intro>

<YouWillLearn>

* 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
* Come combinare un reducer con il context
* Come evitare di passare lo state e il dispatch attraverso le props
* Come separare la logica dello stato e del context in un file esterno

</YouWillLearn>

## Combining a reducer with context {/*combining-a-reducer-with-context*/}
## Combinare un reducer con il 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:
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:

<Sandpack>

Expand Down Expand Up @@ -207,9 +207,9 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

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.
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.

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

```js
<TaskList
Expand All @@ -229,30 +229,30 @@ And `TaskList` passes the event handlers to `Task`:
/>
```

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!
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!

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".**
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".**

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

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

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

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

```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:
Per passarle giù nell'albero dei componenti, [creerai](/learn/passing-data-deeply-with-context#step-2-use-the-context) due context separati:

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

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

<Sandpack>

Expand Down Expand Up @@ -448,11 +448,11 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

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

### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/}
### Passo 2: Metti lo state e il dispatch nel 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:
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:

```js {4,7-8}
import { TasksContext, TasksDispatchContext } from './TasksContext.js';
Expand All @@ -470,7 +470,7 @@ export default function TaskApp() {
}
```

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

<Sandpack>

Expand Down Expand Up @@ -669,11 +669,11 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

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

### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/}
### Passo 3: Usa il context ovunque nell'albero {/*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:
Ora non hai bisogno di passare la lista di tasks o gli event handlers giù nell'albero:

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

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

```js {2}
export default function TaskList() {
const tasks = useContext(TasksContext);
// ...
```

To update the task list, any component can read the `dispatch` function from context and call it:
Per aggiornare la lista di task, ogni componente può leggere la funzione `dispatch` e richiamarla:

```js {3,9-13}
export default function AddTask() {
Expand All @@ -713,7 +713,7 @@ export default function AddTask() {
// ...
```

**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:
**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:

<Sandpack>

Expand Down Expand Up @@ -897,11 +897,11 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

**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.
**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.

## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/}
## Spostare tutti i collegamenti in un unico file {/*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:
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:

```js
import { createContext } from 'react';
Expand All @@ -910,11 +910,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:
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:

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. Gestirà lo state con un reducer.
2. Fornirà entrambi i context ai componenti sottostanti.
3. [Accetterà `children` come prop](/learn/passing-props-to-a-component#passing-jsx-as-children) in modo da potergli passare del codice JSX.

```js
export function TasksProvider({ children }) {
Expand All @@ -930,7 +930,7 @@ export function TasksProvider({ children }) {
}
```

**This removes all the complexity and wiring from your `TaskApp` component:**
**Questo rimuoverà tutta la complessità e i collegamenti dal tuo componente `TaskApp`:**

<Sandpack>

Expand Down Expand Up @@ -1121,7 +1121,7 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

You can also export functions that _use_ the context from `TasksContext.js`:
Puoi anche esportare funzioni che _usano_ il context da `TasksContext.js`:

```js
export function useTasks() {
Expand All @@ -1133,14 +1133,14 @@ export function useTasksDispatch() {
}
```

When a component needs to read context, it can do it through these functions:
Quando un componente necessità di leggere il context, può farlo attraverso queste funzioni:

```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:**
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:**

<Sandpack>

Expand Down Expand Up @@ -1340,26 +1340,26 @@ ul, li { margin: 0; padding: 0; }

</Sandpack>

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.
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.

<Note>

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.
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.

</Note>

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.
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.

<Recap>

- 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.
- Puoi combinare un reducer con un context per permettere a qualsiasi componente di leggere e aggiornare lo state che si trova sopra di esso.
- Per fornire lo state e la funzione di dispatch ai componenti sottostanti:
1. Crea due context (per lo state e per le funzioni di dispatch).
2. Fornisci entrambi i context dal componente che utilizza il reducer.
3. Usa l'uno o l'altro context dai componenti che hanno bisogno di leggerli.
- Puoi pulire ulteriormente i componenti spostando tutti i collegamenti in un unico file.
- Puoi esportare un componente come `TasksProvider` che fornisce il context.
- Puoi anche esportare dei custom Hooks come `useTasks` e `useTasksDispatch` per leggerlo.
- Puoi avere molte coppie context-reducer di questo tipo all'interno della tua applicazione.

</Recap>
2 changes: 1 addition & 1 deletion src/sidebarLearn.json
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@
"path": "/learn/passing-data-deeply-with-context"
},
{
"title": "Scaling Up with Reducer and Context",
"title": "Scalare con Reducer e Context",
"path": "/learn/scaling-up-with-reducer-and-context"
}
]
Expand Down
Loading