Проблемы с использованием Redux-Observable с Axios - PullRequest
Новая
       18

Проблемы с использованием Redux-Observable с Axios

0 голосов
/ 10 января 2019

Я пытаюсь изучать избыточные наблюдаемые, но, похоже, у меня проблема с тем, чтобы заставить мое приложение возвращать данные. Я продолжаю получать ошибку ниже, и я не уверен, где я иду неправильно или что на самом деле означает ошибка.

Ошибка: Ошибка типа: 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
});

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

РЕДУКТОР: 

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

1 Ответ

0 голосов
/ 13 января 2019

Использование .then решило бы проблему, если правильно сделать это, используя функцию from rxjs, как показано ниже 

 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

...