Redux Store Setup

Redux Store Setup

Configure the Redux store with configureStore, typed hooks, middleware, and Provider wiring

When to Use

• Initializing Redux in a new React application
• Migrating from legacy createStore to Redux Toolkit's configureStore
• Adding custom middleware (logging, persistence, API layers)
• Setting up typed useDispatch and useSelector hooks

Instructions

1. Create store/index.ts as the single store configuration file. Export the store, RootState, AppDispatch, and typed hooks from here.
2. Use configureStore — it automatically sets up Redux DevTools, thunk middleware, and the serializable check middleware.
3. Combine slice reducers in the reducer field. Do not use combineReducers separately unless you need reducer injection.
4. Define RootState and AppDispatch types from the store itself, not manually. This keeps types in sync as slices are added.
5. Create typed hooks (useAppDispatch, useAppSelector) once and import them everywhere instead of plain useDispatch/useSelector.
6. Wrap the app root with <Provider store={store}>.
7. Only add custom middleware via the middleware callback — never replace the defaults unless you have a specific reason.

// store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import todosReducer from '../features/todos/todos.slice';
import usersReducer from '../features/users/users.slice';

export const store = configureStore({
  reducer: {
    todos: todosReducer,
    users: usersReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // Ignore specific action paths if needed (e.g., for dates or file objects)
        ignoredActions: ['persist/PERSIST'],
      },
    }),
});

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

// Typed hooks — use these throughout the app
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

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

function App() {
  return (
    <Provider store={store}>
      <Root />
    </Provider>
  );
}

Details

What configureStore does automatically: Combines reducers, adds redux-thunk, enables Redux DevTools Extension, adds development-only middleware (serializable check, immutability check).

Custom middleware: The middleware callback receives getDefaultMiddleware which returns a Tuple. Chain custom middleware with .concat() — do not spread into an array.

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware().concat(logger, apiMiddleware),

Lazy-loaded reducer injection: For code-split apps, use store.replaceReducer() or RTK's combineSlices (RTK 2.0+) for dynamic slice injection without upfront registration.

Common mistakes:

• Importing store directly in components (use hooks + Provider instead)
• Defining RootState manually instead of inferring from store.getState
• Disabling the serializable check globally instead of allowlisting specific paths
• Creating multiple store instances (breaks React-Redux's subscription model)

Source

https://redux-toolkit.js.org/api/configureStore

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.