How 19sandrero39/react-redux works
WarTech Info is a small React site about military vehicles, with vehicle details and interactions, editable news, facts, registration/login, and an About page. The main workflow loads JSON data for the home page, lets visitors select a vehicle and interact with it, and uses Redux for authentication and vehicle interactions. Auth and interaction state persist in browser local storage. The README is empty; the Home excerpt is partial, so links for unsampled behavior are omitted.
Main entry points: store.js Redux Store · App.jsx Routes and Layout · Home.jsx Home Page · fakeApi.js Delayed JSON Fetch
Components 18
Application
- React Entry
react-redux-app/src/main.jsx - Routes and Layout
react-redux-app/src/App.jsx - Header and Theme
react-redux-app/src/components/Header.jsx - Navigation
react-redux-app/src/components/Navbar.jsx
Home Content
- Home Page
react-redux-app/src/pages/Home.jsx - About Page
react-redux-app/src/pages/About.jsx - Auth Forms
react-redux-app/src/components/AuthPanel.jsx
State and Auth
- Redux Store
react-redux-app/src/app/store.js - Auth State
react-redux-app/src/features/authSlice.js - Auth Middleware
react-redux-app/src/middlewares/authMiddleware.js - Vehicle Interactions
react-redux-app/src/features/vehicleInteractionSlice.js - Todo State
react-redux-app/src/features/todoSlice.js
Browser Data
- Delayed JSON Fetch
react-redux-app/src/api/fakeApi.js - Vehicle Data
react-redux-app/public/data/vehicles.json - News Data
react-redux-app/public/data/news.json - Facts Data
react-redux-app/public/data/facts.json - Local Storage
Other components
- Visitor
Connections 22
- Visitor → React Entry: opens site
- React Entry → Redux Store: provides state
- React Entry → Routes and Layout: renders
- Routes and Layout → Header and Theme: renders
- Routes and Layout → Navigation: renders
- Routes and Layout → Home Page: routes to
- Routes and Layout → About Page: routes to
- Home Page → Auth Forms: renders
- Home Page → Delayed JSON Fetch: requests JSON
- Delayed JSON Fetch → Vehicle Data: fetches
- Delayed JSON Fetch → News Data: fetches
- Delayed JSON Fetch → Facts Data: fetches
- Home Page → Redux Store: reads and dispatches
- Auth Forms → Redux Store: reads and dispatches
- Redux Store → Auth State: reduces auth actions
- Redux Store → Vehicle Interactions: reduces vehicle actions
- Redux Store → Todo State: reduces todo actions
- Redux Store → Auth Middleware: dispatches actions
- Auth Middleware → Auth State: forwards auth actions
- Auth Middleware → Local Storage: reads and writes auth
- Auth State → Local Storage: loads and clears session
- Vehicle Interactions → Local Storage: loads and saves interactions