HO C React и Redux: невозможно получить доступ к mapStateToProps до инициализации

Question

Я хочу сделать компонент высшего порядка / HOC, завернутый в redux

Я попробовал что-то подобное:

export const Button = connect(mapStateToProps,mapDispatchToProps)(
    () => {
        return(
            <Link 
                to="#" 
                className="btn-enter"
                onClick={() => this.props.handleShare()}>
                Undang Teman
            </Link>
        );
    }); 
const mapStateToProps = (state) => {

}

const mapDispatchToProps = (dispatch) => {
    return {
        handleShare: () => dispatch({type: ActionType.HANDLE_SHARE_MODAL})
    }
}

Но когда я запускаю этот код, я получаю сообщение об ошибке :

ReferenceError: Невозможно получить доступ к mapStateToProps до инициализации

Answer 1

Также, если вам не нужно mapStateToProps, вы можете оставить его как null

// Better to declare component above and then pass it to connect HOC
const ButtonComponent = (props) => {
        return(
            <Link 
                to="#" 
                className="btn-enter"
                // ButtonComponent is a functional component
                // and to you props you get them from params
                onClick={() => props.handleShare()}>
                Undang Teman
            </Link>
        );
    }

const mapDispatchToProps = (dispatch) => {
    return {
        handleShare: () => dispatch({type: ActionType.HANDLE_SHARE_MODAL})
    }
}

export const Button = connect(null, mapDispatchToProps)(ButtonComponent); 

Answer 2

как говорится, вы должны сначала инициализировать функцию для доступа к ней позже, поэтому она должна быть

const mapStateToProps = (state) => {

}

const mapDispatchToProps = (dispatch) => {
    return {
        handleShare: () => dispatch({type: ActionType.HANDLE_SHARE_MODAL})
    }
}

export const Button = connect(mapStateToProps,mapDispatchToProps)(
    () => {
        return(
            <Link 
               to="#" 
               className="btn-enter"
               onClick={() => this.props.handleShare()}>
               Undang Teman
            </Link>
        );
    });