Code-MCP

import { configureStore, createSlice, PayloadAction, createAsyncThunk, combineReducers } from '@reduxjs/toolkit'; import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; // ============================================ // Types // ============================================ interface User { id: string; name: string; email: string; } interface AuthState { user: User | null; token: string | null; status: 'idle' | 'loading' | 'succeeded' | 'failed'; error: string | null; } interface CounterState { value: number; } // ============================================ // Async Thunks // ============================================ export const loginUser = createAsyncThunk( 'auth/login', async (credentials: { email: string }, { rejectWithValue }) => { try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 1000)); if (credentials.email === 'error@example.com') throw new Error('Login failed'); return { user: { id: '1', name: 'John Doe', email: credentials.email }, token: 'fake-jwt-token' }; } catch (error: any) { return rejectWithValue(error.message); } } ); // ============================================ // Slices // ============================================ const authSlice = createSlice({ name: 'auth', initialState: { user: null, token: null, status: 'idle', error: null, } as AuthState, reducers: { logout: (state) => { state.user = null; state.token = null; state.status = 'idle'; }, }, extraReducers: (builder) => { builder .addCase(loginUser.pending, (state) => { state.status = 'loading'; state.error = null; }) .addCase(loginUser.fulfilled, (state, action) => { state.status = 'succeeded'; state.user = action.payload.user; state.token = action.payload.token; }) .addCase(loginUser.rejected, (state, action) => { state.status = 'failed'; state.error = action.payload as string; }); }, }); const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 } as CounterState, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, incrementByAmount: (state, action: PayloadAction<number>) => { state.value += action.payload; }, }, }); // ============================================ // Store Configuration // ============================================ const rootReducer = combineReducers({ auth: authSlice.reducer, counter: counterSlice.reducer, }); export const store = configureStore({ reducer: rootReducer, devTools: process.env.NODE_ENV !== 'production', }); // ============================================ // TypeScript Helpers // ============================================ export type RootState = ReturnType<typeof store.getState>; export type AppDispatch = typeof store.dispatch; // Use these typed hooks throughout the app instead of plain `useDispatch` and `useSelector` export const useAppDispatch = () => useDispatch<AppDispatch>(); export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; // ============================================ // Exports // ============================================ export const { logout } = authSlice.actions; export const { increment, decrement, incrementByAmount } = counterSlice.actions;