cda-redux

SPA React orientée Redux/RTK Query combinant un espace utilisateur (login/register/home) et un module Star Wars (listing, pagination, filtres) avec authentification et gestion de session. Le projet démontre l'usage de RTK Query pour la consommation d'API externes et la gestion du cache côté client.

🎯 Contexte et objectifs

Structurer une application front moderne basée sur Redux Toolkit et flux asynchrones API.
Mettre en place un socle d’authentification avec stockage de tokens, récupération utilisateur courant et garde d’accès.
Implémenter des fonctionnalités de consultation/search côté interface avec états dérivés et pagination.

🛠️ Réalisations

🧩 Conception

Le stack inclut React, Vite, Redux Toolkit, RTK Query et routing v6, avec persistance et debug middleware. Source: cda-redux/vite-project/package.json

{
  "scripts": {
    "dev": "vite ./",
    "build": "vite build ./",
    "serve": "vite preview ./"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.6.2",
    "react": "^17.0.0",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.2",
    "redux": "^4.1.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.0.0",
    "vite": "^2.6.4"
  }
}

Le store central configure trois API RTK Query (peopleApi, authApi, usersManagerApi) plus un slice auth, avec concaténation de middlewares. Source: cda-redux/vite-project/src/js/store/store.js

export const store = configureStore({
  reducer: {
    [peopleApi.reducerPath]: peopleApi.reducer,
    [authApi.reducerPath]: authApi.reducer,
    [usersManagerApi.reducerPath]: usersManagerApi.reducer,
    auth,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(
      usersManagerApi.middleware,
      authApi.middleware,
      peopleApi.middleware,
      logger
    ),
});

💻 Développement

Backend : L’intégration auth applique une stratégie de headers préparés (Bearer + x-xsrf-token) pour sécuriser les requêtes API authentifiées. Source: cda-redux/vite-project/src/js/services/authService.js

const baseQuery = fetchBaseQuery({
  baseUrl: "<REDACTED_URL>",
  prepareHeaders: (headers, { getState }) => {
    const accessToken = getState().auth.accessToken;
    const xsrfToken = getState().auth.xsrfToken;

    if (accessToken && xsrfToken) {
      headers.set("authorization", `Bearer ${accessToken}`);
      headers.set("x-xsrf-token", xsrfToken);
    }

    return headers;
  },
});

La couche RTK Query encapsule les endpoints d’authentification et de session (/auth/login, /auth/me, /auth/token, /users/). Source: cda-redux/vite-project/src/js/services/authService.js

export const authApi = createApi({
  reducerPath: "authApi",
  baseQuery: baseQuery,
  keepUnusedDataFor: false,
  endpoints: (builder) => ({
    login: builder.mutation({ query: (userInfo) => loginRequest("/auth/login", userInfo) }),
    fetchCurrentUser: builder.query({ query: () => authMeRequest("/auth/me") }),
    authToken: builder.mutation({ query: (emailToken) => authTokenRequest("/auth/token", emailToken) }),
    register: builder.mutation({
      query: (body) => ({ url: "/users/", method: "POST", body }),
    }),
  }),
});

Frontend : Le routage est organisé entre pages publiques et espaces protégés, avec redirections et sous-routes métiers. Source: cda-redux/vite-project/src/js/App.jsx

<Routes>
  <Route path="/register" element={<Register />} />
  <Route path="/login" element={<Login />} />
  <Route path="/" element={<Navigate replace to="/home" />} />
  <Route path="/home" element={<HomePage />}>
    <Route path="users" element={<ListUsers />}></Route>
    <Route path="research-user" element={<p>Rechercher des utilisateurs</p>}></Route>
    <Route path="profil" element={<InfoProfil />}></Route>
  </Route>
  <Route path="/starwars/people" element={<PeopleStarWars />} />
  <Route path="/starwars/people/:peopleId" element={<PeopleStarWarsDetails />} />
</Routes>

Le hook useIsAuth restaure les credentials depuis localStorage, synchronise le store et déclenche la récupération du user courant. Source: cda-redux/vite-project/src/js/hooks/useIsAuth.js

useEffect(() => {
  const accessToken = getLocalStorageItem("accessToken");
  const xsrfToken = getLocalStorageItem("xsrfToken");

  if (accessToken && xsrfToken) {
    dispatch(setCredentials({ accessToken, xsrfToken }));
  } else {
    dispatch(setIsInitialized());
  }

  const refreshToken = getLocalStorageItem("refreshToken");
  const email = getLocalStorageItem("email");
  if (email && refreshToken) {
    async () => {
      const result = authToken({ email, refreshToken });
      console.log("result auth/token", result);
    };
  }
}, []);

La page Star Wars implémente recherche textuelle, filtre par genre et pagination sur API SWAPI via RTK Query. Source: cda-redux/vite-project/src/js/pages/PeopleStarWars.jsx

const [page, setPage] = useState(1);
const { data: peopleStarwars, isFetching } = useFetchAllPeopleQuery(page);
const [searchTerm, setSearchTerm] = useState("");
const [activeCategory, setActiveCategory] = useState("");

<ul className="people-list">
  {peopleStarwars?.results
    ?.filter((val) => {
      if (searchTerm == "") return val;
      if (val.name.toLowerCase().includes(searchTerm.toLowerCase())) return val;
    })
    .map(({ name, height, mass, gender }, index) =>
      !activeCategory || activeCategory === gender ? (
        <div key={name}><PeopleItem index={index} name={name} height={height} mass={mass} gender={gender} /></div>
      ) : null
    )}
</ul>

🏗️ DevOps & Qualité

Le dépôt inclut une pipeline GitLab CI de build frontend et publication des fichiers dist, puis une étape de déploiement automatisée. Source: cda-redux/.gitlab-ci.yml

image: node:16

stages:
  - build
  - deploy

build_parcel_master:
  stage: build
  script:
    - cd ./vite-project/
    - npm install
    - npm run build
  artifacts:
    expire_in: 20 mins
    paths:
      - ./vite-project/dist

📈 Résultats

Sur la base de l’historique Git du dépôt analysé, le travail couvre la période 2021-11-08 -> 2026-02-14, avec 24 commits et 3 contributeurs. Le projet aboutit à une SPA structurée avec authentification API, gestion de tokens côté Redux, et modules de navigation/liste/recherche sur des données externes. L’utilisation de RTK Query standardise les flux asynchrones et réduit la complexité du code d’appel réseau. Le bénéfice technique est une base frontend maintenable, adaptée à des cas d’usage multi-API avec état global centralisé.

🔧 Environnement technique

Frontend: React 17, React Router 6, Vite.
State/API: Redux Toolkit, RTK Query (authApi, peopleApi, usersManagerApi), React Redux, Redux Logger.
Données: API utilisateur/auth (URL masquée), SWAPI (people).
Session: stockage local de tokens + initialisation via hook useIsAuth.
DevOps: GitLab CI (build, artifacts, déploiement).