Trusislv1 Trusislv1 - 1 month ago 22
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:


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


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:

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

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