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

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

You can manage complex state by defining a clear state structure, using actions and reducers effectively, and leveraging TypeScript for type safety.

Can you give me an example of a Redux slice with TypeScript?

Sure! Here's a simple example of a Redux slice for managing a list of items:

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

interface Item {
  id: number;
  name: string;
}

interface ItemsState {
  items: Item[];
}

const initialState: ItemsState = {
  items: [],
};

const itemsSlice = createSlice({
  name: 'items',
  initialState,
  reducers: {
    addItem(state, action: PayloadAction<Item>) {
      state.items.push(action.payload);
    },
    removeItem(state, action: PayloadAction<number>) {
      state.items = state.items.filter(item => item.id !== action.payload);
    },
  },
});

export const { addItem, removeItem } = itemsSlice.actions;
export default itemsSlice.reducer;

How do I connect this slice to my React components?

You can connect the slice to your components using the useSelector and useDispatch hooks from React-Redux. Here's an example:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addItem, removeItem } from './itemsSlice';

const ItemList: React.FC = () => {
  const items = useSelector((state: RootState) => state.items.items);
  const dispatch = useDispatch();

  const handleAddItem = (name: string) => {
    const newItem = { id: Date.now(), name };
    dispatch(addItem(newItem));
  };

  const handleRemoveItem = (id: number) => {
    dispatch(removeItem(id));
  };

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name} <button onClick={() => handleRemoveItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => handleAddItem('New Item')}>Add Item</button>
    </div>
  );
};