Skip to content

Commit 23a89f8

Browse files
authored
Merge pull request #3479 from Leagian/french-translation
feat(part 6d): Translation in french
2 parents 0d1817c + fb6acc4 commit 23a89f8

File tree

5 files changed

+1398
-13
lines changed

5 files changed

+1398
-13
lines changed

src/content/6/fr/part6b.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,7 @@ Implémentez un filtrage pour les anecdotes qui sont affichées à l'utilisateur
393393
394394
![navigateur montrant le filtrage des anecdotes](../../images/6/9ea.png)
395395
396-
Stockez l'état du filtre dans le store redux. Il est recommandé de créer un nouveau réducteur, des créateurs d'actions, et un réducteur combiné pour le store en utilisant la fonction <i>combineReducers</i>.
396+
Stockez l'état du filtre dans le store redux. Il est recommandé de créer un nouveau reducer, des créateurs d'actions, et un reducer combiné pour le store en utilisant la fonction <i>combineReducers</i>.
397397
398398
Créez un nouveau composant <i>Filter</i> pour afficher le filtre. Vous pouvez utiliser le code suivant comme modèle pour le composant:
399399
@@ -422,7 +422,7 @@ export default Filter
422422
423423
### Redux Toolkit
424424
425-
Comme nous l'avons vu jusqu'à présent, la configuration de Redux et la mise en oeuvre de la gestion de l'état nécessitent pas mal d'efforts. Cela se manifeste, par exemple, dans le code lié aux réducteurs et aux créateurs d'actions, qui comprend un code modèle (boilerplate) quelque peu répétitif. [Redux Toolkit](https://redux-toolkit.js.org/) est une bibliothèque qui résout ces problèmes communs liés à Redux. La bibliothèque simplifie grandement, par exemple, la configuration du store Redux et offre une grande variété d'outils pour faciliter la gestion de l'état.
425+
Comme nous l'avons vu jusqu'à présent, la configuration de Redux et la mise en oeuvre de la gestion de l'état nécessitent pas mal d'efforts. Cela se manifeste, par exemple, dans le code lié aux reducers et aux créateurs d'actions, qui comprend un code modèle (boilerplate) quelque peu répétitif. [Redux Toolkit](https://redux-toolkit.js.org/) est une bibliothèque qui résout ces problèmes communs liés à Redux. La bibliothèque simplifie grandement, par exemple, la configuration du store Redux et offre une grande variété d'outils pour faciliter la gestion de l'état.
426426
427427
Commençons à utiliser Redux Toolkit dans notre application en refactorisant le code existant. Tout d'abord, nous devrons installer la bibliothèque:
428428
@@ -460,9 +460,9 @@ ReactDOM.createRoot(document.getElementById('root')).render(
460460
)
461461
```
462462
463-
Nous avons déjà éliminé quelques lignes de code maintenant que nous n'avons pas besoin de la fonction <em>combineReducers</em> pour créer le réducteur pour le store. Nous verrons bientôt que la fonction <em>configureStore</em> offre de nombreux avantages supplémentaires, tels que l'intégration sans effort d'outils de développement et de nombreuses bibliothèques couramment utilisées sans avoir besoin de configuration supplémentaire.
463+
Nous avons déjà éliminé quelques lignes de code maintenant que nous n'avons pas besoin de la fonction <em>combineReducers</em> pour créer le reducer pour le store. Nous verrons bientôt que la fonction <em>configureStore</em> offre de nombreux avantages supplémentaires, tels que l'intégration sans effort d'outils de développement et de nombreuses bibliothèques couramment utilisées sans avoir besoin de configuration supplémentaire.
464464
465-
Passons à la refonte des réducteurs, ce qui met en avant les avantages de Redux Toolkit. Avec Redux Toolkit, nous pouvons facilement créer des réducteurs et des créateurs d'actions associés en utilisant la fonction [createSlice](https://redux-toolkit.js.org/api/createSlice) . Nous pouvons utiliser la fonction <em>createSlice</em> pour refondre le réducteur et les créateurs d'actions dans le fichier <i>reducers/noteReducer.js</i> de la manière suivante:
465+
Passons à la refonte des reducers, ce qui met en avant les avantages de Redux Toolkit. Avec Redux Toolkit, nous pouvons facilement créer des reducers et des créateurs d'actions associés en utilisant la fonction [createSlice](https://redux-toolkit.js.org/api/createSlice) . Nous pouvons utiliser la fonction <em>createSlice</em> pour refondre le reducer et les créateurs d'actions dans le fichier <i>reducers/noteReducer.js</i> de la manière suivante:
466466
467467
```js
468468
import { createSlice } from '@reduxjs/toolkit' // highlight-line
@@ -516,7 +516,7 @@ const noteSlice = createSlice({
516516
// highlight-end
517517
```
518518
519-
La fonction <em>createSlice</em> utilise le paramètre <em>name</em> pour définir le préfixe utilisé dans les valeurs de type des actions. Par exemple, l'action <em>createNote</em> définie plus tard aura une valeur de type <em>notes/createNote</em>. Il est de bonne pratique de donner à ce paramètre une valeur qui est unique parmi les réducteurs. De cette façon, il n'y aura pas de collisions inattendues entre les valeurs de type d'action de l'application. Le paramètre <em>initialState</em> définit l'état initial du réducteur. Le paramètre <em>reducers</em> prend le réducteur lui-même comme un objet, dont les fonctions gèrent les changements d'état provoqués par certaines actions. Notez que l'<em>action.payload</em> dans la fonction contient l'argument fourni en appelant le créateur d'action:
519+
La fonction <em>createSlice</em> utilise le paramètre <em>name</em> pour définir le préfixe utilisé dans les valeurs de type des actions. Par exemple, l'action <em>createNote</em> définie plus tard aura une valeur de type <em>notes/createNote</em>. Il est de bonne pratique de donner à ce paramètre une valeur qui est unique parmi les reducers. De cette façon, il n'y aura pas de collisions inattendues entre les valeurs de type d'action de l'application. Le paramètre <em>initialState</em> définit l'état initial du reducer. Le paramètre <em>reducers</em> prend le reducer lui-même comme un objet, dont les fonctions gèrent les changements d'état provoqués par certaines actions. Notez que l'<em>action.payload</em> dans la fonction contient l'argument fourni en appelant le créateur d'action:
520520
521521
```js
522522
dispatch(createNote('Redux Toolkit is awesome!'))
@@ -528,7 +528,7 @@ Cet appel de dispatch réagit à la diffusion de l'objet suivant:
528528
dispatch({ type: 'notes/createNote', payload: 'Redux Toolkit is awesome!' })
529529
```
530530
531-
Si vous avez suivi attentivement, vous avez peut-être remarqué que, à l'intérieur de l'action <em>createNote</em>, il semble se produire quelque chose qui enfreint le principe d'immutabilité des réducteurs mentionné précédemment:
531+
Si vous avez suivi attentivement, vous avez peut-être remarqué que, à l'intérieur de l'action <em>createNote</em>, il semble se produire quelque chose qui enfreint le principe d'immutabilité des reducers mentionné précédemment:
532532
533533
```js
534534
createNote(state, action) {
@@ -544,9 +544,9 @@ createNote(state, action) {
544544
545545
Nous modifions le tableau de l'argument <em>state</em> en appelant la méthode <em>push</em> au lieu de retourner une nouvelle instance du tableau. De quoi s'agit-il?
546546
547-
Redux Toolkit utilise la bibliothèque [Immer](https://immerjs.github.io/immer/) avec les réducteurs créés par la fonction <em>createSlice</em>, ce qui rend possible la mutation de l'argument <em>state</em> à l'intérieur du réducteur. Immer utilise l'état muté pour produire un nouvel état immuable et ainsi les changements d'état restent immuables. Notez que l'<em>state</em> peut être changé sans être "muté", comme nous l'avons fait avec l'action <em>toggleImportanceOf</em>. Dans ce cas, la fonction <i>retourne</i> le nouvel état. Néanmoins, muter l'état sera souvent pratique, en particulier lorsqu'un état complexe doit être mis à jour.
547+
Redux Toolkit utilise la bibliothèque [Immer](https://immerjs.github.io/immer/) avec les reducers créés par la fonction <em>createSlice</em>, ce qui rend possible la mutation de l'argument <em>state</em> à l'intérieur du reducer. Immer utilise l'état muté pour produire un nouvel état immuable et ainsi les changements d'état restent immuables. Notez que l'<em>state</em> peut être changé sans être "muté", comme nous l'avons fait avec l'action <em>toggleImportanceOf</em>. Dans ce cas, la fonction <i>retourne</i> le nouvel état. Néanmoins, muter l'état sera souvent pratique, en particulier lorsqu'un état complexe doit être mis à jour.
548548
549-
La fonction <em>createSlice</em> retourne un objet contenant le réducteur ainsi que les créateurs d'actions définis par le paramètre <em>reducers</em>. Le réducteur peut être accédé par la propriété <em>noteSlice.reducer</em>, tandis que les créateurs d'actions par la propriété <em>noteSlice.actions</em>. Nous pouvons produire les exports du fichier de la manière suivante:
549+
La fonction <em>createSlice</em> retourne un objet contenant le reducer ainsi que les créateurs d'actions définis par le paramètre <em>reducers</em>. Le reducer peut être accédé par la propriété <em>noteSlice.reducer</em>, tandis que les créateurs d'actions par la propriété <em>noteSlice.actions</em>. Nous pouvons produire les exports du fichier de la manière suivante:
550550
551551
```js
552552
const noteSlice = createSlice(/* ... */)
@@ -623,7 +623,7 @@ describe('noteReducer', () => {
623623
624624
Comme nous l'avons appris, console.log est un outil extrêmement puissant; il nous sauve souvent des ennuis.
625625
626-
Essayons d'imprimer l'état du Store Redux dans la console au milieu du réducteur créé avec la fonction createSlice:
626+
Essayons d'imprimer l'état du Store Redux dans la console au milieu du reducer créé avec la fonction createSlice:
627627
628628
```js
629629
const noteSlice = createSlice({
@@ -697,13 +697,13 @@ Continuons à travailler sur l'application d'anecdotes utilisant Redux que nous
697697
698698
Installez Redux Toolkit pour le projet. Déplacez la création du store Redux dans le fichier <i>store.js</i> et utilisez la fonction <em>configureStore</em> de Redux Toolkit pour créer le store.
699699
700-
Changez la définition du <i>réducteur de filtre et des créateurs d'actions</i> pour utiliser la fonction <em>createSlice</em> de Redux Toolkit.
700+
Changez la définition du <i>reducer de filtre et des créateurs d'actions</i> pour utiliser la fonction <em>createSlice</em> de Redux Toolkit.
701701
702702
Commencez également à utiliser Redux DevTools pour déboguer plus facilement l'état de l'application.
703703
704704
#### 6.11 Meilleures anecdotes, étape 9
705705
706-
Changez également la définition du <i>réducteur d'anecdotes et des créateurs d'actions</i> pour utiliser la fonction <em>createSlice</em> de Redux Toolkit.
706+
Changez également la définition du <i>reducer d'anecdotes et des créateurs d'actions</i> pour utiliser la fonction <em>createSlice</em> de Redux Toolkit.
707707
708708
#### 6.12 Meilleures anecdotes, étape 10
709709
@@ -746,7 +746,7 @@ const Notification = () => {
746746
}
747747
```
748748
749-
Vous devrez apporter des modifications au réducteur existant de l'application. Créez un réducteur séparé pour la nouvelle fonctionnalité en utilisant la fonction <em>createSlice</em> de Redux Toolkit.
749+
Vous devrez apporter des modifications au reducer existant de l'application. Créez un reducer séparé pour la nouvelle fonctionnalité en utilisant la fonction <em>createSlice</em> de Redux Toolkit.
750750
751751
À ce stade des exercices, il n'est pas nécessaire que l'application utilise le composant <i>Notification</i> de manière intelligente. Il suffit que l'application affiche la valeur initiale définie pour le message dans le <i>notificationReducer</i>.
752752

0 commit comments

Comments
 (0)