src/
├── store/
│ ├── redux/
│ │ ├── store.ts
│ │ ├── counterSlice.ts
│ │ └── productSlice.ts (optional)
├── app/
│ └── layout.tsx (wrap Provider here)
├── components/
│ └── ReduxCounter.tsx

// src/store/redux/store.ts
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// src/store/redux/counterSlice.ts
import { createSlice } from "@reduxjs/toolkit";

const initialState = { value: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment(state) {
      state.value += 1;
    },
    decrement(state) {
      state.value -= 1;
    },
    reset(state) {
      state.value = 0;
    },
  },
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

// src/components/ReduxCounter.tsx
"use client";

import { useSelector, useDispatch } from "react-redux";
import { RootState } from "@/store/redux/store";
import { increment, decrement, reset } from "@/store/redux/counterSlice";

export default function ReduxCounter() {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div className="space-y-2 p-4 border max-w-md">
      <h2 className="text-xl font-bold">Redux Counter</h2>
      <p>Count: {count}</p>
      <div className="flex gap-2">
        <button
          onClick={() => dispatch(increment())}
          className="bg-blue-500 px-4 py-1 text-white rounded"
        >
          +1
        </button>
        <button
          onClick={() => dispatch(decrement())}
          className="bg-red-500 px-4 py-1 text-white rounded"
        >
          -1
        </button>
        <button
          onClick={() => dispatch(reset())}
          className="bg-gray-500 px-4 py-1 text-white rounded"
        >
          Reset
        </button>
      </div>
    </div>
  );
}

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

// Async thunk to fetch products
export const fetchProducts = createAsyncThunk("product/fetch", async () => {
  const res = await fetch("/api/products");
  return res.json();
});

// Product slice
const productSlice = createSlice({
  name: "product",
  initialState: {
    items: [],
    loading: false,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.items = action.payload;
        state.loading = false;
      });
  },
});

export default productSlice.reducer;