javascript - API 调用的 Redux 操作不正确

Question

那是我的store.js：

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import mainReducer from './reducers/index';
import fetchJokes from './actions/jokes';
const loggerMiddleware = createLogger();

const store = createStore(
  mainReducer,
  applyMiddleware(
    thunkMiddleware,
    loggerMiddleware
  )
)
store
  .dispatch(fetchJokes(1))
  .then(() => console.log(store.getState()))

export default store

那是我的/actions/jokes.js

import fetch from 'cross-fetch';
import { REQUEST_JOKES, RECEIVE_JOKES } from '../types/jokes'

/*synchronous actions*/

export const requestJokes = quantity => ({
  type: REQUEST_JOKES,
  quantity
});

export const receiveJokes = data => ({
  type: RECEIVE_JOKES,
  jokes: data.value.map(j => j.joke)
});

/*asynchronous actions*/

export const fetchJokes = quantity => {
  return dispatch => {
  dispatch(requestJokes(quantity))
    return fetch('https://api.icndb.com/jokes/random/${quantity}')
      .then(response => response.json(),
        error => console.log('An error: ', error))
      .then(data => dispatch(receiveJokes(data)))
  }
} 

控制台给我带来了一个错误Uncaught TypeError: (0 , _jokes2.default) is not a function。我已经调查了某个操作的问题，fetchJokes但我无法识别此功能的实际问题是什么。

标签： javascriptreactjsredux

Answer 1

您正在使用命名导出，fetchJokes因此您应该像这样导入它

import { fetchJokes } from './actions/jokes';