Skip to content

Commit a98d212

Browse files
committed
Translation part 6 b in french line 70
1 parent 975aa01 commit a98d212

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

src/content/6/fr/part6b.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
mainImage: ../../../images/part-6.svg
3+
part: 6
4+
letter: b
5+
lang: fr
6+
---
7+
8+
<div class="content">
9+
10+
Continuons notre travail avec la [version simplifiée Redux](/en/part6/flux_architecture_and_redux#redux-notes) de notre application de notes.
11+
12+
Pour faciliter notre développement, modifions notre réducteur afin que le store soit initialisé avec un état contenant quelques notes:
13+
14+
```js
15+
const initialState = [
16+
{
17+
content: 'reducer defines how redux store works',
18+
important: true,
19+
id: 1,
20+
},
21+
{
22+
content: 'state of store can contain any data',
23+
important: false,
24+
id: 2,
25+
},
26+
]
27+
28+
const noteReducer = (state = initialState, action) => {
29+
// ...
30+
}
31+
32+
// ...
33+
export default noteReducer
34+
```
35+
36+
### Store avec un état complexe
37+
38+
Implémentons un filtrage pour les notes affichées à l'utilisateur. L'interface utilisateur pour les filtres sera mise en oeuvre avec des [boutons radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio):
39+
40+
![navigateur avec boutons radio important/pas important et liste](../../images/6/01e.png)
41+
42+
Commençons par une mise en oeuvre très simple et directe:
43+
44+
```js
45+
import NewNote from './components/NewNote'
46+
import Notes from './components/Notes'
47+
48+
const App = () => {
49+
//highlight-start
50+
const filterSelected = (value) => {
51+
console.log(value)
52+
}
53+
//highlight-end
54+
55+
return (
56+
<div>
57+
<NewNote />
58+
//highlight-start
59+
<div>
60+
all <input type="radio" name="filter"
61+
onChange={() => filterSelected('ALL')} />
62+
important <input type="radio" name="filter"
63+
onChange={() => filterSelected('IMPORTANT')} />
64+
nonimportant <input type="radio" name="filter"
65+
onChange={() => filterSelected('NONIMPORTANT')} />
66+
</div>
67+
//highlight-end
68+
<Notes />
69+
</div>
70+
)
71+
}
72+
```
73+
74+
75+
76+
</div>

0 commit comments

Comments
 (0)