https://github.com/danretegan/task-manager
Redux toolkit
https://github.com/danretegan/task-manager
configurestore react reduxtoolkit slice
Last synced: about 1 month ago
JSON representation
Redux toolkit
- Host: GitHub
- URL: https://github.com/danretegan/task-manager
- Owner: danretegan
- Created: 2024-02-21T05:41:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-26T07:21:23.000Z (about 2 years ago)
- Last Synced: 2025-01-03T00:34:04.612Z (over 1 year ago)
- Topics: configurestore, react, reduxtoolkit, slice
- Language: JavaScript
- Homepage: https://danretegan.github.io/task-manager/
- Size: 1.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Redux toolkit
## 1) Instalare:
- `npm install @reduxjs/toolkit`
- `npm install @reduxjs/toolkit react-redux`
## 2) Creare slice-uri:
Impărțim starea în "slice-uri" logice care să reprezinte diferite aspecte ale stării aplicației. Fiecare slice trebuie să facă referire la gestionarea unei părți specifice a stării și a logicii asociate.
## 3) Definirea reducer-ului:
Folosim funcția `createSlice` pentru a defini reducer-ul și acțiunile asociate slice-ului. Aceasta permite definirea reducer-ului și a acțiunilor într-o manieră simplificată, fără a fi nevoie să ne ocupam manual de generarea constantelor și a creatorilor de acțiuni.
## 4) Crearea store:
Folosim funcția `configureStore` pentru a crea magazinul (store) Redux. Aceasta automatizează multe aspecte ale configurării magazinului, cum ar fi adăugarea reducer-ilor și gestionarea middleware-ului.
## 5) Conectarea componentelor:
Folosim componenta `Provider` furnizată de Redux pentru a înveli aplicația React și a-i oferi acces la magazinul Redux.
## 6) Utilizarea hook-urilor Redux:
Folosim hook-urile furnizate de Redux Toolkit, precum `useDispatch` și `useSelector` pentru a trimite (`dispatch`) acțiuni către magazin (store) și pentru a accesa starea aplicației în componente.
## 7) Dispatch acțiuni:
Folosim metoda `dispatch` pentru a trimite acțiuni către reducer-urile definite și pentru a actualiza starea aplicației.
## 8) Accesarea stării:
Folosim hook-ul `useSelector` pentru a accesa starea din componente și pentru a reacționa la schimbările de stare.
## Concluzii:
Prin utilizarea Redux Toolkit putem gestiona starea aplicației într-un mod eficient și fără a fi necesar să scriem o mulțime de cod repetitiv. Aceasta oferă un set de unelte puternice pentru dezvoltarea aplicațiilor Redux într-un mod simplificat și productiv.