Expose a reusable store type for typed utilities and hooks.
Application-wide typing
Redux Toolkit · Type Alias
Store
Store is the type of a Redux store instance. In TypeScript, derive it from the configured store with typeof store, alongside inferred state and dispatch types.
How it works
Store represents the Redux store instance produced by the configured setup. Derive application-specific types from that instance: use typeof store for the store type, ReturnType<typeof store.getState> for state, and typeof store.dispatch for dispatch, so middleware and reducer changes remain reflected automatically.
Syntax
export type AppStore = typeof storeReturns
The store-derived type describes a Redux store instance with its configured state and dispatch behavior.
Key points
- The standard pattern derives all three application types from the configured store instance.
RootStateis obtained from the return value of the store'sgetStatemethod.AppDispatchis the type of the configured store'sdispatchfunction.AppStoreis directly inferred as the type of the store variable.- Store-derived types automatically follow changes to slices and middleware configuration.
- The reducer supplied to
configureStoredetermines the inferred state shape.
Common mistakes
- Prefer deriving
RootStatefromstore.getState()rather than duplicating the state shape manually. - Derive
AppDispatchfrom the store so middleware-provided dispatch overloads are retained.
Example: Infer store-related types from a configured store
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({
reducer: {
counter: (state = 0, action: { type: string }) =>
action.type === 'increment' ? state + 1 : state
}
})
export type AppStore = typeof store
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
store.dispatch({ type: 'increment' })
console.log(store.getState())Creates a configured store and derives its store, state, and dispatch types directly from the resulting instance.
When to use it
Derive the root state without duplicating the reducer structure.
State selection
Preserve dispatch extensions contributed by configured middleware.
Middleware-aware dispatch
Keep application types synchronized as reducers and middleware evolve.
Store refactoring
Interview questions
QHow do you derive the main application types from a Redux Toolkit store?
Store is the type of the Redux store instance, not the state value itself. In TypeScript, derive it with typeof store, while deriving state with ReturnType<typeof store.getState> and dispatch with typeof store.dispatch.
Follow-up: Why derive these types after creating the store? Because the inferred types track the configured reducers and middleware, avoiding stale manually maintained declarations.
QWhich TypeScript expressions derive RootState, AppDispatch, and AppStore?
Use ReturnType<typeof store.getState> for RootState, typeof store.dispatch for AppDispatch, and typeof store for AppStore. These declarations infer the types from the actual configured store.
Follow-up: What changes when middleware is added? The inferred dispatch type incorporates middleware-contributed dispatch behavior, including thunk-related overloads.
QWhy is inference from the store preferable to manually declaring the state shape?
A configured store is created with configureStore, which infers state from its reducer configuration. Extracting types from the resulting store keeps them synchronized when reducers or middleware settings change.
Follow-up: How should server-rendered applications type a store factory? Use ReturnType<typeof makeStore> for the store type, then derive state and dispatch from that type.
Related
configureStoreRootStateAppDispatchAppStoregetStatedispatchmiddleware