How darius-ndubi/learn-react-redux works
This is a React course-catalog and course-management app backed by a local JSON API. Users browse courses, open a course or create one, edit its fields, and save; course actions fetch or persist data before dispatching updates to the Flux store, which notifies subscribed views. The mock API validates course creation and generates slugs before its JSON Server router accesses the database. The listing page and several supporting modules are represented from the tree; their internals were not sampled, so uncertain links are omitted.
Main entry points: App.js App routing · ManageCoursePage.js Manage course · courseActions.js Course actions · courseApi.js Course API
Components 20
Web interface
- React entry
src/index.js - App routing
src/components/App.js - Course catalog
src/components/CoursesPage.js - Manage course
src/components/ManageCoursePage.js - Course form
src/components/common/CourseForm.js - Text input
src/components/common/TextInput.js - Navigation header
src/components/common/Header.js - Home page
src/components/homepage.js - About page
src/components/AboutPage.js - Not found page
src/components/NotFoundPage.js
Course state
- Course actions
src/actions/courseActions.js - Flux dispatcher
src/appDispatcher.js - Course store
src/stores/courseStore.js
API and persistence
- Course API
src/api/courseApi.js - Author API
src/api/authorApi.js - API utilities
src/api/apiUtils.js
Mock service
- Mock API server
tools/apiServer.js - JSON database
tools/db.json
Other components
- Course user
- Local API
Connections 22
- Course user → React entry: opens app
- React entry → App routing: renders
- App routing → Course catalog: routes to
- App routing → Manage course: routes to
- App routing → Home page: routes to
- App routing → About page: routes to
- App routing → Not found page: routes to
- App routing → Navigation header: renders
- Manage course → Course form: renders
- Course form → Text input: renders
- Manage course → Course actions: calls
- Manage course → Course store: reads
- Course store → Manage course: notifies
- Course actions → Course API: calls
- Course actions → Flux dispatcher: dispatches
- Flux dispatcher → Course store: dispatches
- Course API → API utilities: uses
- Course API → Local API: requests
- Author API → API utilities: uses
- Author API → Local API: requests
- Local API → Mock API server: serves
- Mock API server → JSON database: reads and writes