将 Redux 状态传递给 React 组件时的无限循环

Question

[编辑]

问题不是 isAuth 属性，而是 ProtectedRoute 中重定向组件中的 props.location ！尽管如此，如果您在理解 useSelector 或 mapStateToProps 时遇到问题，请转到@Versifiction 的答案！

[结束编辑]

我有一个 React/Redux 应用，在 authReducer 中有一个 isAuth 属性。我想将它传递给我的 ProtectedRoute 组件以检查行为。

我有这个错误，我确定它与将 isAuth 传递给 ProtectedComponent 相关：

未捕获的错误：超出最大更新深度

我的应用容器

import React, {useEffect, useState} from "react";
import {Router, Route} from 'react-router-dom';
import history from "./constants/history";
import * as ROUTES from './constants/routes';
import ProtectedRoute from "@components/HOC/ProtectedRoute";

import LandingPage from "../domains/Main/LandingPage";
import AdminLandingPage from '@domains/Admin/AdminLandingPage';
import SessionLandingPage from '@domains/Session/SessionLandingPage';
import SignInPage from "../domains/Auth/SignInPage/SignInPage";
import SignUpPage from "../domains/Auth/SignUpPage/SignUpPage";
import PasswordForgetPage from "../domains/Auth/PasswordForgetPage/PasswordForgetPage";
import { useSelector } from 'react-redux'


function AppContainer() {

    const [checkAuth, setCheckAuth] = useState(false);
    const { isAuth } = useSelector(state => state.authReducer);



    return (
        <Router history={history}>
            <ProtectedRoute exact  path={ROUTES.MAIN_LANDING} component={LandingPage}/>
            <Route exact path={ROUTES.SIGN_IN} component={SignInPage}/>
            <ProtectedRoute exact path={ROUTES.ADMIN_LANDING} component={AdminLandingPage}/>
            <ProtectedRoute exact path={ROUTES.SESSION_LANDING} component={SessionLandingPage}/>
        </Router>
    );
}


export default AppContainer;

Console.log 按原意显示值“False”。

仅使用选择器，我就有无限循环错误。

AuthReducer 的状态：

const INITIAL_STATE = {
    loading: false,
    error: '',
    isAuth : false
};

我的 ProtectedRoute 组件

const ProtectedRoute = (
    {
        component: Component,
        isAuth,
        ...rest
    }
) => {
    if(isAuth === null) {
        return 'loading...'
    }
    return (
        <Route
            {...rest}
            render={(props) => {
                return isAuth
                    ?
                    (<Component {...rest} {...props} />) :
                    (<Redirect to={{pathname: '/', state: {from: props.location}}}/>)
            }}
        />

    )
};

export default ProtectedRoute;

Answer 1

我建议你使用 mapStateToProps 将数据从 store 发送到组件的 props，你必须先从 react-redux 包中导入 connect 方法，

然后在 mapStateToProps 函数中，将 props 中的数据名称作为属性 (isAuth)，并将全局存储中的位置作为值 (state.authReducer.isAuth)

import { connect } from "react-redux";

function AppContainer(props) {
    const { isAuth } = props;
    return (
        <Router history={history}>
            <ProtectedRoute exact isAuth={isAuth} path={ROUTES.MAIN_LANDING} component={LandingPage}/>
            <Route exact path={ROUTES.SIGN_IN} component={SignInPage}/>
            <ProtectedRoute exact isAuth={true} path={ROUTES.ADMIN_LANDING} component={AdminLandingPage}/>
            <ProtectedRoute exact isAuth={true} path={ROUTES.SESSION_LANDING} component={SessionLandingPage}/>
        </Router>
    );
}

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

export default connect(mapStateToProps, null)(AppContainer);