The Complete Production SOP: How to Deploy and Run Redux Toolkit (RTK) & RTK Query API Caching in Autonomous AI Agents

---
description: "Standardize enterprise state management with Redux Toolkit slices and RTK Query auto-caching."
globs: ["src/store/**/*.ts", "src/services/**/*.ts", "src/features/**/*.ts"]
---
# Redux Toolkit & RTK Query SOP
- Always use `createSlice` for local slice state and `createApi` with `fetchBaseQuery` for remote entities.
- Apply tag-based cache management: provide `providesTags` on queries, `invalidatesTags` on mutations.
- Add `api.middleware` to store setup: `middleware: (gDM) => gDM().concat(api.middleware)`.

import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const dynamicBaseQuery = fetchBaseQuery({
  baseUrl: process.env.NEXT_PUBLIC_API_URL || '/api',
  prepareHeaders: (headers) => {
    const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
    if (token) {
      headers.set('authorization', `Bearer ${token}`);
    }
    return headers;
  },
});

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export interface Project {
  id: string;
  name: string;
  status: 'active' | 'archived';
}

export const projectsApi = createApi({
  reducerPath: 'projectsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Project'],
  endpoints: (builder) => ({
    getProjects: builder.query<Project[], void>({
      query: () => '/projects',
      providesTags: (result) =>
        result
          ? [...result.map(({ id }) => ({ type: 'Project' as const, id })), { type: 'Project', id: 'LIST' }]
          : [{ type: 'Project', id: 'LIST' }],
    }),
    addProject: builder.mutation<Project, Partial<Project>>({
      query: (body) => ({ url: '/projects', method: 'POST', body }),
      invalidatesTags: [{ type: 'Project', id: 'LIST' }],
    }),
  }),
});

export const { useGetProjectsQuery, useAddProjectMutation } = projectsApi;

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { projectsApi } from './services/projectsApi';

export const store = configureStore({
  reducer: {
    [projectsApi.reducerPath]: projectsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(projectsApi.middleware),
});

setupListeners(store.dispatch);

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