Redux - mapDispatchToProps - Ошибка типа: _this.props.setCurrentUserHandle не является функцией

Question

Я пытаюсь заставить работать простое приложение Reaction-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

В дополнение к правильному ответу Тони, я настоятельно рекомендую вместо этого использовать форму «Сокращения объектов» 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 есть 2 оператора возврата - второе никогда не будет достигнуто.Вы можете вернуть один объект следующим образом:

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