Translation part 6 b in french line 187

Author: Leagian

src/content/6/fr/part6a.md

@@ -899,7 +899,7 @@ const App = () => {
 
 ### Transmettre le Store Redux à divers composants
 
-À part le réducteur, notre application est dans un seul fichier. Cela n'est bien sûr pas sensé, et nous devrions séparer <i>App</i> dans son propre module.
+À part le reducer, notre application est dans un seul fichier. Cela n'est bien sûr pas sensé, et nous devrions séparer <i>App</i> dans son propre module.
 
 La question est maintenant, comment <i>App</i> peut-il accéder au store après le déménagement? Et plus largement, lorsqu'un composant est composé de nombreux petits composants, il doit y avoir un moyen pour tous les composants d'accéder au store.
 Il existe plusieurs façons de partager le store Redux avec les composants. D'abord, nous examinerons la manière la plus récente, et peut-être la plus facile, qui est d'utiliser l'API [hooks](https://react-redux.js.org/api/hooks) de la bibliothèque [react-redux](https://react-redux.js.org/).
@@ -935,7 +935,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 Notez que l'application est maintenant définie comme un enfant d'un composant [Provider](https://react-redux.js.org/api/provider) fourni par la bibliothèque react-redux.
 Le store de l'application est donné au Provider en tant qu'attribut <i>store</i>.
 
-La définition des créateurs d'actions a été déplacée dans le fichier <i>reducers/noteReducer.js</i> où le réducteur est défini. Ce fichier ressemble à ceci:
+La définition des créateurs d'actions a été déplacée dans le fichier <i>reducers/noteReducer.js</i> où le reducer est défini. Ce fichier ressemble à ceci:
 
 ```js
 const noteReducer = (state = [], action) => {
@@ -970,7 +970,7 @@ Si l'application a de nombreux composants qui ont besoin du store, le composant
 
 Le module a maintenant plusieurs commandes [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export).
 
-La fonction réducteur est toujours retournée avec la commande <i>export default</i>, donc le réducteur peut être importé de la manière habituelle:
+La fonction reducer est toujours retournée avec la commande <i>export default</i>, donc le reducer peut être importé de la manière habituelle:
 
 ```js
 import noteReducer from './reducers/noteReducer'

src/content/6/fr/part6b.md

@@ -9,7 +9,7 @@ lang: fr
 
 Continuons notre travail avec la [version simplifiée Redux](/en/part6/flux_architecture_and_redux#redux-notes) de notre application de notes.
 
-Pour faciliter notre développement, modifions notre réducteur afin que le store soit initialisé avec un état contenant quelques notes:
+Pour faciliter notre développement, modifions notre reducer afin que le store soit initialisé avec un état contenant quelques notes:
 
 ```js
 const initialState = [
@@ -71,6 +71,119 @@ const App = () => {
 }
 ```
 
+Puisque l'attribut <i>name</i> de tous les boutons radio est le même, ils forment un <i>groupe de boutons</i> où une seule option peut être sélectionnée.
 
+Les boutons ont un gestionnaire de changement qui imprime actuellement seulement la chaîne associée au bouton cliqué dans la console.
+
+Nous décidons d'implémenter la fonctionnalité de filtre en stockant <i>la valeur du filtre</i> dans le store Redux en plus des notes elles-mêmes. L'état du store devrait ressembler à ceci après avoir effectué ces changements:
+
+```js
+{
+  notes: [
+    { content: 'reducer defines how redux store works', important: true, id: 1},
+    { content: 'state of store can contain any data', important: false, id: 2}
+  ],
+  filter: 'IMPORTANT'
+}
+```
+
+Dans l'implémentation actuelle de notre application, seul le tableau de notes est stocké dans l'état. Dans la nouvelle implémentation, l'objet d'état a deux propriétés, <i>notes</i> qui contient le tableau de notes et <i>filter</i> qui contient une chaîne indiquant quelles notes doivent être affichées à l'utilisateur.
+
+### Reducers combinés
+
+Nous pourrions modifier notre reducer actuel pour gérer la nouvelle forme de l'état. Cependant, une meilleure solution dans cette situation est de définir un nouveau reducer séparé pour l'état du filtre:
+
+```js
+const filterReducer = (state = 'ALL', action) => {
+  switch (action.type) {
+    case 'SET_FILTER':
+      return action.payload
+    default:
+      return state
+  }
+}
+```
+
+Les actions pour changer l'état du filtre ressemblent à ceci:
+
+```js
+{
+  type: 'SET_FILTER',
+  payload: 'IMPORTANT'
+}
+```
+
+Créons également une nouvelle fonction de _créateur d'action_. Nous écrirons le code pour le créateur d'action dans un nouveau module <i>src/reducers/filterReducer.js</i>:
+
+```js
+const filterReducer = (state = 'ALL', action) => {
+  // ...
+}
+
+export const filterChange = filter => {
+  return {
+    type: 'SET_FILTER',
+    payload: filter,
+  }
+}
+
+export default filterReducer
+```
+
+Nous pouvons créer le reducer actuel pour notre application en combinant les deux reducers existants avec la fonction [combineReducers](https://redux.js.org/api/combinereducers).
+
+Définissons le reducer combiné dans le fichier <i>main.jsx</i>:
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { createStore, combineReducers } from 'redux' // highlight-line
+import { Provider } from 'react-redux' 
+import App from './App'
+
+import noteReducer from './reducers/noteReducer'
+import filterReducer from './reducers/filterReducer' // highlight-line
+
+ // highlight-start
+const reducer = combineReducers({
+  notes: noteReducer,
+  filter: filterReducer
+})
+ // highlight-end
+
+const store = createStore(reducer) // highlight-line
+
+console.log(store.getState())
+
+/*
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+)*/
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Provider store={store}>
+    <div />
+  </Provider>
+)
+```
+
+Puisque notre application se casse complètement à ce point, nous rendons un élément <i>div</i> vide au lieu du composant <i>App</i>.
+
+L'état du store est imprimé dans la console:
+
+[console devtools montrant les données du tableau de notes](../../images/6/4e.png)
+
+Comme nous pouvons le voir dans la sortie, le store a exactement la forme que nous voulions!
+
+Examinons de plus près comment le reducer combiné est créé:
+
+```js
+const reducer = combineReducers({
+  notes: noteReducer,
+  filter: filterReducer,
+})
+```
 
 </div>