Question

我有一个没有React的功能组件，但它使用Redux如下：

export const isAuthenticated = () => ({user}) => {
    console.log("user : ", user);
    return true;
};

const mapStateToProps = (state) => {
    return {
        user: state.auth.userInfo
    }
}

export default connect(mapStateToProps)(isAuthenticated as any)

要使用上面的功能，我使用：

{isAuthenticated() && (
                        <li className="nav-item">
                            <NavLink
                                className="nav-link"
                                activeStyle={{
                                    color: "#1ebba3"
                                }}
                                to="/dashboard"
                                onClick={(e) => { if (this.menu.classList.contains("show")) { this.inputElement.click() } }}
                            >
                                Dashboard
                            </NavLink>
                        </li>
                    )}

它不起作用。它甚至没有进入isAuthenticated函数，因为我没有看到console.log("user : ", user);的任何输出。它应该输出类似user: undefined的内容，但什至不输出。

如果我改变

export const isAuthenticated = () => ({user}) => {

到

export const isAuthenticated = ({user}) => {

那么问题是我不能用isAuthenticated()来调用它，并且可能是函数调用传递的参数与Redux检索状态之间的重复。

如果我想继续使用“ isAuthenticated()”来调用该方法而不传递任何参数，而是让Redux将用户状态传递给该函数，该如何解决？

Answer 1

这可以通过 React 的 Hooks API 解决。您的目标是在内部使用来自 react-redux 的 useSelector 的自定义钩子。如果您不想使用功能组件，您可以随时选择 Higher-Order Components (HOCs)

代码示例

自定义挂钩

import { useSelector } from 'react-redux';

export function useIsAuthenticated() {
    return useSelector(state => !!state.auth.userInfo);
}

export function YourComponent(props) {
    const isAuthenticated = useIsAuthenticate();

    // Return your react sub-tree here based on `isAuthenticated`
    // instead of `isAuthenticated()` like before.
}

高阶组件

import { connect } from 'react-redux';

export function withIsAuthenticated(Component) {
    function mapStateToProps(state) {
        return {
            isAuthenticated: !!state.auth.userInfo
        };
    }

    return connect(mapStateToProps)(function({ isAuthenticated, ...props }) {
        return <Component isAuthenticated={isAuthenticated} {...props}/>;
    });
}

export function YourComponent({ isAuthenticated, ...props }) {
    // Return your react sub-tree here based on `isAuthenticated`
    // instead of `isAuthenticated()` like before.
}

意见

就我个人而言，我觉得 HOC 带来了不必要的复杂性，如果我没记错的话，这是创建 Hooks API 背后的主要驱动因素之一。

使用不带React的功能组件进行Redux

1 个答案:

代码示例

自定义挂钩

高阶组件

意见