react-redux - les accessoires de mapDispatchToProps undefined avec PropTypes

Question

J'ai essayé de résoudre celui-ci pendant quelques heures maintenant.

Fonctions I importation comme userActionCreators ne parviennent pas Proptypes.func.isRequired

Ceci est le message d'erreur prop-types me donne: -

Attention: Type prop échoué: L'accessoire authUser est marqué comme nécessaire dans Authenticate, mais sa valeur est undefined.

Dans mon conteneur: -

import React from 'react' 
import PropTypes from 'prop-types'; 
import {Authenticate} from '_components/' 
import auth from '_helpers/auth' 
import { connect } from 'react-redux' 
import * as userActionCreators from '_redux/modules/users' 
import { bindActionCreators } from 'redux' 

class AuthenticateContainer extends React.Component { 

    render() { 

const handleAuth =() => { 

    this.props.fetchingUser() 
    auth().then((user) => { 
    this.props.fetchingUserSuccess(user.uid, user, Date.now()) 
    this.props.authUser(user.id) 
    }) 
    .catch((error) => this.props.fetchingUserFailure(error)) 
} 

    return (
     <Authenticate 
     isFetching={this.props.isFetching} 
     error={this.props.error} 
     onAuth={handleAuth} 
     /> 
    ); 
    } 
} 

Authenticate.propTypes = { 
    error: PropTypes.string.isRequired, 
    isFetching: PropTypes.bool.isRequired, 
    authUser: PropTypes.func.isRequired, 
    fetchingUser: PropTypes.func.isRequired, 
    fetchingUserFailure: PropTypes.func.isRequired, 
    fetchingUserSuccess: PropTypes.func.isRequired, 
}; 

const mapStateToProps = (state) => { 
    return { 
    isFetching: state.isFetching, 
    error: state.error 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators(userActionCreators, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps) (AuthenticateContainer); 

composant Authentifier: -

import React from 'react' 
import PropTypes from 'prop-types'; 
import {FacebookAuthButton} from '_components/' 

const Authenticate = ({error = 'this is an error', isFetching, onAuth}) => { 
    return(
    <div className='centeredContainer'> 
     <h1 className='largeHeader'> 
     {'Authenticate'} 
     </h1> 
     <FacebookAuthButton isFetching={isFetching} onAuth={onAuth}/> 
     {error ? <p className='errorMsg' >{error}</p> : null} 
    </div> 
) 
} 

Authenticate.propTypes = { 
    error: PropTypes.string.isRequired, 
    isFetching: PropTypes.bool.isRequired, 
    onAuth: PropTypes.func.isRequired 
}; 

export default Authenticate 

module utilisateurs: -

const AUTH_USER = 'AUTH_USER' 
const UNAUTH_USER = 'UNAUTH_USER' 
const FETCHING_USER = 'FETCHING_USER' 
const FETCHING_USER_FAILURE = 'FETCHING_USER_FAILURE' 
const FETCHING_USER_SUCCESS = 'FETCHING_USER_SUCCESS' 

export const authUser = (uid) => { 
    return { 
    type: AUTH_USER, 
    uid 
    } 
} 

const unAuthUser =() => { 
    return { 
    type: UNAUTH_USER 
    } 
} 

export const fetchingUser =() => { 
    return { 
    type: FETCHING_USER 
    } 
} 

export const fetchingUserFailure = (error) => { 
    return { 
    type: FETCHING_USER_FAILURE, 
    error: 'Error fetching user.' 
    } 
} 

export const fetchingUserSuccess = (uid, user, timestamp) => { 
    return { 
    type: FETCHING_USER_SUCCESS, 
    uid, 
    user, 
    timestamp, 
    } 
} 

// Reducers 

const initialUserState = { 
    lastUpdated: 0, 
    info: { 
    name: '', 
    uid: '', 
    avatar: '', 
    }, 
} 

const user = (state = initialUserState, action) => { 
    switch (action.type) { 
    case FETCHING_USER_SUCCESS : 
     return { 
     ...state, 
     info: action.user, 
     lastUpdated: action.timestamp, 
     } 
    default : 
     return state 
    } 
} 

const initialState = { 
    isFetching: false, 
    error: '', 
    isAuthed: false, 
    authedId: '', 
} 

export const users = (state = initialState, action) => { 
    switch (action.type) { 
    case AUTH_USER : 
     return { 
     ...state, 
     isAuthed: true, 
     authedId: action.uid, 
     } 
    case UNAUTH_USER : 
     return { 
     ...state, 
     isAuthed: false, 
     authedId: '', 
     } 
    case FETCHING_USER: 
     return { 
     ...state, 
     isFetching: true, 
     } 
    case FETCHING_USER_FAILURE: 
     return { 
     ...state, 
     isFetching: false, 
     error: action.error, 
     } 
    case FETCHING_USER_SUCCESS: 
     return action.user === null 
     ? { 
      ...state, 
      isFetching: false, 
      error: '', 
     } 
     : { 
      ...state, 
      isFetching: false, 
      error: '', 
      [action.uid]: user(state[action.uid], action), 
     } 
    default : 
     return state 
    } 
} 

Answer 1

On dirait que vous configurez proptypes du mauvais objet dans le composant de conteneur?

Authenticate.propTypes devrait être AuthenticateContainer.propTypes:

AuthenticateContainer.propTypes = { 
    error: PropTypes.string.isRequired, 
    isFetching: PropTypes.bool.isRequired, 
    authUser: PropTypes.func.isRequired, 
    fetchingUser: PropTypes.func.isRequired, 
    fetchingUserFailure: PropTypes.func.isRequired, 
    fetchingUserSuccess: PropTypes.func.isRequired, 
}; 

une belle façon d'éviter ce problème est de définir vos proptypes comme statique dans la classe:

class AuthenticateContainer extends React.Component { 

    static propTypes = { 
    error: PropTypes.string.isRequired, 
    isFetching: PropTypes.bool.isRequired, 
    authUser: PropTypes.func.isRequired, 
    fetchingUser: PropTypes.func.isRequired, 
    fetchingUserFailure: PropTypes.func.isRequired, 
    fetchingUserSuccess: PropTypes.func.isRequired 
    }; 

    // ...etc 
}