You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/scaling-up-with-reducer-and-context.md
+54-54Lines changed: 54 additions & 54 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,24 @@
1
1
---
2
-
title: Scaling Up with Reducer and Context
2
+
title: Scalare con Reducer e Context
3
3
---
4
4
5
5
<Intro>
6
6
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.
8
8
9
9
</Intro>
10
10
11
11
<YouWillLearn>
12
12
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
16
16
17
17
</YouWillLearn>
18
18
19
-
## Combining a reducer with context {/*combining-a-reducer-with-context*/}
19
+
## Combinare un reducer con il context {/*combining-a-reducer-with-context*/}
20
20
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:
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.
211
211
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`:
213
213
214
214
```js
215
215
<TaskList
@@ -229,30 +229,30 @@ And `TaskList` passes the event handlers to `Task`:
229
229
/>
230
230
```
231
231
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!
233
233
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".**
235
235
236
-
Here is how you can combine a reducer with context:
236
+
Ecco come puoi combinare un reducer con il context:
237
237
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.
241
241
242
-
### Step 1: Create the context {/*step-1-create-the-context*/}
242
+
### Passo 1: Crea il context {/*step-1-create-the-context*/}
243
243
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:
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`.
452
452
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*/}
454
454
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:
Nel prossimo step, rimuoverai il passaggio delle props.
673
673
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*/}
675
675
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:
677
677
678
678
```js {4-5}
679
679
<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
685
685
</TasksContext>
686
686
```
687
687
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`:
689
689
690
690
```js {2}
691
691
exportdefaultfunctionTaskList() {
692
692
consttasks=useContext(TasksContext);
693
693
// ...
694
694
```
695
695
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:
697
697
698
698
```js {3,9-13}
699
699
exportdefaultfunctionAddTask() {
@@ -713,7 +713,7 @@ export default function AddTask() {
713
713
// ...
714
714
```
715
715
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:
**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.
901
901
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*/}
903
903
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:
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:
914
914
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.
918
918
919
919
```js
920
920
exportfunctionTasksProvider({ children }) {
@@ -930,7 +930,7 @@ export function TasksProvider({ children }) {
930
930
}
931
931
```
932
932
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`:**
You can also export functions that _use_ the context from`TasksContext.js`:
1124
+
Puoi anche esportare funzioni che _usano_ il context da`TasksContext.js`:
1125
1125
1126
1126
```js
1127
1127
exportfunctionuseTasks() {
@@ -1133,14 +1133,14 @@ export function useTasksDispatch() {
1133
1133
}
1134
1134
```
1135
1135
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:
1137
1137
1138
1138
```js
1139
1139
consttasks=useTasks();
1140
1140
constdispatch=useTasksDispatch();
1141
1141
```
1142
1142
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:**
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.
1344
1344
1345
1345
<Note>
1346
1346
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.
1348
1348
1349
1349
</Note>
1350
1350
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.
1352
1352
1353
1353
<Recap>
1354
1354
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.
0 commit comments