React Redux

React Redux

1. Instalarea dependințelor

Avem nevoie să instalăm libăriile necesare pentru a gestiona starea aplicației într-un mod organizat, eficient și predictibil, mai ales când aplicația devine complexă.

npm install @reduxjs/toolkit react-redux

2. Configurarea slice-ului pentru utilizator

În cadrul folderului client, generăm folderul store care va conține la rândul său folderul slices și fișierul store.js.

Pentru început, trebuie să definim slice-ul userSlice.js, care va conține câteva informații care trebuie să fie globale la nivelul aplicației noastre.

În contextul Redux Toolkit, un slice este o bucată din starea aplicației care include tot ce ține de o anumită funcționalitate:

• State-ul: datele relevante pentru acea parte a aplicației

• Reducers: funcții care modifică state-ul în mod predictibil

• Action creators: funcții generate automat care declanșează reducer-ele

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  loggedIn: false,
  checkTokenLoading: true,
  token: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
      state.loggedIn = !!action.payload;
      localStorage.setItem('token', action.payload || '');
    },
    logout: (state) => {
      state.loggedIn = false;
      state.token = null;
      localStorage.removeItem('token');
    },
    setCheckTokenLoading: (state, action) => {
      state.checkTokenLoading = action.payload;
    },
  },
});

export const { setToken, logout, setCheckTokenLoading } = userSlice.actions;

export default userSlice.reducer;

• Import createSlice din @reduxjs/toolkit pentru a defini slice-uri Redux cu state și reducers integrate

• initialState: obiect care reprezintă starea inițială a slice-ului user

  • loggedIn: boolean ce reflectă starea de autentificare

  • checkTokenLoading: boolean pentru tracking-ul procesului de verificare a token-ului

  • token: string sau null pentru token-ul de autentificare

• createSlice: generează automat reducer-ul și action creator-ii pentru slice-ul user

  • setToken: reducer ce setează token, actualizează loggedIn și persistă token-ul în localStorage

  • logout: reducer ce resetează starea utilizatorului și șterge token-ul din localStorage

  • setCheckTokenLoading: reducer ce actualizează flag-ul de loading al verificării token-ului

• Exporturi:

  • userSlice.actions → action creators pentru dispatch

  • userSlice.reducer → reducer-ul care se înregistrează în store-ul Redux

3. Crearea și configurarea store-ului Redux

În cadrul fișierului store.js, avem grijă să importăm slice-ul abia creat pentru utilizator și să contruim store-ul pe baza acestuia.

În Redux, un reducer este o funcție pură care determină cum se schimbă starea aplicației în funcție de o acțiune (action) primită.

---

Caracteristici principale:

• Pură: nu modifică direct state-ul, ci returnează unul nou (Redux Toolkit permite modificări „mutative” intern folosind Immer)

• Primește două argumente:

  1. state – starea curentă (sau slice-ul de stare)

  2. action – obiect care descrie ce s-a întâmplat și poate conține payload

• Returnează un nou state actualizat

// client/src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

• Import configureStore din @reduxjs/toolkit – funcție care creează store-ul Redux cu setări implicite bune (ex: middleware, DevTools)

• Import userReducer – reducer-ul slice-ului user definit anterior

• configureStore({ reducer: { user: userReducer } }):

  • Creează store-ul centralizat

  • Asociază reducer-ul userReducer la cheia user din state

  • Permite ca starea utilizatorului să fie accesată în aplicație prin state.user

• Export store – store-ul este folosit în <Provider store={store}> din React pentru a oferi acces la Redux în toată aplicația

4. Conectarea store-ului Redux la aplicația React

În acest pas, importăm store-ul creat anterior în main.jsx și îl înfășurăm cu componenta <Provider> din react-redux.

Astfel, starea globală gestionată de Redux devine accesibilă tuturor componentelor aplicației prin hook-urile useSelector și useDispatch. Aceasta este etapa prin care integrarea Redux devine activă în aplicația React.

// client/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import './index.css'
import App from './App.jsx'
import { store } from './store/store.js'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
)