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

mapDispatchToProps中有2个返回语句 - 永远不会达到第二个。您可以按如下方式返回单个对象：

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

Answer 2

除了Tony的正确答案之外，我强烈建议您使用＆＃34;对象速记＆＃34;改为mapDispatch的形式。您可以将一个充满动作创建者的对象作为第二个参数传递给connect()，而不是实际的mapDispatch函数。在您的情况下，它看起来像：

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

const actionCreators =  { setCurrentUserHandle, setCurrentUserFirstName };

class Header extends Component {}


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

Redux - mapDispatchToProps - TypeError：_this.props.setCurrentUserHandle不是函数

2 个答案: