HOC React 和 Redux：初始化前无法访问“mapStateToProps”

Question

I want make higher-order component / HOC wrapped with redux

I tried something like that :

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

But when i run this code i got message error :

ReferenceError: Cannot access 'mapStateToProps' before initialization

Answer 1

as it says you should first initialize function to access it later so it must be

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

Answer 2

Also if you don't need mapStateToProps you can leave it as 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);