I am trying to implement a stock dashboard app which uses the CoinGecko API. At the beginning, I created the following action.js,
export const ALL_COINS = "ALL_COINS";
export const ALL_CATEGORIES = "ALL_CATEGORIES";
export const ALL_EXCHANGES = "ALL_EXCHANGES";
export const ALL_ASSETPLATFORMS = "ALL_ASSETPLATFORMS";
import {
fetchAllCoins,
fetchAllCategories,
fetchAllExchanges,
fetchAllAssetPlatforms,
} from "../services/coinService";
import {
ALL_COINS,
ALL_CATEGORIES,
ALL_EXCHANGES,
ALL_ASSETPLATFORMS,
} from "./actionTypes";
export const fetchData = () => async (dispatch) => {
const response = await fetchAllCoins();
dispatch({
type: ALL_COINS,
payload: response.data,
});
};
export const fetchCategories = () => async (dispatch) => {
const response = await fetchAllCategories();
dispatch({
type: ALL_CATEGORIES,
payload: response.data,
});
};
export const fetchExchanges = () => async (dispatch) => {
const response = await fetchAllExchanges();
dispatch({
type: ALL_EXCHANGES,
payload: response.data,
});
};
export const fetchAssetPlatforms = () => async (dispatch) => {
const response = await fetchAllAssetPlatforms();
dispatch({
type: ALL_ASSETPLATFORMS,
payload: response.data,
});
};
And the following reducser:
import {
ALL_COINS,
ALL_CATEGORIES,
ALL_EXCHANGES,
ALL_ASSETPLATFORMS,
} from "./actionTypes";
export const initialState = {
allCoins: [],
categories: [],
exchanges: [],
assetPlatforms: [],
};
eslint-disable-next-line no-lone-blocks
export const fetchReducer = (state = [], action) => {
switch (action.type) {
case ALL_COINS:
return action.payload;
case ALL_CATEGORIES:
return action.payload;
case ALL_EXCHANGES:
return action.payload;
case ALL_ASSETPLATFORMS:
return action.payload;
default:
return state;
}
};
import { configureStore } from "@reduxjs/toolkit";
import { fetchReducer } from "./redusers";
import { combineReducers } from "@reduxjs/toolkit";
const rootReducer = combineReducers({
fetch: fetchReducer,
});
export default configureStore({
reducer: rootReducer,
});
I also use separate coinService
import axios from "axios";
export const fetchAllCoins = () => {
return axios.get(
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd",
{
headers: {
"Content-Type":
"application/x-www-form-urlencoded; charset=UTF-8;application/json",
},
}
);
};
export const fetchAllCategories = () => {
return axios.get("https://api.coingecko.com/api/v3/coins/categories/list", {
headers: {
"Content-Type":
"application/x-www-form-urlencoded; charset=UTF-8;application/json",
},
});
};
export const fetchAllExchanges = () => {
return axios.get("https://api.coingecko.com/api/v3/exchanges", {
headers: {
"Content-Type":
"application/x-www-form-urlencoded; charset=UTF-8;application/json",
},
});
};
export const fetchAllAssetPlatforms = () => {
return axios.get("https://api.coingecko.com/api/v3/asset_platforms", {
headers: {
"Content-Type":
"application/x-www-form-urlencoded; charset=UTF-8;application/json",
},
});
};
All of this code above I use in different components, for example:
export default function CustomizedTables() {
const dispatch = useDispatch();
const currency = useSelector((state) => state.fetch);
const input = useInput();
const [page, setPage] = useState(0);
const [searchTerm, setSearchTerm] = useState("");
const [rowsPerPage, setRowsPerPage] = useState(5);
When I used the code which I provided above, I received responses from the API and my UI rendered data. However, I received the same data, so I decided to rewrite my reducer.js like this:
import {
ALL_COINS,
ALL_CATEGORIES,
ALL_EXCHANGES,
ALL_ASSETPLATFORMS,
} from "./actionTypes";
export const initialState = {
allCoins: [],
categories: [],
exchanges: [],
assetPlatforms: [],
};
// TODO: finish redusers
export const fetchReducer = (state = initialState, action) => {
switch (action.type) {
case ALL_COINS:
return {
...state,
allCoins: action.payload,
};
case ALL_CATEGORIES:
return {
...state,
categories: action.payload,
};
case ALL_EXCHANGES:
return {
...state,
exchanges: action.payload,
};
case ALL_ASSETPLATFORMS:
return {
...state,
assetPlatforms: action.payload,
};
default:
return state;
}
};
But for now, this doesn’t work at all. What exactly am I doing wrong? I understand that my mistake is obvious, but I would be grateful for any clues on what direction I should move in order to resolve this issue. Thanks in advance!
But for now, this doesn’t work at all. What exactly am I doing wrong? I understand that my mistake is obvious, but I would be grateful for any clues on what direction I should move in order to resolve this issue. Thanks in advance!
