时间戳

首页 > 解决方案 > Redux 使用没有 React 的功能组件

reactjs - Redux 使用没有 React 的功能组件

问题描述

我有一个没有 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 将用户状态传递给该函数，我该如何解决？

标签： reactjstypescriptreduxreact-reduxreact-functional-component

解决方案

这可以通过 React 的Hooks API解决。您的目标是一个自定义钩子，它将在内部使用useSelectorfrom react-redux。如果您不想使用功能组件，您可以随时选择高阶组件(HOC)

代码示例

自定义挂钩

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 引入了比必要的复杂得多的复杂性，如果我没记错的话，这是创建 Hook API 背后的主要驱动力之一。

推荐阅读