Simple Example of Redux Toolkit using TypeScript, React and extraReducers

Redux.Toolkit.Simple.app.tsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

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

const fetchUser = createAsyncThunk('users/fetchUser', async (id: number) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  return response.json();
});

const userSlice = createSlice({
  name: 'users',
  initialState: {
    user: null as User | null,
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUser.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(fetchUser.fulfilled, (state, action) => {
      state.user = action.payload;
      state.loading = false;
    });
    builder.addCase(fetchUser.rejected, (state, action) => {
      state.error = action.error.message;
      state.loading = false;
    });
  },
});

const UserPage: React.FC = () => {
  const dispatch = useDispatch();
  const { user, loading, error } = useSelector((state) => state.users);

  const handleFetchUser = (id: number) => {
    dispatch(fetchUser(id));
  };

  return (
    <div>
      <button onClick={() => handleFetchUser(1)}>Fetch User</button>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {user && (
        <div>
          <p>Name: {user.name}</p>
        </div>
      )}
    </div>
  );
};

export default UserPage;