Saga Setup, fetch is not executed - redux

Question

I have the following setup for my saga:
In saga.js
import { put, call } from "redux-saga/effects";
import { takeLatest } from "redux-saga";
import { SET_BASE_CURRENCY, SET_CURRENCY_REPONSE } from "./duck";
function* fetchCurrencyExchangeRate() {
const response = yield call(
fetch,
"https://api.exchangeratesapi.io/latest?base=USD"
);
const data = yield call([response, "json"]);
// const json = yield fetch(
// "https://api.exchangeratesapi.io/latest?base=USD"
// ).then(response => response.json());
yield put({ type: SET_CURRENCY_REPONSE, json: data });
}
export default function* rootSaga() {
yield takeLatest([SET_BASE_CURRENCY], fetchCurrencyExchangeRate);
}
In duck.js
import { defineAction } from "redux-define";
import { createAction, handleActions } from "redux-actions";
export const initialState = {
exchangeRate: 3.06,
baseCurrency: "SGD",
exchangeCurrency: "MYR",
amountToConvert: 0.0,
currencyResponse: ""
};
//Action-types
export const SET_EXCHANGE_RATE = defineAction("SET_EXCHANGE_RATE");
export const SET_BASE_CURRENCY = defineAction("SET_BASE_CURRENCY");
export const SET_EXCHANGE_CURRENCY = defineAction("SET_EXCHANGE_CURRENCY");
export const SET_AMOUNT_TO_CONVERT = defineAction("SET_AMOUNT_TO_CONVERT");
export const SET_CURRENCY_REPONSE = defineAction("SET_CURRENCY_REPONSE");
//Action-creators
export const setExchangeRate = createAction(
SET_EXCHANGE_RATE,
params => params
);
export const setExchangeCurrency = createAction(
SET_EXCHANGE_CURRENCY,
params => params
);
export const setBaseCurrency = createAction(
SET_BASE_CURRENCY,
params => params
);
export const setAmountToConvert = createAction(
SET_BASE_CURRENCY,
params => params
);
export const setCurrencyResponse = createAction(
SET_CURRENCY_REPONSE,
params => params
);
//reducer
const reducer = handleActions(
{
[setExchangeRate]: (state, { payload }) => ({
...state,
exchangeRate: payload
}),
[setExchangeCurrency]: (state, { payload }) => ({
...state,
exchangeCurrency: payload
}),
[setBaseCurrency]: (state, { payload }) => ({
...state,
baseCurrency: payload
}),
[setAmountToConvert]: (state, { payload }) => ({
...state,
amountToConvert: payload
}),
[setCurrencyResponse]: (state, { payload }) => ({
...state,
currencyResponse: payload
})
},
initialState
);
export default reducer;
//Selector
export const selectExhangeRate = state => state.reducer.exchangeRate;
export const selectExchangeCurrency = state => state.reducer.exchangeCurrency;
export const selectBaseCurrency = state => state.reducer.baseCurrency;
export const selectAmountToConvert = state => state.reducer.amountToConvert;
In index.js where the saga is setup
import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import ReduxThunk from "redux-thunk";
import reducers from "./configureStore/reducers";
import { Provider } from "react-redux";
import App from "./App";
import rootSaga from "./configureStore/saga";
import createSagaMiddleware from "redux-saga";
const sagaMiddleware = createSagaMiddleware();
const middlewares = [ReduxThunk];
const store = createStore(
reducers,
compose(
applyMiddleware(...middlewares),
applyMiddleware(sagaMiddleware),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
sagaMiddleware.run(rootSaga);
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
However, for some reason, I can't get the call function or the fetch function to work. I wanted it to trigger the api call when SET_BASE_CURRENCY action is triggered. Is there a problem with my setup or is it the way I am calling saga is wrong? Full code is inside this sandbox : https://codesandbox.io/s/todoapp-with-redux-and-normalized-store-jkp8z