Skip to content

Redux Toolkit typed-hooks

Use properly typed dispatch & selector hooks

TypeScript
store.ts
import {configureStore} from '@reduxjs/toolkit';
import {productsReducer, cartReducer} from './reducers';
 
export const store = configureStore({
  reducer: {
    products: productsReducer,
    cart: cartReducer,
  },
});
 
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
TypeScript
hooks.ts
import {TypedUseSelectorHook, useSelector, useDispatch} from 'react-redux';
import type {RootState, AppDispatch} from './store';
 
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;