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