A comprehensive demonstration of Redux Toolkit capabilities in a modern React.js application. This project showcases state management, async operations, and best practices using a user management system.
ReduxTK Explore is an educational project designed to demonstrate the power and simplicity of Redux Toolkit for state management in React applications. It implements a complete CRUD system with real-world patterns and practices.
- Complete CRUD Operations: Create, Read, Update, and Delete users
- Real-time Search: Instant search functionality in navbar
- Gender Filtering: Filter users by Male/Female/All
- Responsive Design: Mobile-first Bootstrap styling
- Modal Management: Beautiful user detail modals with avatars
- Confirmation Dialogs: Safe delete operations with confirmation
- Loading States: Visual feedback during API operations
- Error Handling: Comprehensive error management
- React 18 - Latest React features
- Redux Toolkit - Modern Redux with less boilerplate
- React-Redux - Official React bindings
- React Router DOM - Client-side routing
- Bootstrap 5 - Responsive UI components
- Custom CSS - Animated modals and custom components
- Bootstrap Icons - Professional iconography
- MockAPI.io - Backend simulation
- Fetch API - Modern HTTP requests
- JSON Handling - Data serialization
-
Clone and install dependencies
git clone <repository-url> cd reduxtk-explore npm install
-
Start the development server
npm start
-
Open your browser
http://localhost:3000
src/
├── components/ # React Components
│ ├── Create.jsx # User creation form
│ ├── Read.jsx # Users list with search/filter
│ ├── Update.jsx # User editing form
│ ├── Navbar.jsx # Navigation with search
│ └── CustomModal.jsx # User details modal
├── features/ # Redux Toolkit Slices
│ └── userDetailSlice.js # Complete user management slice
├── App.js # Main application component
└── store.js # Redux store configuration
// store.js
export const store = configureStore({
reducer: {
app: userDetail, // Feature-based slicing
},
});// Complete async operation handling
export const createUser = createAsyncThunk(
"createUser",
async (data, { rejectWithValue }) => {
// API implementation with error handling
}
);
// Lifecycle management in extraReducers
.addCase(createUser.pending, (state) => {
state.loading = true;
})
.addCase(createUser.fulfilled, (state, action) => {
state.loading = false;
state.users.push(action.payload);
}){
app: {
users: [], // Array of user objects
loading: false, // API call status
error: null, // Error messages
searchData: "" // Search query
}
}- Form for adding new users
- Fields: Name, Email, Age, Gender
- Form validation and submission
- Display all users in responsive cards
- Real-time search and gender filtering
- Delete with confirmation modal
- View details in animated modal
- Pre-populated editing form
- Controlled inputs with proper state management
- Seamless data updates
- Beautiful user profile display
- First-letter avatar system
- Smooth animations and transitions
- Click-outside to close functionality
App.js (Data Fetching)
↓
Redux Store (Single Source of Truth)
↓
Components (Consume State)
↓
User Actions (Dispatch Updates)
↓
API Operations (Async Thunks)
↓
State Updates (Immer-powered)
- ✅
createSlice- Organized state management - ✅
createAsyncThunk- Async API operations - ✅
extraReducers- Async lifecycle handling - ✅ Immer Integration - Immutable updates made simple
- ✅ Modern Hooks -
useSelectoranduseDispatch
// Modern hooks pattern
const dispatch = useDispatch();
const { users, loading } = useSelector((state) => state.app);
// Dispatching async actions
dispatch(createUser(userData));- Loading state management
- Error handling strategies
- Optimistic UI updates
- Component-state communication
// Real-time search in navbar
useEffect(() => {
dispatch(searchUser(searchData));
}, [searchData, dispatch]);// Combined search and gender filtering
users.filter((ele) => {
if (searchData) {
return ele.name.toLowerCase().includes(searchData.toLowerCase());
}
if (radioData && radioData !== "") {
return ele.gender === radioData;
}
return ele;
});// Click outside to close
<div className="modalBackground" onClick={() => setShowPopup(false)}>
<div className="modalContainer" onClick={(e) => e.stopPropagation()}>
{/* Modal content */}
</div>
</div>- Understand Redux fundamentals without boilerplate
- Learn modern patterns (no more connect HOCs)
- See real-world async operation handling
- Advanced state structure design
- Error handling strategies
- Loading state management patterns
- Component composition with Redux
- Redux Toolkit reduces code by 60%+ vs traditional Redux
- Immer makes immutable updates intuitive
createAsyncThunksimplifies API operations- Feature-based organization scales well
After mastering this project, explore:
- RTK Query - Data fetching and caching
- Redux Persist - State persistence
- Redux Toolkit with TypeScript - Type safety
- Redux Middleware - Custom functionality
- Performance Optimization - Memoized selectors
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
ReduxTK Explore serves as both a functional application and an educational resource for mastering modern Redux patterns with Redux Toolkit. Perfect for developers transitioning from traditional Redux or starting their state management journey!
Happy Coding! 🚀