React Native Redux Saga takeLatest method not getting called - redux

Question

I am a newbie in react native. I am implementing redux saga in my app. but the saga request for fetch method is not called on 'Random photos list' text click.
Here is my code:
App.js
// Imports: Dependencies
import React from 'react';
import { Provider } from 'react-redux';
// Imports: Screens
import Counter from './Counter';
// Imports: Redux Store
import { store } from '../Stores/store';
// React Native App
export default function App() {
return (
// Redux: Global Store
<Provider store={store}>
<Counter />
</Provider>
);
}
Counter.js
render() {
debugger;
return (
<View style={styles.headerStyle}>
<TouchableHighlight onPress={this.props.fetchData}>
<Text style={styles.headline}>Random Photos List</Text>
</TouchableHighlight>
<FlatList
data={this.props.photos}
renderItem={({item}) =>
<TouchableHighlight onPress={ () => this.showAlert() }>
<View style={styles.container}>
<View style={styles.buttonContainer1}>
<Text style={styles.textStyle1}>{item.id}</Text>
</View>
<View style={styles.buttonContainer2}>
<Text style={styles.textStyle2}>{item.title}</Text>
</View>
</View>
</TouchableHighlight>
}
keyExtractor={item => item.id}
/>
</View>
)
}
const mapStateToProps = (state) => {
debugger;
console.log('State:');
console.log(state);
// Redux Store --> Component
return {
photos: state.photos.photos
};
};
// Map Dispatch To Props (Dispatch Actions To Reducers. Reducers Then Modify The Data And Assign It To Your Props)
const mapDispatchToProps = dispatch => {
return {
// dispatching plain actions
fetchData: () => dispatch({ type: 'FETCH_PHOTO_REQUESTED' })
}
}
// Exports
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
Reducer/index.js
// Imports: Dependencies
import { combineReducers } from 'redux';
// Imports: Reducers
import counterReducer from './counterReducer';
// Redux: Root Reducer
const rootReducer = combineReducers({
photos: counterReducer,
});
// Exports
export default rootReducer;
CounterReducer.js
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_PHOTO_SUCCESS':
return {
...state,
photos: action.payload
}
default:
return state;
}
};
// Exports
export default counterReducer;
store.js
// Imports: Dependencies
import { createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';
import createSagaMiddleware from 'redux-saga';
// Imports: Redux Root Reducer
import rootReducer from '../Reducers/index';
// Imports: Redux Root Saga
import { rootSaga } from '../Sagas/index';
// Middleware: Redux Saga
const sagaMiddleware = createSagaMiddleware();
// Redux: Store
const store = createStore(
rootReducer,
applyMiddleware(
sagaMiddleware,
createLogger(),
),
);
// Middleware: Redux Saga
sagaMiddleware.run(rootSaga);
// Exports
export {
store,
}
Sagas/index.js
// Imports: Dependencies
import { all, fork} from 'redux-saga/effects';
// Imports: Redux Sagas
import {fetchPhotos} from './counterSaga';
// Redux Saga: Root Saga
export function* rootSaga() {
yield fork(fetchPhotos);
}
and
counterSaga.js
import { delay, takeEvery, takeLatest, put } from 'redux-saga/effects';
function* fetchPhotosAsync() {
try {
const payload = yield call(getData);
debugger;
yield put({ type: 'FETCH_PHOTO_SUCCESS', payload });
} catch (e) {
debugger;
yield put({ type: 'FETCH_PHOTO_ERROR', payload: e });
}
}
function getData() {
debugger;
return fetch("https://jsonplaceholder.typicode.com/photos").then(response =>
response.json()
);
}
// Watcher: Increase Counter Async
export function* fetchPhotos() {
// Take Last Action Only
debugger;
yield takeLatest('FETCH_PHOTO_REQUESTED', fetchPhotosAsync);
};
I have been debugging for 2 days now. still not able to find the cause. Please Help.
Any Help is appreciated. Thank you.