在 Axios 中使用 Redux-Observable 的问题

Posted 2023-03-28

【中文标题】在 Axios 中使用 Redux-Observable 的问题

【英文标题】：Issues Using Redux-Observable With Axios

【发布时间】：2019-06-04 19:00:12

【问题描述】：

我正在尝试学习 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);

【问题讨论】：

既然axios返回了一个promise，你需要使用.then而不是.map吗？

果然……成功了。

【参考方案1】：

使用 .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)))
);

另外，请确保从 rxjs 导入 .map 运算符

更新：使用 .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()))
      )
    )
  )

【讨论】：

嘿，我有类似的代码，但得到TypeError: Object(...)(...).map is not a function。使用"rxjs": "6.2.1" 和"redux-observable": "^1.1.0" 有什么想法吗？谢谢

不再遵循此语法。从mergeMap 到pipe( map() ....stuff ) 里面需要.pipe()

悉达多，你能不能分享一下新的语法，包括管道、地图和捕捉。