How to Use Redux Toolkit in React For Making API Calls?

//App.js

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsersAsync, addUser, removeUser } from '../userSlice';
import UserList from './UserList';

function App() {
  const dispatch = useDispatch();
  const users = useSelector((state) => state.user.users);
  const loading = useSelector((state) => state.user.loading);
  const error = useSelector((state) => state.user.error);
  const [newUserName, setNewUserName] = useState('');

  useEffect(() => {
    dispatch(fetchUsersAsync());
  }, [dispatch]);

  const handleAddUser = () => {
    dispatch(addUser({ id: users.length + 1, name: newUserName }));
    setNewUserName('');
  };

  const handleRemoveUser = (id) => {
    dispatch(removeUser(id));
  };

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      <input
        type="text"
        value={newUserName}
        onChange={(e) => setNewUserName(e.target.value)}
        placeholder="Enter new user name"
      />
      <button onClick={handleAddUser}>Add User</button>
      <UserList users={users} onRemoveUser={handleRemoveUser} />
    </div>
  );
}

export default App;

// UserItem.js

import React from 'react';

function UserItem({ user, onRemoveUser }) {
    return (
        <li>
            {user.name} <button onClick={
            	() => onRemoveUser(user.id)}>Delete</button>
        </li>
    );
}

export default UserItem;

//UserList.js

import React from 'react';
import UserItem from './UserItem';

function UserList({ users, onRemoveUser }) {
    return (
        <ul>
            {users && users.map((user) => (
                <UserItem key={user.id} 
                		  user={user} onRemoveUser={onRemoveUser} />
            ))}
        </ul>
    );
}

export default UserList;

// api.js

import axios from 'axios';

export const fetchUsers = async () => {
    try {
        const response = 
        	await axios.get('https://jsonplaceholder.typicode.com/users');
        return response.data;
    } catch (error) {
        throw error;
    }
};

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

//store.js

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

const store = configureStore({
    reducer: {
        user: userReducer,
    },
});

export default store;

//userSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchUsers } from './api';

export const fetchUsersAsync = createAsyncThunk(
  'users/fetchUsers',
  async () => {
    const response = await fetchUsers();
    return response;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    users: [],
    loading: false,
    error: null,
  },
  reducers: {
    addUser: (state, action) => {
      state.users.push(action.payload);
    },
    removeUser: (state, action) => {
      state.users = state.users.filter(user => user.id !== action.payload);
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsersAsync.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUsersAsync.fulfilled, (state, action) => {
        state.loading = false;
        state.users = action.payload;
      })
      .addCase(fetchUsersAsync.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export const { addUser, removeUser } = userSlice.actions;

export default userSlice.reducer;