File tree Expand file tree Collapse file tree 1 file changed +16
-16
lines changed
lib/components_guide_web/templates/react_typescript Expand file tree Collapse file tree 1 file changed +16
-16
lines changed Original file line number Diff line number Diff line change 1
1
# React ` useReducer ` patterns
2
2
3
- ## Multiple controls where only one can be open at a time
3
+ ## Menu
4
4
5
5
``` ts
6
- type FilterValue = null | " first " | " second " | " third " ; // null means closed
6
+ type Menu = null | " file " | " edit " | " view " ; // null means closed
7
7
8
- const [openFilter, dispatchOpen ] = useReducer (
9
- (current : FilterValue , action : FilterValue ) => {
8
+ const [openMenu, tap ] = useReducer (
9
+ (current : Menu , action : Menu ) => {
10
10
if (action === current ) {
11
- return null ;
11
+ return null ; // Close if matches
12
12
}
13
13
14
- return action ;
14
+ return action ; // Use passed value
15
15
},
16
16
null
17
17
);
18
18
19
- dispatchOpen ( " first " ) // "first "
20
- dispatchOpen (null ) // null
21
- dispatchOpen ( " first " ) // "first "
22
- dispatchOpen ( " first " ) // null
23
- dispatchOpen ( " first " ) // "first "
24
- dispatchOpen ( " second " ) // "second "
25
- dispatchOpen ( " third " ) // "third "
26
- dispatchOpen ( " second " ) // "second "
27
- dispatchOpen ( " second " ) // null
28
- dispatchOpen (null ) // null
19
+ tap ( " file " ) // "file "
20
+ tap (null ) // null
21
+ tap ( " file " ) // "file "
22
+ tap ( " file " ) // null
23
+ tap ( " file " ) // "file "
24
+ tap ( " edit " ) // "edit "
25
+ tap ( " view " ) // "view "
26
+ tap ( " edit " ) // "edit "
27
+ tap ( " edit " ) // null
28
+ tap (null ) // null
29
29
```
You can’t perform that action at this time.
0 commit comments