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

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

You can start by installing the necessary packages: redux, react-redux, and @types/react-redux. Then, define your state and actions using TypeScript interfaces.

What are the benefits of using TypeScript with Redux?

Using TypeScript with Redux provides type safety, better autocompletion, and helps catch errors during development.

Can you show me an example of a Redux slice in TypeScript?

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

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

How do I connect this slice to my React components?

You can use the useSelector and useDispatch hooks from react-redux to connect your slice to your components. For example:

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
};