How can I use Redux Toolkit with TypeScript in my React app?

How can I use Redux Toolkit with TypeScript in my React app?

To use Redux Toolkit with TypeScript, first install the necessary packages: @reduxjs/toolkit and react-redux. Then, create a store using configureStore.

Can you show me an example of creating a slice?

Sure! Here's a simple example:

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;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

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

How do I connect this slice to my store?

You can connect the slice to your store by importing the reducer and adding it to the configureStore call:

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

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

What about using selectors with TypeScript?

You can create selectors to access the state. For example:

export const selectCount = (state: RootState) => state.counter.value;