Redux Toolkit + TypeScript simplifies state management by enforcing type safety.

#Installing Redux Toolkit

npm install @reduxjs/toolkit react-redux

#Creating a TypeScript Slice

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
  value: number;
}

const initialState: CounterState = { value: 0 };

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    addAmount: (state, action: PayloadAction<number>) => { state.value += action.payload; }
  }
});

export const { increment, decrement, addAmount } = counterSlice.actions;
export default counterSlice.reducer;

#Configuring Store

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: { counter: counterReducer }
});

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

#Using in Components

import { useSelector, useDispatch } from 'react-redux';
import type { RootState, AppDispatch } from './store';
import { increment, decrement, addAmount } from './counterSlice';

function CounterComponent() {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch: AppDispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(addAmount(5))}>+5</button>
    </div>
  );
}

#Conclusion

Redux Toolkit + TypeScript ensures strongly typed, maintainable state management.