gothinkster/react-redux-realworld-example-appArchived
React Redux Realworld Example App
This is a demonstration application built with React and Redux that implements a full-featured article publishing platform with user authentication and social interactions. The application serves as a reference implementation showing how to structure a real-world CRUD application using these technologies, covering the complete workflow from user registration through content creation and community engagement.
The application implements a complete JWT-based authentication system that persists tokens in browser local storage and attaches them to API requests, alongside a structured approach to managing asynchronous actions through Redux middleware. It separates data-fetching and state logic into container components that pass props to presentational components, and manages page-specific data by dispatching load and unload actions tied to component mount and unmount lifecycle events.
The platform supports full article management with a dedicated editor interface, paginated browsing of article feeds filtered by global, user-specific, or tag-based criteria, and social features including commenting on articles, marking favorites, and following other authors. User profile management covers registration, settings updates, and profile viewing, while the application handles automatic browser location updates triggered by state changes in reducers after key actions.
Features
- CRUD Demo Applications - A full-stack demonstration application built with React and Redux that implements article publishing, user authentication, and social features.
- Social Favorites - Implements marking articles as favorites and following other authors as core social features.
- User Profile Management - Provides user registration, settings updates, and profile viewing as core account management features.
- JWT Token Persisters - Persists JWT tokens in local storage and attaches them to API requests for authenticated sessions.
- Article Publishing Workflows - Creates, reads, updates, and deletes articles using a dedicated editor page with automatic redirects.
- JWT Authentications - Logs users in and out with JSON Web Tokens stored in local storage and attached to API requests.
- Local Storage Token Persisters - Saves and clears JWT tokens in local storage on login and logout, attaching them to subsequent API requests.
- Action Lifecycle Middleware - Intercepts dispatched actions with promise payloads and dispatches start and end lifecycle events automatically.
- Mount-Unmount Data Dispatchers - Implements page-specific data fetching by dispatching load and unload actions on component mount and unmount.
- Async Action Orchestrators - Uses Redux middleware to automatically dispatch lifecycle actions for promise-based async operations.
- Container Component Patterns - Separates data-fetching and state logic into container components that pass props to presentational components.
- Page Lifecycle Data Injectors - Fetches data on component mount and cleans up on unmount by dispatching load and unload actions tied to the current route.
- Component Lifecycle Data Fetching - Manages page-specific data by dispatching load and unload actions on component mount and unmount.
- Article Comment Managers - Adds and removes comments on individual articles to enable user discussion.
- Filtered Feed Paginators - Browses articles in paginated lists filtered by global feed, user feed, or tag.
- Social Interactions - Marks articles as favorites and follows other authors to personalize content feeds.
- Reducer-Triggered Redirects - Updates browser location automatically when a reducer sets a redirect-to URL after key actions.
- Paginated Browsing Interfaces - Browses articles in paginated lists filtered by global feed, user feed, or tag.
- Navigation Redirects - Updates browser location automatically when a reducer sets a redirect-to URL after key actions.
