Redux Setup CLI

🚀 Automate Redux Setup in React & Next.js Projects

Overview

Setting up Redux in a React or Next.js project can be time-consuming. This CLI tool simplifies the process by automating Redux installation and boilerplate creation with just a few commands. Inspired by tools like shadcn, it provides an interactive setup experience using ClackJS.

Features

✅ Supports React & Next.js – Choose between React and Next.js during setup.
✅ JavaScript & TypeScript Support – Select your preferred language.
✅ Automated Redux Installation – Installs @reduxjs/toolkit, react-redux, and redux-thunk.
✅ Project Structure Detection – Places Redux setup inside src/redux/ if src/ exists, otherwise in the root.
✅ Preconfigured Store & Slice – Creates a store.js/ts file and a demo slice with an API call using Redux Thunk.
✅ Clear Setup Instructions – Logs instructions for manually wrapping <App /> with the Redux <Provider>.
✅ Next.js Support – Provides guidance for both App Router (layout.tsx) and Pages Router (_app.tsx).

How It Works

1️⃣ Run the CLI:

npx redux-setup-cli

2️⃣ Choose your framework:

• React
• Next.js

3️⃣ Choose your language:

• JavaScript
• TypeScript

4️⃣ The CLI will:
✔ Install necessary Redux dependencies
✔ Create a redux folder inside src/ (if it exists) or in the root
✔ Generate a store.js/ts file
✔ Create a slices/ folder with a demo counterSlice.js/ts
✔ Print instructions to wrap your <App /> with Redux

Example Output

✅ Redux setup completed successfully!

Wrap your <App /> component with Redux Provider like this:

import { Provider } from 'react-redux';
import store from './redux/store';

export default function AppWrapper({ children }) {
  return <Provider store={store}>{children}</Provider>;
}

For Next.js, wrap _app.js (Pages Router) or layout.js (App Router) with AppWrapper! 🚀

🎉 Setup complete! Follow the instructions above to finalize Redux integration.