Reactjs 使用Axios可观察的Redux的问题

我正在尝试学习redux可观测值，但我似乎在让我的应用程序返回数据时遇到了问题。我不断得到下面的错误，我不知道我错在哪里，或者错误的真正含义是什么

错误：TypeError:axios\uuuu网页包\u导入的\u模块\uu 3\uuuuu默认值。a.get（…）。映射不是函数

行动：

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 { 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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“./actions”导入{fetchData}；
类应用程序扩展组件{
onClick=（）=>{
this.props.fetchData（）；
}
render（）{
返回(
你好，世界
{JSON.stringify（this.props.data）}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
数据：国家
}
};
功能图DispatchToprops（调度）{
返回{
fetchData:（）=>分派（fetchData（））
}
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（App）；

使用

。那么

就可以解决这个问题，正确的做法是使用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()))
      )
    )
  )

---

既然axios返回了一个承诺，您是否需要使用

。然后

而不是

。map

？果然。。。这就成功了。嘿，我有类似的代码，但是得到了

TypeError:Object（…）（…）。map不是一个函数

。使用

“rxjs”：“6.2.1”

和

“可观察的redux”：“^1.1.0”

有什么想法吗？谢天谢地，这个语法不再被遵循了。需要从

mergeMap

中使用

.pipe（）

，然后在

pipe（map（）…stuff）

Siddhartha中，您可以分享新语法，其中包括pipe、map和catch。

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()))
      )
    )
  )