React Redux - this.props.actions.fetchPosts 不是函数

Question

我在从我的组件调用异步操作时遇到问题，我想我做了所有需要做的事情但似乎没有，我用过：

mapDispatchToProps

在我里面 return

actions: bindActionCreators(fetchPosts, dispatch)

我连接它。

在所有这些事情之后，我尝试在我的组件中调用这个动作 -

this.props.actions.fetchPosts()

结果我在控制台中收到此错误 -

this.props.actions.fetchPosts is not a function

而且我无法理解它有什么问题，因为我做了所有事情，这里将是完整的来源：

组件

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);

动作

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);
                });
        }
}

如果您需要更多文件来帮助我，请写信给我，谢谢。

Answer 1

您不需要使用 bindActionCreators http://redux.js.org/docs/api/bindActionCreators.html

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

然后通过this.props.onClick

访问

Answer 2

如果您将一个函数传递给 bindActionCreators，它将 return 一个函数。请在此处查看 bindActionCreators 的文档（在 Returns 部分）：http://redux.js.org/docs/api/bindActionCreators.html.

您在这里有效地分配了 this.props.action = fetchPosts，这意味着您可以像这样调用 fetchPosts：this.props.action().

如果您想通过this.props.actions.fetchPosts访问，您需要执行以下操作：

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

注意 shorthand { fetchPosts } 与 { fetchPosts: fetchPosts }.

相同

React Redux - this.props.actions.fetchPosts 不是函数

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

reactjs

react-async

redux

redux-thunk

react-redux