Redux 身份验证不使用更新的道具？

Question

privateRoute.js

import React, { Component } from "react";

import { BrowserRouter, Route, Switch, Redirect, withRouter} from "react-router-dom";
import { connect } from "react-redux";

function AuthRoute({ component: Component, isAuth, ...rest }) {
  console.log(isAuth);
  let test = false;
  return (
    <Route
      {...rest}
      render={props =>
        isAuth.isAuthenticated === true ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

const mapStateToProps = state => {
  {
    console.log(state);
    return { isAuth: state.auth.isAuthenticated };
  }
};

export default withRouter(connect(mapStateToProps, { pure: false })(AuthRoute));

App.js

import React, { Component } from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import { library } from "@fortawesome/fontawesome-svg-core";
import PropTypes from "prop-types";
import {
  faHome,
  faClock,
  faTasks,
  faStickyNote,
  faCalendarWeek
} from "@fortawesome/free-solid-svg-icons";

import { connect } from "react-redux";
import { loadUser, checkAuth } from "./actions/authActions";
import store from "./store";

import Home from "./Home";
import SideNav from "./Components/SideNav";
import Recent from "./Components/Recent";
import TopBar from "./Components/TopBar";
import AddNote from "./AddNote";
import LogIn from "./Components/LogIn/LogIn.js";
import Register from "./Components/Register/Register";
import ToDo from "./Components/ToDo/ToDo";
import AuthRoute from "./privateRoute";

library.add(faHome, faClock, faTasks, faStickyNote, faCalendarWeek);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthenticated: false
    };
  }

  static propTypes = {
    isAuthenticated: PropTypes.bool
  };

  componentDidMount() {
    store.dispatch(loadUser());
    //  this.props.isAuthenticated();
  }

  LogInContainer = () => {
    return <Route path="/login" component={LogIn} />;
  };

  RegisterContainer = () => {
    return <Route path="/register" component={Register} />;
  };

  DefaultContainer = () => {
    return (
      <div className="app_container">
        <SideNav />
        <TopBar />
        <Route exact path="/" component={Home} />
        <Route path="/recent" component={Recent} />
        <Route path="/AddNote" component={AddNote} />
        <Route path="/ToDo" component={ToDo} />
      </div>
    );
  };

  render() {
    return (
      <div>
        <h1> {this.props.auth.isAuthenticated.toString()}</h1>
        <BrowserRouter>
          <Switch>
            <Route exact path="/login" component={this.LogInContainer} />
            <Route exact path="/register" component={this.RegisterContainer} />
            <AuthRoute component={this.DefaultContainer} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return { auth: state.auth };
};

export default connect(mapStateToProps)(App);

当用户登录时，将发送一个动作来验证用户。在 redux 开发工具中，我可以看到用户已通过身份验证。

在 privateRoute.js 中，mapStateToProps 总是匹配初始状态而不是更新状态，所以 isAuth 永远不等于 true，我不能显示受保护的路由？

我已经坚持了好几天了，我觉得我在执行这个错误但是查看其他示例我看不出我做错了什么。

Answer 1

问题在于您如何将状态映射到道具。看起来您的商店状态的结构为{ auth: { isAuthenticated: boolean } }。然而，在到 props 的私有路由映射状态下，您正试图有效地访问 auth.isAuthenticated.isAuthenticated，这将始终是错误/未定义的。将状态映射到道具时，您需要在状态结构中更上一层楼。尝试将私有路由组件更新为：

import React, { Component } from "react";

import { BrowserRouter, Route, Switch, Redirect, withRouter } from "react-router-dom";
import { connect } from "react-redux";

function AuthRoute({ component: Component, isAuth, ...rest }) {
  console.log(isAuth);
  let test = false;
  return (
    <Route
      {...rest}
      render={props =>
        isAuth.isAuthenticated === true ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

const mapStateToProps = state => {
  {
    console.log(state);
    return { isAuth: state.auth }; // change this line
  }
};

export default withRouter(connect(mapStateToProps)(AuthRoute));