How can I manage complex state in a React app using Redux and TypeScript?

How can I manage complex state in a React app using Redux and TypeScript?

You can manage complex state by defining your state shape with TypeScript interfaces and using Redux Toolkit for easier setup.

What are the benefits of using Redux Toolkit with TypeScript?

Redux Toolkit simplifies the Redux setup process, provides built-in best practices, and enhances type safety with TypeScript.

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

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 my Redux store to a React component?

You can use the useSelector and useDispatch hooks from React-Redux to connect your store to components.