redux-mapdispatchtoprops-typeerror:_this.props.setCurrentUserHandle不是函数

Question

我试图让一个简单的react-redux应用程序工作，但我遇到了一个奇怪的错误，我无法解决。我正在尝试简单地设置我当前用户的名字和处理商店，一个设置函数工作，而另一个不。

setCurrentUserFirstName-工作setCurrentUserHandle-不工作

    import React, { Component } from 'react';
    import { Link } from 'react-router';
    import { connect } from 'react-redux';
    import store from '../../store';
    var Utilities = require('../../../common/commonutilities.js');
    var RestClient = require('../../../common/restClient.js');

    //actions
    import { setCurrentUserHandle, setCurrentUserFirstName } from '../../actions/userActions';

    class Header extends Component {
      constructor(props) {
        super(props);

        this.state = {};

        RestClient.api.fetchGet('/getcurrentuser', (response) => {
          if(response.success) {
            this.setState({
              isAuthenticated: true,
              currentUser: response.currentUser
            });

            store.dispatch({
              type: 'USER_DID_LOGIN',
              userLoggedIn: true
            });

            //works fine
            this.props.setCurrentUserFirstName(response.currentUser.firstName);      

            //doesn't work and throws the error: "TypeError: _this.props.setCurrentUserHandle is not a function"
            this.props.setCurrentUserHandle(response.currentUser.handle);

          }
        },
        (err) => {
          console.log(err);
        });
      }

      render() {
        return (
          

            {this.props.user.currentUserFirstName}, {this.props.user.currentUserHandle}

          

        );
      }

    }

    const mapStateToProps = function(store) {
      return {

             //user properties
             user: store.userState
      };
    };

    const mapDispatchToProps = (dispatch) => {

          return{
            setCurrentUserFirstName: (currentUserFirstName) =>{
              dispatch(  setCurrentUserFirstName(currentUserFirstName));
            }
          }

          return{
            setCurrentUserHandle: (currentUserHandle) =>{
              dispatch(  setCurrentUserHandle(currentUserHandle));
            }
          }     

    };


    //connect it all
    export default connect(mapStateToProps, mapDispatchToProps)(Header);

我将它们作为操作放在useractions.js文件中

    export function  setCurrentUserFirstName(currentUserFirstName){
            return{
                    type:  'SET_CURRENT_USER_FIRST_NAME',
                    payload: currentUserFirstName
            };      
    }


    export function  setCurrentUserHandle(currentUserHandle){
            return{
                    type: 'SET_CURRENT_USER_HANDLE',
                    payload: currentUserHandle
            };      
    }

在减速器中

    const initialUserState = {
      user: {}, 
      currentUserFirstName:[],
      currentUserHandle:[]
    };

    // The User reducer
    const userReducer = (state = initialUserState, action) => {

      //using newState object to be immutable
            let newState = state;

            switch (action.type) {

              case 'SET_CURRENT_USER_FIRST_NAME':
                    newState = {
                      ...state,   
                      currentUserFirstName:  action.payload 
                };
                break;

              case 'SET_CURRENT_USER_HANDLE':
                    newState = {
                      ...state,   
                      currentUserHandle:  action.payload
                };
                break;

                break;

              default:
            break;
      }

      return newState;
    };

    export default userReducer;

我有什么不对的？

Answer 1

除了Tony的正确答案之外，我高度鼓励您改用mapdispatch的“对象速记”形式。您可以将一个充满操作创建者的对象作为第二个参数传递给connect()，而不是一个实际的mapdispatch函数。在你的情况下，它看起来像：

import { setCurrentUserHandle, setCurrentUserFirstName } from '../../actions/userActions';

const actionCreators =  { setCurrentUserHandle, setCurrentUserFirstName };

class Header extends Component {}


export default connect(mapStateToProps, actionCreators)(Header);    

Answer 2

您的mapdispatchtoprops中有两个return语句--第二个语句永远不会到达。您可以返回单个对象，如下所示：

const mapDispatchToProps = (dispatch) => {
      return{
        setCurrentUserFirstName: (currentUserFirstName) =>{
          dispatch(  setCurrentUserFirstName(currentUserFirstName));
        },
        setCurrentUserHandle: (currentUserHandle) =>{
          dispatch(  setCurrentUserHandle(currentUserHandle));
        }
      }  
};