‭1.

Partie théorique :‬
‭1. **Commande pour créer un nouveau projet React:**‬
‭- `npx create-react-app nom_du_projet`‬

‭2. **Port par défaut du serveur de développement React:**‬

‭- `3000`‬

‭3. **Copie du DOM "réel" conservée en mémoire:**‬

‭- `a. Virtual DOM`‬

‭4. **Props dans ReactJS:**‬

‭- `c) Les deux a et b sont vrais.`‬
‭2. Partie pratique‬
‭Étape 1: Création du store et les reducers avec Redux Toolkit‬
‭1. **Créer le store Redux:** - Dans `features/store.js`:‬
// features/store.js‬
‭
import‬‭
‭ {‬‭
configureStore‬‭
}‬‭
from‬‭
"‭
@
‬reduxjs/toolkit‬
"‬
‭;‬
‭
import‬‭
‭ usersReducer‬‭
from‬‭
"‬
./usersSlice‬
‭ "‭
‭;
‬‬
const‬‭
‭ store‬‭
=‬‭
configureStore‬
({‬
‭
reducer‬
‭ :‬‭
‭ {‬
user‬
‭ :‬‭
‭ usersReducer‬
,‬
‭
},‬
‭
});‬
‭
export‬‭
‭ default‬‭
store‬
;‬
‭

‭ -3-4. **Créer le slice usersSlice:** - Dans `features/usersSlice.js`:‬

2
// features/usersSlice.js‬
‭
import‬‭
‭ {‬‭
createSlice‬
,‬‭
‭ createAsyncThunk‬‭
}‬‭
from‬‭
"‬
@reduxjs/toolkit‬
‭ "‭
‭;
‬‬
import‬‭
‭ axios‬‭
from‬‭
"‬
axios‬
‭ "‭
‭;
‬‬

const‬‭
‭ initialState‬‭
=‬‭
{‬
value‬
‭ :‬‭
‭ [],‬
isLoading‬
‭ :‬‭
‭ null‬
,‬
‭
err‬
‭ :‬‭
‭ null‬
,‬
‭
};‬
‭

export‬‭
‭ const‬‭
getUsers‬‭
=‬‭
createAsyncThunk‬
(‭
‭"
‬‬
user/getUser‬
‭ "‭
‭,
‬‬
async‬‭
‭ (‭
_
‬‬
,‬‭
‭ thunkAPI‬
)‬‭
‭ =>‬‭
{‬
const‬‭
‭ {‬‭
rejectWithValue‬‭
}‬‭
=‬‭
thunkAPI‬
;‬
‭
try‬‭
‭ {‬
const‬‭
‭ resp‬‭
=‬‭
await‬‭
axios‬
.‭
‭g‬et‬
(‬
‭'‭
‭h
‬ttp://localhost:3006/users‬
'‭
‭)
‬;‬
return‬‭
‭ resp‬
.‭
‭d
‬ata‬
;‬
‭
}‬‭
‭ catch‬‭
(‬
error‬
‭ )‬‭
‭ {‬
return‬‭
‭ rejectWithValue‬
(‭
‭e‬rror‬
.‬
‭message‬
‭ );‬
‭
}‬
‭
});‬
‭

export‬‭
‭ const‬‭
addUser‬‭
=‬‭
createAsyncThunk‬
(‬
‭"‭
‭u
‬ser/addUser‬
"‬
‭,‬
‭
async‬‭
‭ (‭
a
‬rg‬
,‬‭
‭ thunkAPI‬
)‬‭
‭ =>‬‭
{‬
 const‬‭
‭ {‬‭
rejectWithValue‬‭
}‬‭
=‬‭
thunkAPI‬
;‬
‭
try‬‭
‭ {‬
const‬‭
‭ resp‬‭
=‬‭
await‬‭
axios‬
.‭
‭p‬ost‬
(‭̀
‭‬http://localhost:3006/users`‬
,‬‭
‭ arg‬
);‬
‭
return‬‭
‭ resp‬
.‭
‭d
‬ata‬
;‬
‭
}‬‭
‭ catch‬‭
(‬
error‬
‭ )‬‭
‭ {‬
return‬‭
‭ rejectWithValue‬
(‭
‭e‬rror‬
.‬
‭message‬
‭ );‬
‭
}‬
‭
});‬
‭

export‬‭
‭ const‬‭
deleteUser‬‭
=‬‭
createAsyncThunk‬
(‭
‭"
‬‬
user/deleteUser‬
‭ "‭
‭,
‬‬
async‬‭
‭ (‭
i
‬d‬
,‬‭
‭ thunkAPI‬
)‬‭
‭ =>‬‭
{‬
const‬‭
‭ {‬‭
rejectWithValue‬‭
}‬‭
=‬‭
thunkAPI‬
;‬
‭
try‬‭
‭ {‬
await‬‭
‭ axios‬
.‭
‭d‬elete‬
(‭̀
‭‬http://localhost:3006/users/‬
${‬
‭ id‬
‭ }‭̀
‭‬‭)
‬;‬
return‬‭
‭ id‬
;‬
‭
}‬‭
‭ catch‬‭
(‬
error‬
‭ )‬‭
‭ {‬
return‬‭
‭ rejectWithValue‬
(‭
‭e‬rror‬
.‬
‭message‬
‭ );‬
‭
}‬
‭
});‬
‭

export‬‭
‭ const‬‭
updateUser‬‭
=‬‭
createAsyncThunk‬
(‭
‭"
‬‬
user/updateUser‬
‭ "‭
‭,
‬‬
async‬‭
‭ (‭
u
‬ser‬
,‬‭
‭ thunkAPI‬
)‬‭
‭ =>‬‭
{‬
const‬‭
‭ {‬‭
rejectWithValue‬‭
}‬‭
=‬‭
thunkAPI‬
;‬
‭
try‬‭
‭ {‬
const‬‭
‭ resp‬‭
=‬‭
await‬‭
axios‬
.‭
‭p‬ut‬
(‬
‭‭̀http://localhost:3006/users/‬
${‬
‭ user‬
‭ .‭
‭i
‬d‬
}‬
‭‭̀‭
,
‬‬‭
user‬
);‬
‭
return‬‭
‭ resp‬
.‭
‭d
‬ata‬
;‬
‭
}‬‭
‭ catch‬‭
(‬
error‬
‭ )‬‭
‭ {‬
return‬‭
‭ rejectWithValue‬
(‭
‭e‬rror‬
.‬
‭message‬
‭ );‬
‭
}‬
‭
});‬
‭

const‬‭
‭ userSlice‬‭
=‬‭
createSlice‬
({‬
‭
name‬
‭ :‬‭
‭ "‭
u
‬ser‬
"‬
‭ ,‬
‭
initialState‬
‭ ,‬
‭
reducers‬
‭ :‬‭
‭ {},‬
extraReducers‬
‭ :‬‭
‭ {‬
[‭
‭g
‬etUsers‬
.‬
‭ pending‬
‭ ]:‬‭
‭ (‭
s
‬tate‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭v
‬alue‬‭
=‬‭
[];‬
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
true‬
;‬
‭
},‬
‭
[‭
‭g
‬etUsers‬
.‬
‭ fulfilled‬
‭ ]:‬‭
‭ (‭
s
‬tate‬
,‬‭
‭ action‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭v
‬alue‬‭
=‬‭
action‬
.‭
‭p
‬ayload‬
;‬
‭
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
false‬
;‬
‭
},‬
‭
[‭
‭g
‬etUsers‬
.‬
‭ rejected‬
‭ ]:‬‭
‭ (‬
state‬
‭ ,‬‭
‭ action‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭e
‬rr‬‭
=‬‭
action‬
.‭
‭p
‬ayload‬
;‬
‭
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
false‬
;‬
‭
 },‬
‭
[‭
‭a
‬ddUser‬
.‬
‭pending‬
‭ ]:‬‭
‭ (‭
s
‬tate‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
true‬
;‬
‭
},‬
‭
[‭
‭a
‬ddUser‬
.‬
‭fulfilled‬
‭ ]:‬‭
‭ (‬
state‬
‭ ,‬‭
‭ action‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭v
‬alue‬
.‭
‭p‬ush‬
(‬
‭ action‬
‭ .‬
‭payload‬
‭ );‬
‭
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
false‬
;‬
‭
},‬
‭
[‭
‭a
‬ddUser‬
.‬
‭rejected‬
‭ ]:‬‭
‭ (‭
s
‬tate‬
,‬‭
‭ action‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭e
‬rr‬‭
=‬‭
action‬
.‭
‭p
‬ayload‬
;‬
‭
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
false‬
;‬
‭
},‬
‭
[‭
‭d
‬eleteUser‬
.‭
‭ p
‬ending‬
]:‬‭
‭ (‭
s
‬tate‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
true‬
;‬
‭
},‬
‭
[‭
‭d
‬eleteUser‬
.‭
‭ f
‬ulfilled‬
]:‬‭
‭ (‭
s
‬tate‬
,‬‭
‭ action‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭v
‬alue‬‭
=‬‭
state‬
.‬
‭value‬
‭ .‭
‭f
‬ilter‬
((‬
‭ item‬
‭ )‬‭
‭ =>‬‭
item‬
.‬
‭id‬‭
‭ !==‬‭
action‬
.‬
‭payload‬
‭ );‬
‭
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
false‬
;‬
‭
},‬
‭
[‭
‭d
‬eleteUser‬
.‭
‭ r
‬ejected‬
]:‬‭
‭ (‬
state‬
‭ ,‬‭
‭ action‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭e
‬rr‬‭
=‬‭
action‬
.‭
‭p
‬ayload‬
;‬
‭
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
false‬
;‬
‭
},‬
‭
[‭
‭u
‬pdateUser‬
.‭
‭ p
‬ending‬
]:‬‭
‭ (‭
s
‬tate‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
true‬
;‬
‭
},‬
‭
[‭
‭u
‬pdateUser‬
.‭
‭ f
‬ulfilled‬
]:‬‭
‭ (‭
s
‬tate‬
,‬‭
‭ action‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭v
‬alue‬‭
=‬‭
state‬
.‬
‭value‬
‭ .‭
‭f
‬ilter‬
((‬
‭ item‬
‭ )‬‭
‭ =>‬‭
item‬
.‬
‭id‬‭
‭ !==‬‭
action‬
.‬
‭payload‬
‭ .‭
‭i
‬d‬
);‬
‭
state‬
‭ .‭
‭v
‬alue‬
.‭
‭p‬ush‬
(‬
‭ action‬
‭ .‬
‭payload‬
‭ );‬
‭
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
false‬
;‬
‭
},‬
‭
[‭
‭u
‬pdateUser‬
.‭
‭ r
‬ejected‬
]:‬‭
‭ (‬
state‬
‭ ,‬‭
‭ action‬
)‬‭
‭ =>‬‭
{‬
state‬
‭ .‭
‭e
‬rr‬‭
=‬‭
action‬
.‭
‭p
‬ayload‬
;‬
‭
state‬
‭ .‭
‭i
‬sLoading‬‭
=‬‭
false‬
;‬
‭
},‬
‭
},‬
‭
});‬
‭

export‬‭
‭ default‬‭
userSlice‬
.‭
‭r
‬educer‬
;‬
‭

‭Etape 2: Donner les scripts en React JS des composants suivants :‬

‭1. **<App/>:** - Dans `components/App.js`:‬
// components/App.js‬
‭
import‬‭
‭ React‬‭
from‬‭
"‬
react‬
‭ "‭
‭;
‬‬
import‬‭
‭ store‬‭
from‬‭
"‬
../features/store‬
‭ "‬
‭;‬
‭
import‬‭
‭ {‬‭
Provider‬‭
}‬‭
from‬‭
"‬
react-redux‬
‭ "‭
‭;
‬‬
import‬‭
‭ UsersList‬‭
from‬‭
"‬
./UsersList‬
‭ "‬
‭;‬
‭
import‬‭
‭ AddUser‬‭
from‬‭
"‬
./AddUser‬
‭ "‭
‭;
‬‬
import‬‭
‭ UserEdit‬‭
from‬‭
"‭
.
‬/UserEdit‬
"‬
‭;‬
‭
import‬‭
‭ {‬‭
BrowserRouter‬
,‬‭
‭ Route‬
,‬‭
‭ Routes‬‭
}‬‭
from‬‭
'‭
r
‬eact-router-dom‬
'‬
‭;‬
‭

function‬‭
‭ App‬
()‬‭
‭ {‬
return‬‭
‭ (‬
<>‬
‭
<‬
‭Provider‬‭
‭ store‬
=‭
‭{
‬‬
store‬
‭ }‭
‭>
‬‬
<‭
‭B
‬rowserRouter‬
>‬
‭
<‭
‭R
‬outes‬
>‬
‭
<‬
‭Route‬‭
‭ path‬
=‭
‭"
‬"‬‭
element‬
=‬
‭{‭
‭<
‬‬
UsersList‬‭
‭ />‬
}‬‭
‭ />‬
<‬
‭Route‬‭
‭ path‬
=‭
‭"
‬‭
/
‬userEdit/:id‬
"‬‭
‭ element‬
=‭
‭{
‬‬
<‭
‭U
‬serEdit‬‭
/>‬
}‬‭
‭ />‬
<‬
‭Route‬‭
‭ path‬
=‭
‭"
‬‭
/
‬addUser‬
"‬‭
‭ element‬
=‭
‭{
‬‬
<‭
‭A
‬ddUser‬‭
/>‬
}‬‭
‭ />‬
</‬
‭ Routes‬
‭ >‬
‭
</‬
‭ BrowserRouter‬
‭ >‬
‭
</‬
‭ Provider‬
‭ >‬
‭
</>‬
‭
);‬
‭
}‬
‭
export‬‭
‭ default‬‭
App‬
;‬
‭

‭2. **<UsersList/>:** - Dans `components/UsersList.js`:‬

// components/UsersList.js‬
‭
import‬‭
‭ React‬
,‬‭
‭ {‬‭
useEffect‬‭
}‬‭
from‬‭
'‭
r
‬eact‬
'‬
‭;‬
‭
import‬‭
‭ {‬‭
useDispatch‬
,‬‭
‭ useSelector‬‭
}‬‭
from‬‭
'‬
react-redux‬
‭ '‬
‭;‬
‭
import‬‭
‭ {‬‭
getUsers‬‭
}‬‭
from‬‭
'‬
../features/usersSlice‬
‭ '‬
‭;‬
‭
import‬‭
‭ UserItem‬‭
from‬‭
'‭
.
‬/UserItem‬
'‬
‭;‬
‭
import‬‭
‭ {‬‭
NavLink‬‭
}‬‭
from‬‭
'‭
r
‬eact-router-dom‬
'‬
‭;‬
‭

const‬‭
‭ UsersList‬‭
=‬‭
()‬‭
=>‬‭
{‬
const‬‭
‭ dispatch‬‭
=‬‭
useDispatch‬
();‬
‭

useEffect‬
‭ (()‬‭
‭ =>‬‭
{‬
dispatch‬
‭ (‬
‭getUsers‬
‭ ());‬
‭
},‬‭
‭ [‭
d
‬ispatch‬
]);‬
‭

const‬‭
‭ {‬‭
value‬
,‬‭
‭ isLoading‬
,‬‭
‭ err‬‭
}‬‭
=‬‭
useSelector‬
((‬
‭ state‬
‭ )‬‭
‭ =>‬‭
state‬
.‬
‭user‬
‭ );‬
‭

const‬‭
‭ users‬‭
=‬‭
(‬
<div‬‭
‭ className‬
=‬
‭ '‭
‭r
‬ow‬
'‭
‭>
‬‬
{‬
‭value‬
‭ .‬
‭length‬‭
‭ >‬‭
0‬‭
?‬‭
value‬
.‭
‭m
‬ap‬
((‬
‭ item‬
‭ )‬‭
‭ =>‬‭
<‬
UserItem‬‭
‭ user‬
=‬
‭{‭
‭i
‬tem‬
}‬‭
‭ key‬
=‬
‭{‭
‭i
‬tem‬
.‭
‭i
‬d‬
}‬‭
‭ />‬
)‬‭
‭ :‬
null‬
‭ }‬
‭
</div>‬
‭
);‬
‭

if‬‭
‭ (‭
e
‬rr‬‭
!==‬‭
null‬
)‬‭
‭ {‬
 return‬‭
‭ <h1>‬
{‭
‭ e
‬rr‬
}‭
‭<
‬/h1>‬
;‬
‭
}‬
‭

return‬‭
‭ (‬
<div‬‭
‭ className‬
=‬
‭ "‭
‭c
‬ontainer mt-5‬
"‬
‭>‬
‭
<h1>‬
‭ Users List‬
‭ </h1>‬
‭
{‬
‭isLoading‬‭
‭ ?‬‭
'‭
L
‬oading...‬
'‬‭
‭ :‬‭
users‬
}‬
‭
{‬
‭value‬
‭ .‬
‭length‬‭
‭ ===‬‭
0‬‭
&&‬‭
!‬
isLoading‬‭
‭ &&‬‭
<h2>‬
There are no users‬
‭ </h2>‬
‭ }‭
‭<
‬br />‬
<‬
‭NavLink‬‭
‭ to‬
=‭
‭"
‬‬
/addUser‬
‭ "‬
‭>‬
‭
<button‬‭
‭ className‬
=‬
‭'‭
‭b
‬tn btn-info‬
'‬
‭>‭
‭A
‬dd User‬
</button>‬
‭
</‬
‭ NavLink‬
‭ >‬
‭
</div>‬
‭
);‬
‭
};‬
‭

export‬‭
‭ default‬‭
UsersList‬
;‬
‭

‭ . **<UserItem/>:** - Dans `components/UserItem.js`:‬

3
// components/UserItem.js‬
‭
import‬‭
‭ React‬‭
from‬‭
"‬
react‬
‭ "‭
‭;
‬‬
import‬‭
‭ {‬‭
useDispatch‬‭
}‬‭
from‬‭
"‭
r
‬eact-redux‬
"‭
‭;
‬‬
import‬‭
‭ {‬‭
NavLink‬‭
}‬‭
from‬‭
"‭
r
‬eact-router-dom‬
"‬
‭;‬
‭
import‬‭
‭ {‬‭
deleteUser‬‭
}‬‭
from‬‭
"‬
../features/usersSlice‬
‭ "‬
‭;‬
‭

export‬‭
‭ default‬‭
function‬‭
UserItem‬
(‬
‭props‬
‭ )‬‭
‭ {‬
const‬‭
‭ {‬‭
name‬
,‬‭
‭ username‬
,‬‭
‭ email‬
,‬‭
‭ id‬‭
}‬‭
=‬‭
props‬
.‭
‭u
‬ser‬
;‬
‭
const‬‭
‭ dispatch‬‭
=‬‭
useDispatch‬
();‬
‭

const‬‭
‭ handleDelete‬‭
=‬‭
()‬‭
=>‬‭
{‬
dispatch‬
‭ (‬
‭deleteUser‬
‭ (‭
‭ i
‬d‬
));‬
‭
};‬
‭

return‬‭
‭ (‬
<div‬‭
‭ className‬
=‬
‭ "‭
‭c
‬ol-md-3 mb-3‬
"‭
‭>
‬‬
<div‬‭
‭ className‬
=‬
‭ "‭
‭b
‬order border-dark rounded p-3‬
"‭
‭>
‬‬
<h3‬‭
‭ className‬
=‭
‭"‬‬
mb-3‬
‭ "‬
‭>‬‭
‭ {‭
n
‬ame‬
}‭
‭<
‬/h3>‬
<p‬‭
‭ className‬
=‬
‭ "‭
‭t
‬ext-muted mb-2‬
"‭
‭>
‬‭
{
‬‬
username‬
‭ }‬
‭</p>‬
‭
<p‬‭
‭ className‬
=‬
‭ "‭
‭m
‬b-3‬
"‭
‭>
‬‬
{‭
‭e
‬mail‬
}‬
‭</p>‬
‭
<‭
‭N
‬avLink‬‭
to‬
=‭
‭{
‬‬
‭̀/userEdit/‬
${‬
‭ id‬
‭ }‬
‭‭̀‭
}
‬‬‭
className‬
=‭
‭"
‬‬
btn btn-warning me-2‬
‭ "‬
‭>‬‭
‭ Edit‬‭
</‬
NavLink‬
‭ >‬
‭
<button‬‭
‭ className‬
=‬
‭"‭
‭b
‬tn btn-danger‬
"‬‭
‭ onClick‬
=‬
‭{‭
‭h
‬andleDelete‬
}‬
‭>‬‭
‭ Delete‬‭
</button>‬
</div>‬
‭
</div>‬
‭
);‬
‭
}‬
‭

‭4. **<UserEdit/>:** - Dans `components/UserEdit.js`:‬

// components/UserEdit.js‬
‭
import‬‭
‭ React‬
,‬‭
‭ {‬‭
useState‬
,‬‭
‭ useEffect‬‭
}‬‭
from‬‭
"‬
react‬
‭ "‭
‭;
‬‬
import‬‭
‭ {‬‭
useDispatch‬
,‬‭
‭ useSelector‬‭
}‬‭
from‬‭
"‬
react-redux‬
‭ "‬
‭;‬
‭
import‬‭
‭ {‬‭
useParams‬
,‬‭
‭ useNavigate‬‭
}‬‭
from‬‭
"‬
react-router-dom‬
‭ "‭
‭;
‬‬
import‬‭
‭ {‬‭
updateUser‬‭
}‬‭
from‬‭
"‬
../features/usersSlice‬
‭ "‬
‭;‬
‭
import‬‭
‭ {‬‭
Link‬‭
}‬‭
from‬‭
"‭
r
‬eact-router-dom‬
"‭
‭;
‬‬

const‬‭
‭ UserEdit‬‭
=‬‭
()‬‭
=>‬‭
{‬
const‬‭
‭ dispatch‬‭
=‬‭
useDispatch‬
();‬
‭
const‬‭
‭ navigate‬‭
=‬‭
useNavigate‬
();‬
‭
const‬‭
‭ {‬‭
id‬‭
}‬‭
=‬‭
useParams‬
();‬
‭
const‬‭
‭ user‬‭
=‬‭
useSelector‬
((‬
‭ state‬
‭ )‬‭
‭ =>‬‭
state‬
.‬
‭user‬
‭ .‬
‭value‬
‭ .‭
‭f
‬ind‬
((‬
‭ item‬
‭ )‬‭
‭ =>‬‭
item‬
.‭
‭i
‬d‬‭
===‬
parseInt‬
‭ (‭
‭i
‬d‬
)));‬
‭
const‬‭
‭ [‭
u
‬serData‬
,‬‭
‭ setUserData‬
]‬‭
‭ =‬‭
useState‬
({‬
‭
name‬
‭ :‬‭
‭ user‬‭
?‬‭
user‬
.‭
‭n
‬ame‬‭
:‬‭
""‬
,‬
‭
username‬
‭ :‬‭
‭ user‬‭
?‬‭
user‬
.‬
‭username‬‭
‭ :‬‭
""‬
,‬
‭
email‬
‭ :‬‭
‭ user‬‭
?‬‭
user‬
.‬
‭ email‬‭
‭ :‬‭
""‬
,‬
‭
});‬
‭

useEffect‬
‭ (()‬‭
‭ =>‬‭
{‬
if‬‭
‭ (‭
u
‬ser‬
)‬‭
‭ {‬
setUserData‬
‭ ({‬
‭
name‬
‭ :‬‭
‭ user‬
.‬
‭name‬
‭ ,‬
‭
username‬
‭ :‬‭
‭ user‬
.‬
‭ username‬
‭ ,‬
‭
email‬
‭ :‬‭
‭ user‬
.‭
‭e
‬mail‬
,‬
‭
});‬
‭
}‬
‭
},‬‭
‭ [‭
u
‬ser‬
]);‬
‭

const‬‭
‭ handleInputChange‬‭
=‬‭
(‭
e
‬‬
)‬‭
‭ =>‬‭
{‬
setUserData‬
‭ ({‬
‭ ...‬
‭ userData‬
‭ ,[‬
‭ e‭
‭.
‬‭
t
‬arget‬
.‭
‭n
‬ame‬
]:‬‭
‭ e‬
.‭
‭t
‬arget‬
.‭
‭v
‬alue‬
,});‬
‭
};‬
‭

const‬‭
‭ handleSubmit‬‭
=‬‭
(‭
e
‬‭
)
‬‬‭
=>‬‭
{‬
e‭
‭.
‬‭
p
‬reventDefault‬
();‬
‭
dispatch‬
‭ (‬
‭updateUser‬
‭ ({‬‭
‭ id‬
:‬‭
‭ user‬
.‬
‭id‬
‭ ,‬‭
‭ ...‬
userData‬‭
‭ }));‬
navigate‬
‭ (‬
‭"‬
‭ /‭
‭"
‬‭
)
‬;‬
};‬
‭

return‬‭
‭ (‬
<div‬‭
‭ className‬
=‬
‭ "‭
‭c
‬ontainer mt-4‬
"‬
‭>‬
‭
<h1>‬
‭ Edit User‬
‭ </h1>‬
‭
<form‬‭
‭ onSubmit‬
=‬
‭ {‭
‭h
‬andleSubmit‬
}‬
‭>‬
‭

<div‬‭
‭ className‬
=‬
‭ "‭
‭m
‬b-3‬
"‭
‭>
‬‬
<label‬‭
‭ className‬
=‭
‭"
‬‬
form-label‬
‭ "‭
‭>
‬‬
Name:‬
‭
<input‬
‭
 type‬
‭ =‬
‭"‭
‭t
‬ext‬
"‬
‭
className‬
‭ =‭
‭"
‬‭
f
‬orm-control‬
"‬
‭
name‬
‭ =‬
‭"‭
‭n
‬ame‬
"‬
‭
value‬
‭ =‭
‭{
‬‬
userData‬
‭ .‬
‭name‬
‭ }‬
‭
onChange‬
‭ =‬
‭{‭
‭h
‬andleInputChange‬
}‬
‭
/>‬
‭
</label>‬
‭
</div>‬
‭

<div‬‭
‭ className‬
=‬
‭ "‭
‭m
‬b-3‬
"‭
‭>
‬‬
<label‬‭
‭ className‬
=‭
‭"
‬‬
form-label‬
‭ "‭
‭>
‬‬
Username:‬
‭
<input‬
‭
type‬
‭ =‬
‭"‭
‭t
‬ext‬
"‬
‭
className‬
‭ =‭
‭"
‬‭
f
‬orm-control‬
"‬
‭
name‬
‭ =‬
‭"‭
‭u
‬sername‬
"‬
‭
value‬
‭ =‭
‭{
‬‬
userData‬
‭ .‬
‭username‬
‭ }‬
‭
onChange‬
‭ =‬
‭{‭
‭h
‬andleInputChange‬
}‬
‭
/>‬
‭
</label>‬
‭
</div>‬
‭

<div‬‭
‭ className‬
=‬
‭ "‭
‭m
‬b-3‬
"‭
‭>
‬‬
<label‬‭
‭ className‬
=‭
‭"
‬‬
form-label‬
‭ "‭
‭>
‬‬
Email:‬
‭
<input‬
‭
type‬
‭ =‬
‭"‭
‭t
‬ext‬
"‬
‭
className‬
‭ =‭
‭"
‬‭
f
‬orm-control‬
"‬
‭
name‬
‭ =‬
‭"‭
‭e
‬mail‬
"‬
‭
value‬
‭ =‭
‭{
‬‬
userData‬
‭ .‬
‭email‬
‭ }‬
‭
onChange‬
‭ =‬
‭{‭
‭h
‬andleInputChange‬
}‬
‭
/>‬
‭
</label>‬
‭
</div>‬
‭

<button‬‭
‭ type‬
=‬
‭"‭
‭s
‬ubmit‬
"‬‭
‭ className‬
=‬
‭"‭
‭b
‬tn btn-primary‬
"‭
‭>
‬‭
U
‬pdate User‬
</button>‬
‭
<‭
‭L
‬ink‬‭
to‬
=‭
‭"
‬‭
/
‬‬
"‭
‭>
‬<button>‬
back‬
‭ </button></‬
‭ Link‬
‭ >‬
‭
</form>‬
‭
</div>‬
‭
);‬
‭
};‬
‭
export‬‭
‭ default‬‭
UserEdit‬
;‬
‭
 ‭ addEdit/>:‬
<
// AddUser.js‬
‭
import‬‭
‭ React‬
,‬‭
‭ {‬‭
useState‬‭
}‬‭
from‬‭
"‬
react‬
‭ "‭
‭;
‬‬
import‬‭
‭ {‬‭
useDispatch‬‭
}‬‭
from‬‭
"‭
r
‬eact-redux‬
"‭
‭;
‬‬
import‬‭
‭ {‬‭
addUser‬‭
}‬‭
from‬‭
"‭
.
‬./features/usersSlice‬
"‭
‭;
‬‬
import‬‭
‭ {‭
L
‬ink‬
,‬‭
‭ useNavigate‬‭
}‬‭
from‬‭
"‭
r
‬eact-router-dom‬
"‬
‭;‬
‭

const‬‭
‭ AddUser‬‭
=‬‭
()‬‭
=>‬‭
{‬
const‬‭
‭ dispatch‬‭
=‬‭
useDispatch‬
();‬
‭
const‬‭
‭ navigate‬‭
=‬‭
useNavigate‬
();‬
‭

const‬‭
‭ [‭
u
‬serData‬
,‬‭
‭ setUserData‬
]‬‭
‭ =‬‭
useState‬
({‬
‭
name‬
‭ :‬‭
‭ ""‬
,‬
‭
username‬
‭ :‬‭
‭ ""‬
,‬
‭
email‬
‭ :‬‭
‭ ""‬
,‬
‭
});‬
‭

const‬‭
‭ handleChange‬‭
=‬‭
(‭
e
‬‭
)
‬‬‭
=>‬‭
{‬
setUserData‬
‭ ({‬
‭ ...‬
‭ userData‬
‭ ,[‬
‭ e‭
‭.
‬‭
t
‬arget‬
.‭
‭n
‬ame‬
]:‬‭
‭ e‬
.‭
‭t
‬arget‬
.‭
‭v
‬alue‬
,});‬
‭
};‬
‭

const‬‭
‭ handleSubmit‬‭
=‬‭
(‭
e
‬‭
)
‬‬‭
=>‬‭
{‬
e‭
‭.
‬‭
p
‬reventDefault‬
();‬
‭
dispatch‬
‭ (‬
‭addUser‬
‭ (‬
‭ userData‬
‭ ));‬
‭
navigate‬
‭ (‬
‭"‬
‭ /‭
‭"
‬‭
)
‬;‬
};‬
‭

return‬‭
‭ (‬
<div‬‭
‭ className‬
=‬
‭ "‭
‭c
‬ontainer mt-5‬
"‬
‭>‬
‭
<h2>‬
‭ Add User‬
‭ </h2>‬
‭

<form‬‭
‭ onSubmit‬
=‬
‭ {‭
‭h
‬andleSubmit‬
}‬
‭>‬
‭

<div‬‭
‭ className‬
=‬
‭ "‭
‭m
‬b-3‬
"‭
‭>
‬‬
<label‬‭
‭ className‬
=‭
‭"
‬‬
form-label‬
‭ "‭
‭>
‬‬
Name:‬
‭
<input‬
‭
type‬
‭ =‬
‭"‭
‭t
‬ext‬
"‬
‭
className‬
‭ =‭
‭"
‬‭
f
‬orm-control‬
"‬
‭
name‬
‭ =‬
‭"‭
‭n
‬ame‬
"‬
‭
value‬
‭ =‭
‭{
‬‬
userData‬
‭ .‬
‭name‬
‭ }‬
‭
onChange‬
‭ =‬
‭{‭
‭h
‬andleChange‬
}‬
‭
/>‬
‭
</label>‬
‭
</div>‬
‭
 <div‬‭
‭ className‬
=‬
‭ "‭
‭m
‬b-3‬
"‭
‭>
‬‬
<label‬‭
‭ className‬
=‭
‭"
‬‬
form-label‬
‭ "‭
‭>
‬‬
Username:‬
‭
<input‬
‭
type‬
‭ =‬
‭"‭
‭t
‬ext‬
"‬
‭
className‬
‭ =‭
‭"
‬‭
f
‬orm-control‬
"‬
‭
name‬
‭ =‬
‭"‭
‭u
‬sername‬
"‬
‭
value‬
‭ =‭
‭{
‬‬
userData‬
‭ .‬
‭username‬
‭ }‬
‭
onChange‬
‭ =‬
‭{‭
‭h
‬andleChange‬
}‬
‭
/>‬
‭
</label>‬
‭
</div>‬
‭

<div‬‭
‭ className‬
=‬
‭ "‭
‭m
‬b-3‬
"‭
‭>
‬‬
<label‬‭
‭ className‬
=‭
‭"
‬‬
form-label‬
‭ "‭
‭>
‬‬
Email:‬
‭
<input‬
‭
type‬
‭ =‬
‭"‭
‭t
‬ext‬
"‬
‭
className‬
‭ =‭
‭"
‬‭
f
‬orm-control‬
"‬
‭
name‬
‭ =‬
‭"‭
‭e
‬mail‬
"‬
‭
value‬
‭ =‭
‭{
‬‬
userData‬
‭ .‬
‭email‬
‭ }‬
‭
onChange‬
‭ =‬
‭{‭
‭h
‬andleChange‬
}‬
‭
/>‬
‭
</label>‬
‭
</div>‬
‭

<button‬‭
‭ type‬
=‬
‭"‭
‭s
‬ubmit‬
"‬‭
‭ className‬
=‬
‭"‭
‭b
‬tn btn-primary‬
"‭
‭>
‬‭
A
‬dd User‬
</button>‬
‭
<‭
‭L
‬ink‬‭
to‬
=‭
‭"
‬‭
/
‬‬
"‭
‭>
‬<button>‬
back‬
‭ </button></‬
‭ Link‬
‭ >‬
‭
</form>‬
‭
</div>‬
‭
);‬
‭
};‬
‭

export‬‭
‭ default‬‭
AddUser‬
;‬
‭