Issues Using Redux-Observable With Axios - reactjs

Question

I'm trying to learn redux-observables but I seem to be having an issue getting my app to return data. I keep getting the error below and I'm not sure where I'm going wrong or what the error actually means.
Error: TypeError: axios__WEBPACK_IMPORTED_MODULE_3___default.a.get(...).map is not a function
Actions:
import { FETCH_DATA, FETCH_DATA_FAIL } from './constants';
export const fetchData = exampleData => ({
type: FETCH_DATA,
payload: { exampleData }
});
export const fetchDataFail = () => ({
type: FETCH_DATA_FAIL
});
EPIC:
import 'rxjs';
import { FETCH_DATA, FETCH_DATA_FAIL } from './constants';
import { fetchData } from './actions';
import axios from 'axios';
import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { ofType } from 'redux-observable';
export const exampleEpic = action$ =>
action$.pipe(ofType(FETCH_DATA),
mergeMap(action =>
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.map(response => fetchData(response))
.catch(error => Observable.ofType(FETCH_DATA_FAIL)))
);
REDUCER:
import { FETCH_DATA, FETCH_DATA_FAIL } from './constants';
import { combineReducers } from 'redux';
const initialState = {};
export const exampleData = (state = initialState, action) => {
switch (action.type) {
case FETCH_DATA:
return action.payload
case FETCH_DATA_FAIL:
return {};
default:
return state;
}
};
export default combineReducers({
exampleData
});
EXAMPLE COMPONENT:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';
class App extends Component {
onClick = ()=>{
this.props.fetchData();
}
render() {
return (
<div>
<button onClick={this.onClick}><h1>Hello World</h1></button>
{JSON.stringify(this.props.data) }
</div>
);
}
}
const mapStateToProps = (state) => {
return {
data: state
}
};
function mapDispatchToProps(dispatch) {
return {
fetchData: () => dispatch(fetchData())
}
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);

Answer 1

Using .then would have solved the issue, by the right way of doing it is using rxjs's from function, like below
import 'rxjs';
import { FETCH_DATA, FETCH_DATA_FAIL } from './constants';
import { fetchData } from './actions';
import axios from 'axios';
import { Observable, from } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';
import { ofType } from 'redux-observable';
export const exampleEpic = action$ =>
action$.pipe(ofType(FETCH_DATA),
mergeMap(action =>
from(axios.get('https://jsonplaceholder.typicode.com/todos/1'))
.map(response => fetchData(response))
.catch(error => Observable.ofType(FETCH_DATA_FAIL)))
);
Also, make sure you import .map operator from rxjs
Update: syntax using the .pipe operator
export const exampleEpic = action$ =>
action$.pipe(
ofType(FETCH_DATA),
mergeMap(action => from(axios.get('https://jsonplaceholder.typicode.com/todos/1/'))
.pipe(
map(response => fetchData(response)),
catchError(() => of(fetchDataFailure()))
)
)
)