CODEWITHSUNDEEP
reactjsredux
user15992593
user15992593

Reputation:

Unhandled Rejection (TypeError): Cannot perform 'get' on a proxy that has been revoked

I'm studying on learning redux by using @reduxjs toolkit and want to be able to list a list of universities coming from http://universities.hipolabs.com/search?country=Turkey. While trying to map the universities from the link and push each other to the initialState which is 'universities', I get an error that gives that error message:

"Unhandled Rejection (TypeError): Cannot perform 'get' on a proxy that has been revoked"

What am I doing wrong?

UniversityService:

import axios from "axios";

export default class UniversityService {
  getUniversitiesByCountry(countryName) {
    return axios
      .get("http://universities.hipolabs.com/search? country=" + countryName)
      .then((response) => response);
  }
}

UniversitiesSlice:

import { createSlice } from "@reduxjs/toolkit";
import UniversityService from "../../service/UniversityService";

const universityService = new UniversityService();

export const universitiesSlice = createSlice({
  name: "universities",
  initialState: {
    universities: [],
  },
  reducers: {
    setUniversitiesByCountryName: (state, action) => {
      universityService
        .getUniversitiesByCountry(action.payload)
        .then((response) => response.data.map(
          (university) => state.universities.push(university)
        ));
    },
  },
});

export const { setUniversitiesByCountryName } = universitiesSlice.actions;
export default universitiesSlice.reducer;

ListPage.js

export default function ListPage() {
  const dispatch = useDispatch();
  dispatch(setUniversitiesByCountryName("Turkey"));

  const universities = useSelector((state) => state.universities.universities);

  console.log(universities);

  return (
    <div>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>University Name</th>
            <th>Domain</th>
            <th>Web Page</th>
          </tr>
        </thead>
        <tbody>
          {universities.map((university) => (
            <tr key={university.index}>
              <td>{universities.indexOf(university) + 1}</td>
              <td>{university.name}</td>
              <td>{university.domains[0]}</td>
              <td>
                <a style={{ textDecoration: "none" }} href={university.web_pages[0]} target="_blank">
                  {university.web_pages[0]}
                </a>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

Upvotes: 0

Views: 203

Answers (1)

markerikson
markerikson

Reputation: 67469

You're trying to run async logic in a reducer, and that is never allowed in Redux - reducers must not have side effects.

Async logic must go outside of a reducer, such as in a "thunk" function:

Upvotes: 1

Related Questions