在 reactjs 中的 HOC 中使用 redux state

Question

在我的 React 应用程序中，我有一个 withAuth HOC，它会在加载包装组件之前检查用户是否经过身份验证。如果 isAuth 为真，它会查找 redux 存储以检查身份验证状态并加载组件。但是，我无法从 HOC 访问 redux store。当我尝试时，我在浏览器上收到以下错误消息。非常感谢任何解决此问题的帮助。

withAuth.js

import React, { useState, useEffect } from 'react';
import { setAuth } from '../actions/Actions';
import { connect } from 'react-redux';

function withAuth(WrappedComponent) {
    return (props) => {
        const [isAuth, setAuth] = useState(false);

        useEffect(() => {
            if (props.isAuth) {
                setAuth(true);
            } else {
                props.history.push('/catalog');
            }
        }, [props.history]);

    return isAuth ? <WrappedComponent {...props} /> : <p>Loading..</p>
    };
}

const mapStateToProps = (state) => {
    return {
        isAuth: state.isAuth,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setAuth: (status) => dispatch(setAuth(status)),
    };
};

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

Answer 1

不能通过HOC来连接，必须通过函数组件：

export default function withAuth(WrappedComponent) {
  const Component = (props) => {
    const [isAuth, setAuth] = useState(false);

    useEffect(() => {
      if (props.isAuth) {
        setAuth(true);
      } else {
        props.history.push('/catalog');
      }
    }, [props.history, props.isAuth]);//forgot dependency here

    return isAuth ? (
      <WrappedComponent {...props} />
    ) : (
      <p>Loading..</p>
    );
  };
  const mapStateToProps = (state) => {
    return {
      isAuth: state.isAuth,
    };
  };

  const mapDispatchToProps = (dispatch) => {
    return {
      setAuth: (status) => dispatch(setAuth(status)),
    };
  };

  return connect(
    mapStateToProps,
    mapDispatchToProps
  )(Component);
}

在 reactjs 中的 HOC 中使用 redux state

Using redux state inside HOC in reactjs

reactjs

redux

higher-order-components