[英]Issues Using Redux-Observable With Axios
I'm trying to learn redux-observables but I seem to be having an issue getting my app to return data.我正在尝试学习 redux-observables,但我似乎在让我的应用程序返回数据时遇到问题。 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错误:TypeError:axios__WEBPACK_IMPORTED_MODULE_3___default.a.get(...).map 不是函数
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);
Using .then
would have solved the issue, by the right way of doing it is using rxjs's from
function, like below使用.then
可以解决这个问题,正确的做法是使用 rxjs 的from
函数,如下所示
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另外,请确保从 rxjs 导入.map
运算符
Update: syntax using the .pipe operator更新:使用 .pipe 运算符的语法
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()))
)
)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.