javascript - mapDispatchToProps 没有将我的函数放入 props

Question

我正在将 React 与 Redux 结合使用并遵循教程，但我终究无法找出这个错误。

Uncaught TypeError: this.props.fetchPosts is not a function

我有一个带有 actions/index.js 的 src 文件和一个 components/posts_index.js 文件。据我所知，这是唯一涉及此错误的两个文件，我不相信 mapDispatchToProps 实际上将我的函数放在 this.props 中，但我不知道为什么。

组件/posts_index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import fetchPosts from '../actions/index';

class PostsIndex extends Component {
  componentWillMount() {
    this.props.fetchPosts();
  }

  render() {
    return(
      <div>List of Blog Posts</div>
    )
  }
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({ fetchPosts }, dispatch);
}

export default connect(null, mapDispatchToProps)(PostsIndex);  

Action /index.js

import axios from 'axios';

export const FETCH_POSTS = 'FETCH_POSTS';

const ROOT_URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '?key=hn8y9e7yhvjkw9w887';

export function fetchPosts () {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  }
}

非常感谢任何帮助!

Answer 1

代替:

export function fetchPosts () {....

尝试:

 export default function fetchPosts () {..