feat: Add reducer examples for React useReducer
This commit is contained in:
parent
8bf5c5de40
commit
68344817ae
@ -50,24 +50,13 @@ Parlons dans un premier temps de la signature d'un reducer :
|
|||||||
|
|
||||||
{% tab value="jsx" label="JSX" %}
|
{% tab value="jsx" label="JSX" %}
|
||||||
|
|
||||||
{% snippet path="data/docs/react/usereducer/reducer-example.jsx" language="jsx" label="test" showLineNumbers=true /%}
|
{% snippet path="data/docs/react/usereducer/reducer-example.jsx" language="jsx" showLineNumbers=true /%}
|
||||||
|
|
||||||
{% /tab %}
|
{% /tab %}
|
||||||
|
|
||||||
{% tab value="tsx" label="TSX" %}
|
{% tab value="tsx" label="TSX" %}
|
||||||
|
|
||||||
```tsx
|
{% snippet path="data/docs/react/usereducer/reducer-example.tsx" language="tsx" showLineNumbers=true /%}
|
||||||
const reducer = (state: State, action: Action) => {
|
|
||||||
switch (action.type) {
|
|
||||||
case "TYPE_1":
|
|
||||||
return { ...state /* Nouvel état */ };
|
|
||||||
case "TYPE_2":
|
|
||||||
return { ...state /* Nouvel état */ };
|
|
||||||
default:
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
{% /tab %}
|
||||||
|
|
||||||
@ -93,18 +82,7 @@ En déversant le contenu de l'état actuel, on s'assure de ne pas perdre ces pro
|
|||||||
|
|
||||||
Par exemple :
|
Par exemple :
|
||||||
|
|
||||||
```js
|
{% snippet path="data/docs/react/usereducer/reducer-why-spread-operator.jsx" language="jsx" showLineNumbers=true /%}
|
||||||
const initialState = { count: 0, message: "Hello" };
|
|
||||||
|
|
||||||
const reducer = (state, action) => {
|
|
||||||
switch (action.type) {
|
|
||||||
case "INCREMENT":
|
|
||||||
return { count: state.count + 1 };
|
|
||||||
default:
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
On perdrait ici la propriété `message` si on ne la déversait pas dans le nouvel état.
|
On perdrait ici la propriété `message` si on ne la déversait pas dans le nouvel état.
|
||||||
|
|
||||||
|
|||||||
10
app/data/docs/react/usereducer/reducer-example.tsx
Normal file
10
app/data/docs/react/usereducer/reducer-example.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
const reducer = (state: State, action: Action) => {
|
||||||
|
switch (action.type) {
|
||||||
|
case "TYPE_1":
|
||||||
|
return { ...state /* Nouvel état */ };
|
||||||
|
case "TYPE_2":
|
||||||
|
return { ...state /* Nouvel état */ };
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
const initialState = { count: 0, message: "Hello" };
|
||||||
|
|
||||||
|
const reducer = (state, action) => {
|
||||||
|
switch (action.type) {
|
||||||
|
case "INCREMENT":
|
||||||
|
return { count: state.count + 1 };
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user