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

Question

[编辑]

问题不在于isAuth属性，而在于ProtectedRoad中重定向组件中的props.location！尽管如此，如果你有一个问题来理解use Selector或mapStateToProps，去@Versifici的答案！

[结束编辑]

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

我有这个错误，我确信它与传递isAuth到ProtectedComponent有关：

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

我的AppContainer

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
};

我的保护路由组件

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将数据从存储区发送到组件的道具，您必须首先从react redux包导入connect方法，

然后在MapStateTops函数中，将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);