Err Call Api on redux observable using Axios

Question

I'm trying to learn redux-observables but I seem to be having an issue getting my app to return data. I keep getting the error below and I'm not sure where I'm going wrong or what the error actually means. I'm trying to learn redux-observables but I seem to be having an issue getting my app to return data. I keep getting the error below and I'm not sure where I'm going wrong or what the error actually means. I'm trying to learn redux-observables but I seem to be having an issue getting my app to return data. I keep getting the error below and I'm not sure where I'm going wrong or what the error actually means. I'm trying to learn redux-observables but I seem to be having an issue getting my app to return data. I keep getting the error below and I'm not sure where I'm going wrong or what the error actually means.

ERR: fetchData is not a function I need help

Contsants

export const FETCH_DATA = "FETCH_DATA"; 
export const FETCH_DATA_FAIL = "FETCH_DATA_FAIL ";

Action

import { FETCH_DATA, FETCH_DATA_FAIL } from "../contsants/contsants";

export const fetchData = (exampleData = {}) => ({
    type: FETCH_DATA,
    payload: exampleData
});

export const fetchDataFail = () => ({
    type: FETCH_DATA_FAIL
});

Store

import { createStore } from "redux";
import rootReducer from "../Reducer/reducer";

const store = createStore(rootReducer);

export default store;

Reducer

import { FETCH_DATA, FETCH_DATA_FAIL } from "../contsants/contsants";
import { combineReducers } from "redux";

const initialState = {};

export const exampleData = (state = initialState, action: any) => {
  switch (action.type) {
    case FETCH_DATA:
      return action.payload;
    case FETCH_DATA_FAIL:
      return {};
    default:
      return state;
  }
};

export default combineReducers({
  exampleData
});

Epics

import "rxjs";
import axios from "axios";
import { from, of } from "rxjs";
import { mergeMap, map, catchError } from "rxjs/operators";
import { ofType } from "redux-observable";
import { FETCH_DATA } from "../contsants/contsants";
import { fetchData, fetchDataFail } from "../Actions/action"

export const exampleEpic = (action$: any) =>
    action$.pipe(
        ofType(FETCH_DATA),
        mergeMap((action) =>
            from(axios.get("jsonplaceholder.typicode.com/todos/1")).pipe(
                map((response) => fetchData(response.data)),
                catchError(() => of(fetchDataFail()))
            )
        )
    );

App

import { fetchData } from './Actions/action'
import { connect } from "react-redux";

function App(data: any, fetchData: any) {
  const handleClickShowsTodos = () => {
    fetchData()
    console.log(data);
  }

  return (
    <div>
      <input type="text" />
      <button onClick={handleClickShowsTodos}>ShowsTodo</button>
    </div>
  );
}
const mapStateToProps = (state: any) => {
  return {
    data: state
  };
};

function mapDispatchToProps(dispatch: any) {
  return {
    fetchData: () => {
      console.log('dispatch')
      dispatch(fetchData())
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Err Call Api on redux observable using Axios

0 Answers0