1

for Auth Guard in my routing function, I wrapped my component with a HOC function. Something like this

<Route path="/profile" component={withAuth(UserProfileScreen)} />

So I tried to validate authentication in wrapper function for that I need to connect redux with the wrapper function. So I'm trying like this.

function withAuth(ComponentToProtect) {
    return class extends Component {
        constructor() {
            super();
            this.state = {
                loading: true,
                redirect: false,
            };
        }
        async componentDidMount() {
            // logic to check signin
          this.props.manageUserLogin(true)
        }

        render() {
            const { loading, redirect } = this.state;
            if (loading) {
                return null;
            }
            if (redirect) {
                 return <Redirect to="/" />;
            }
            return (
                <React.Fragment>
                    <ComponentToProtect {...this.props} />
                </React.Fragment>
            );
        }
    };
}
const mapStateToProps = (state) => {
    return {
        isUserLoggedIn: state.authR.isUserLoggedIn,\
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        manageUserLogin: (action) =>
            dispatch(
                actionCreators.manageUserLogin(action)
            ),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(withAuth);`

When I connect redux with wrapper function, I'm getting like TypeError: Object(...) is not a function error.

5
  • have you tried named export? Commented Jun 13, 2020 at 17:50
  • yeah, same error. But this error is something like if I connect with redux it made as an object, but the wrapper function export should be another component. that's why I'm getting this error Commented Jun 13, 2020 at 17:56
  • have you tried using compose? can't think of anything else Commented Jun 13, 2020 at 17:59
  • not yet Can u help u with that, Commented Jun 13, 2020 at 18:11
  • try the answer, code was too long for comments Commented Jun 13, 2020 at 18:14

1 Answer 1

1

try this

const withAuthHoc = compose(connect(mapStateToProps, mapDispatchToProps), withAuth);

export default withAuthHoc;
Sign up to request clarification or add additional context in comments.

2 Comments

Just now I tried with this reference, it can solved my issues.medium.com/practo-engineering/…
Thanks Red Baron, this is really help me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.