Redux-cli-setup NPM

Redux Setup CLI 🚀

A powerful CLI tool to instantly scaffold a production-ready Redux setup with Redux Toolkit, React-Redux, and Redux Persist integration.

Features ✨

🛠️ Complete Redux folder structure generation
🔐 Built-in authentication slice and API setup
📦 Redux Persist integration
🎯 TypeScript support
🔄 RTK Query setup with base API configuration
🎨 Organized feature-based architecture

Prerequisites 📋

@reduxjs/toolkit
react-redux
redux-persist

Installation 📥

npm install -g redux-cli-setup

Or use directly with npx:

npx redux-cli-setup

These must be installed in your project after running the CLI. If not, use:

npm install @reduxjs/toolkit react-redux redux-persist

Generated Structure 📁

src/
└── redux/
    ├── base/
    │   ├── baseApi.ts
    │   └── baseReducer.ts
    ├── features/
    │   └── auth/
    │       ├── authSlice.ts
    │       └── authApi.ts
    ├── lib/
    │   └── ReduxProvider.tsx
    ├── store.ts
    └── hooks.ts

File Breakdown 📝

1. Base Configuration

`baseApi.ts`

Centralized API configuration
Token refresh mechanism
Authentication header setup
Base URL configuration

`baseReducer.ts`

Combines reducers
Configures Redux Persist
Handles authentication state persistence

2. Authentication Feature

`authSlice.ts`

Manages authentication state
Provides setUser and logout actions
Defines user type with role-based access

`authApi.ts`

Authentication-related RTK Query endpoints
Supports:
- User login
- Email verification
- Password management
- Token handling

3. Store Configuration

`store.ts`

Configures Redux store
Sets up middleware
Integrates Redux Persist
Defines TypeScript types for store

`hooks.ts`

Provides typed Redux hooks
useAppDispatch and useAppSelector

4. Redux Provider

`ReduxProvider.tsx`

Wraps application with Redux Provider
Implements Redux Persist Gate

Usage Example 💻

Generate Redux structure:

npx redux-cli-setup

Wrap your app with ReduxProvider:

import ReduxProvider from "@/redux/lib/ReduxProvider";

function App() {
  return (
    <ReduxProvider>
      <YourApp />
    </ReduxProvider>
  );
}

Use in components:

import { useAppDispatch, useAppSelector } from "@/redux/hooks";
import { useLoginUserMutation } from "@/redux/features/auth/authApi";

function LoginComponent() {
  const dispatch = useAppDispatch();
  const [loginUser] = useLoginUserMutation();
  // Authentication logic
}

Authentication Endpoints 🔐

loginUser: User authentication
verifyEmail: Email verification
forgetPassword: Initiate password recovery
resetPassword: Complete password reset
changePassword: Update password

Best Practices 🌟

State Management
- Use RTK Query for API calls
- Implement comprehensive error handling
- Leverage TypeScript for type safety
Authentication
- Secure token storage
- Implement clean logout
- Handle token expiration gracefully
Performance Optimization
- Minimize state updates
- Implement efficient caching
- Optimize component re-renders