React Redux - this.props.actions.fetchPosts is not a function

Question

i have issue with calling async action from my component, i think i did everything what was needed to work but seems like not, i used:

mapDispatchToProps

and inside i return

actions: bindActionCreators(fetchPosts, dispatch)

and i connect it.

After all these things, i try to call this action in my component -

this.props.actions.fetchPosts()

in result i get this error in console -

this.props.actions.fetchPosts is not a function

And i can not understand what's the problem with it as i did everything, here will be the full source:

Component

import React, { Component } from 'react';
import { Link } from 'react-router';
import styles from './Home.css';
import { fetchPosts } from '../actions/counter';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';


    class Home extends Component {

        constructor(props) {
            super(props)
        }
        render() {
                return (
                        <div>
                            <div className="container">
                                <div className="banner_animated">
                                    <p> dadasda</p>
                                </div>
                            </div>
                            <div className="container-fluid">
                                <div className="center">
                                    <input type="text"/>
                                    <button className="btn-2 btn-2a btn" onClick={this.props.actions.fetchPosts()}>Button</button>
                                </div>
                            </div>

                        </div>
                );
        }
}
function mapStateToProps(state) {
        return state
}
function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(fetchPosts, dispatch)
    };
}

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

Action

import { FETCHING_WIN_RATES, FETCHED_WIN_RATES } from '../const';
import { firebaseDb } from './firebase';

const ref = firebaseDb.ref("win_rate");

    function fetchingWinRates() {
        return {
                type: FETCHING_WIN_RATES
        };
}

    function fetchedWinRates(winRates) {
        return {
                type: FETCHED_WIN_RATES,
                winRates
        };
}
// win rate champions
export function fetchPosts() {
        return dispatch => {
                dispatch(fetchingWinRates());
                ref.on("value", function(snapshot) {
                        dispatch(fetchedWinRates(snapshot));
                        console.log(snapshot.val());
                }, function (errorObject) {
                        console.log("The read failed: " + errorObject.code);
                });
        }
}

Write if you need some more files to help me, thank you.

Answer 1

If you pass a function to bindActionCreators, it will return a function. See the documentation for bindActionCreators here (in the Returns section): http://redux.js.org/docs/api/bindActionCreators.html.

You are effectively assigning this.props.action = fetchPosts here, meaning you would call fetchPosts like so: this.props.action().

If you want to access via this.props.actions.fetchPosts, you need to do the following:

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

Notice the shorthand { fetchPosts } which is the same as { fetchPosts: fetchPosts }.

Answer 2

You don't need to use bindActionCreators http://redux.js.org/docs/api/bindActionCreators.html

const mapDispatchToProps = dispatch => ({
    onClick: () => dispatch(fetchPosts(id))
  })
}

and then access via this.props.onClick