Trusislv1 Trusislv1 - 11 months ago 174
React JSX Question

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

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:


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 -


in result i get this error in console -

this.props.actions.fetchPosts is not a function

enter image description here

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


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

function mapStateToProps(state) {
return state
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(fetchPosts, dispatch)

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


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

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

function fetchingWinRates() {
return {

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

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

Answer Source

If you pass a function to bindActionCreators, it will return a function. See the documentation for bindActionCreators here (in the Returns section):

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 }.