Context:
- I am running MX-Linux 21.3, using VS-code, using “vite build” with dependencies {
“@reduxjs/toolkit”: “^1.9.5”,
“axios”: “^1.4.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-fontawesome”: “^1.7.1”,
“react-icons”: “^4.10.1”,
“react-redux”: “^8.1.2”,
“redux”: “^4.2.1”}, and finally I use this API “https://restcountries.com/v3.1/all”.
Description:
First of all, my github repo in this link:
github repo link
Second, I suppose to get all the countries from this API and display them in my Home page, but I get error message:
This is my code in the redux toolkit slice:
((countriesSlice.js))
import { createSlice } from "@reduxjs/toolkit";
import { showAllCountries, searchByCode, searchByRegion } from "./countriesAction";
const initialState = {
loading: false,
countriesData: [],
countrySearched: [],
error: false,
success: false,
message: "",
region: "",
searchTerm: "",
}
export const countriesSlice = createSlice({
name: "countries",
initialState: initialState,
reducers: {
reset: (state) => {
state.loading = false;
state.success = false;
state.error = false;
state.message = false;
state.countrySearched = [];
state.region = "";
state.searchTerm = "";
}
},
setRegion: (state, action) => {
state.region = action.payload;
},
setSearchTerm: (state, action) => {
state.searchTerm = action.payload;
},
extraReducers: (builder) => {
builder.addCase(showAllCountries.pending, (state) => {
state.loading = true;
}).addCase(showAllCountries.fulfilled, (state, action) => {
state.loading = false;
state.countriesData = action.payload;
state.success = true;
}).addCase(showAllCountries.rejected, (state, action) => {
state.loading = false;
state.error = true;
state.message = action.payload;
state.countriesData = [];
}).addCase(searchByCode.pending, (state) => {
state.loading = true;
}).addCase(searchByCode.fulfilled, (state, action) => {
state.loading = false;
state.countrySearched = action.payload;
state.success = true;
}).addCase(searchByCode.rejected, (state, action) => {
state.loading = false;
state.error = true;
state.message = action.payload;
state.countrySearched = [];
}).addCase(searchByRegion.pending, (state) => {
state.loading = true;
}).addCase(searchByRegion.fulfilled, (state, action) => {
state.loading = false;
state.countriesData = action.payload;
state.success = true;
}).addCase(searchByRegion.rejected, (state, action) => {
state.loading = false;
state.error = true;
state.message = action.payload;
state.countriesData = [];
})
}
})
export const { reset, setRegion, setSearchTerm } = countriesSlice.actions;
export default countriesSlice.reducer;
((countriesAction.js))
import axios from "axios";
import { createAsyncThunk } from "@reduxjs/toolkit";
// show all countries async function
export const showAllCountries = createAsyncThunk("countries/showAll", async(_, thunkAPI) => {
try {
const response = await axios.get(`https://restcountries.com/v3.1/all`);
// console.log(response.data)
return response.data;
} catch(err) {
const message = (err.response && err.response.data) || err.message;
// this function (rejectWithValue) will send the error message as a payload to our page to be displayed.
return thunkAPI.rejectWithValue(message);
}
});
// search country by using cioc code :
export const searchByCode = createAsyncThunk("countries/searchByCode", async(code, thunkAPI) => {
try {
const response = await axios.get(`https://restcountries.com/v3.1/alpha/${code}`);
return response.data;
} catch (err) {
const message = (err.response && err.response.data) || err.message;
console.log(message);
} finally {
console.log(thunkAPI);
}
})
// search country by using region :
export const searchByRegion = createAsyncThunk("countries/searchByRegion", async(region, thunkAPI) => {
try {
const response = await axios.get(`https://restcountries.com/v3.1/region/${region}`);
return response.data;
} catch (err) {
const message = (err.response && err.response.data) || err.message;
console.log(message);
} finally {
console.log(thunkAPI);
}
})
((countryDetail.jsx))
import "./country-detail.css";
import { useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import { searchByCode } from "../../features/countries/countriesAction";
import { reset } from "../../features/countries/countriesSlice";
// import from Redux :
import { useSelector, useDispatch } from "react-redux";
const CountryDetail = () => {
const { err, countrySearched } = useSelector((state) => state.country );
const dispatch = useDispatch();
const {code} = useParams();
useEffect(() => {
if(code){
dispatch(searchByCode(code.toLowerCase()));
}
if(err){
console.log(err);
}
return () => {
dispatch(reset)
}
}, [dispatch, code, err])
return (
<section className="country-detail-container">
<Link className="back-button" to="/">
<i className="fa-solid fa-arrow-left"></i> Back
</Link>
<div className="country-detail-content">
{countrySearched.length > 0 ? (
<>
<img src={countrySearched[0].flags.png} alt={countrySearched[0].flags.alt} className="country-detail-image" />
<div className="country-detail-right">
<h1>{countrySearched[0].name.common}</h1>
<div className="details">
<div className="detail-left">
<p>
Offcial Name: <span>{countrySearched[0].name.official}</span>
</p>
<p>
Population: <span>{countrySearched[0].population}</span>
</p>
<p>
Region: <span>{countrySearched[0].region}</span>
</p>
<p>
Sub Region: <span>{countrySearched[0].subregion}</span>
</p>
<p>
Capital: <span>{countrySearched[0].capital}</span>
</p>
</div>
<div className="detail-right">
<p>
Top Level Domain: <span>{countrySearched[0].tld[0]}</span>
</p>
<p>
Currencies:
<span>
{Object.values(countrySearched[0].currencies).map((item) => {
return item.name;
}).join(",")}
</span>
</p>
<p>
Languages:
<span>
{Object.values(countrySearched[0].languages).map((item) => {
return item;
}).join(",")}
</span>
</p>
</div>
</div>
<div className="border">
<p>Border Countries:</p>
{countrySearched[0].borders ?
countrySearched[0].borders.map((item, index) => {
return (<Link className="border-name" key={index} to={`${item}`}>
<p>{item}</p>
</Link>)}
) : (<span> No Borders </span>)}
</div>
</div>
</>
) : <div> No Details Found! </div> }
</div>
</section>
);
};
export default CountryDetail;
I have a doubt in the dispatching methods like:
dispatch(searchByCode(code.toLowerCase()));
But I feel the error message is misleading.
I hope I made it clear and provide the problem in a descriptive way.
I would appreciate any help and thanks in advance for your cooperation.
