HOC React 和 Redux：初始化前無法訪問“mapStateToProps”

Question

我想制作用redux包裹的高階組件/ HOC

我試過這樣的事情：

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

正如它所說，您應該首先初始化函數以稍后訪問它，因此它必須是

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

此外，如果您不需要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);