reactjs - 在 Axios 中使用 Redux-Observable 的问题
问题描述
我正在尝试学习 redux-observables,但我似乎在让我的应用程序返回数据时遇到问题。我不断收到下面的错误,我不确定我哪里出错了或错误的实际含义。
错误:TypeError:axios__WEBPACK_IMPORTED_MODULE_3___default.a.get(...).map 不是函数
行动:
import { FETCH_DATA, FETCH_DATA_FAIL } from './constants';
export const fetchData = exampleData => ({
type: FETCH_DATA,
payload: { exampleData }
});
export const fetchDataFail = () => ({
type: FETCH_DATA_FAIL
});
史诗:
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)))
);
减速器:
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
});
示例组件:
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);
解决方案
使用.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)))
);
另外,请确保.map
从 rxjs 导入运算符
更新:使用 .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()))
)
)
)
推荐阅读
- c++ - C ++:使用结构检查字符串中括号和括号的顺序是否平衡
- nlp - 如何使用 BERT/GPT-2 进行释义生成
- c++ - 如何在 QtQuick 2 中显示 rgb 数据?
- ansible - ansible-在所有服务器上运行第一个任务并移至第二个任务
- python-3.x - 启动项目时抓取缺少的教程文件夹
- java - 用Java中的图像更新SQL的速度极慢
- android-studio - 调试时Android Studio'无效的方法ID'
- python - 按钮隐藏/显示
- c++ - 如何从 cmd 但在同一窗口中运行 exe 文件?
- javascript - 客户端或服务器端的 OAuth?