react redux and thunks / axios / is not a function

Question

您好，我在尝试使用我的 api 时遇到以下错误

TypeError: api.get 不是函数

api.js

从'axios'导入axios；

const api = axios.create({ baseURL: 'http://localhost:8000', });

导出默认api；

动作获取：

const api = require('../../services/api');

export function productsError(bool) {
    return {
        type: 'PRODUCTS_HAS_ERRORED',
        hasErrored: bool
    };
}
export function productsIsLoading(bool) {
    return {
        type: 'PRODUCTS_IS_LOADING',
        isLoading: bool
    };
}
export function productsFetchSuccess(products) {
    return {
        type: 'PRODUCTS_SUCCESS',
        products
    };
}

export function errorAfterFiveSeconds() {
    // We return a function instead of an action object
    return (dispatch) => {
        setTimeout(() => {
            // This function is able to dispatch other action creators
            dispatch(productsError(true));
        }, 5000);
    };
}

export function ProductsFetchData() {
    return (dispatch) => {
        dispatch(productsIsLoading(true));
        api.get('/products')
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }
                dispatch(productsIsLoading(false));
                return response;
            })
            .then((response) => response.json())
            .then((products) => dispatch(productsFetchSuccess(products)))
            .catch(() => dispatch(productsError(true)));
    };
}

reducer 获取

export function ProductsHasErrored(state = false, action) {
    switch (action.type) {
        case 'PRODUCTS_HAS_ERRORED':
            return action.hasErrored;
        default:
            return state;
    }
}
export function ProductsIsLoading(state = false, action) {
    switch (action.type) {
        case 'PRODUCTS_IS_LOADING':
            return action.isLoading;
        default:
            return state;
    }
}
            return action.products;
        default:
            return state;
    }
}         return action.products;
        default:
            return state;
    }
}export function Products(state = [], action) {
            return action.products;
        default:
            return state;
    }
}         return action.products;
        default:
            return state;
    }
}

我的商店：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}

在我的应用中：

import React, { Component } from 'react'
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux';
import { ProductsFetchData } from '../../store/actions/productsFetch';
class index extends Component {

  componentDidMount() {
    this.props.fetchData('/products');
  }


  render() {
    if (this.props.hasErrored) {
          return <p>Sorry! There was an error loading the items</p>;
    }

    if (this.props.isLoading) {
          return <p>Loading…</p>;
    }
    return (
      <div>

      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
      products: state.products,
      hasErrored: state.itemsHasErrored,
      isLoading: state.itemsIsLoading
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
      fetchData: () => dispatch(ProductsFetchData())
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(index);

基本上我在这个函数中有错误：

export function ProductsFetchData() {
    return (dispatch) => {
        dispatch(productsIsLoading(true));
        api.get('/products')
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }
                dispatch(productsIsLoading(false));
                return response;
            })
            .then((response) => response.json())
            .then((products) => dispatch(productsFetchSuccess(products)))
            .catch(() => dispatch(productsError(true)));
    };
}

我不知道为什么或在哪里出错

Answer 1

当你使用export default时，这个文件会创建一个key为default的对象并导出。

const a = 2;
export default a;

使用要求导入：

const a = require(...)
console.log(a)
// a here will be an object
>> Object {default: 2}

所以当你想从export default使用require时，你必须访问.default：console.log(a.default)。

或者你可以像这样在 ES6 中使用 import：

import a from '...';
// console.log(a)
>> 2

Answer 2

您应该将 baseURL 导出为 const，然后在您的操作中：

import axios from 'axios'
//othercode here 
export function ProductsFetchData() {
    return (dispatch) => {
        dispatch(productsIsLoading(true));
        api.get(`${}/products`)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }
                dispatch(productsIsLoading(false));
                return response;
            })
            .then((response) => response.json())
            .then((products) => dispatch(productsFetchSuccess(products)))
            .catch(() => dispatch(productsError(true)));
    };
}

Answer 3

在行动抓取中，你应该改变：

const api = require('../../services/api');

到：

const api = require('../../services/api').default; 

或

import api from '../../services/api')