react-redux - propDypatch로 정의되지 않은 mapDispatchToProps의 소품

Question

저는 지금 몇 시간 동안이 문제를 해결하려고 노력해 왔습니다. 의 소품 authUser이 Authenticate에 필요한 로 표시됩니다 : 실패 소품 유형 :

경고 - : 나는 userActionCreators로 가져

기능이 prop-types 저를주는 오류 메시지입니다 Proptypes.func.isRequired

을 실패 값은 undefined입니다. 내 컨테이너에서

: -

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

인증합니다 구성 요소 : -

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 

사용자 모듈 : - 잘못된에 proptypes을 설정하는 것처럼

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

이 보이는 컨테이너 구성 요소의 객체?

Authenticate.propTypesAuthenticateContainer.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, 
}; 

이 문제를 방지 할 수있는 좋은 방법은 클래스 내부의 정적로 proptypes을 정의하는 것입니다 : 첫 번째 코드에서

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 
}