mapDispatchToProps не помещает мою функцию в реквизит

Question

Я использую React with Redux и следую учебнику, но я не могу на всю жизнь понять эту ошибку.

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

У меня есть файл исходного кода с действиями/index.js и у меня есть компоненты/файл 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); 

действия/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() {.... 

Try:

export default function fetchPosts() {.. 

Answer 2

В действиях/index.js, чтобы изменения экспорта по умолчанию

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

 
    return { 
 
    type: FETCH_POSTS, 
 
    payload: request 
 
    } 
 
} 
 

или оператор импорта редактировать в ваших компонентов/posts_index.js

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