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

Posted 2023-02-22

【中文标题】React Redux - this.props.actions.fetchPosts 不是函数

【英文标题】：React Redux - this.props.actions.fetchPosts is not a function

【发布时间】：2017-03-14 21:07:02

【问题描述】：

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

mapDispatchToProps

在里面我返回

动作：bindActionCreators(fetchPosts, dispatch)

然后我连接它。

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

this.props.actions.fetchPosts()

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

this.props.actions.fetchPosts 不是函数

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

组件

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

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

【参考方案1】：

如果您将函数传递给bindActionCreators，它将返回一个函数。在此处查看bindActionCreators 的文档（在返回部分）：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)
    ;

注意简写 fetchPosts ，它与 fetchPosts: fetchPosts 相同。

【参考方案2】：

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

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

然后通过this.props.onClick访问