Reactjs React Redux登录问题

我正在学习react和redux，并尝试实现登录

下面是我的路线

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Login from './components/Login/Login'
import Home from './components/Home/Home'
import store from './store/store'
import {Provider}  from 'react-redux';
import history from './history/history';
import {Router,Route,Switch,Redirect} from 'react-router-dom'
import {connect} from 'react-redux'

class App extends Component {
  render() {
    let storelogginState=store.getState();
    let logginState=storelogginState.loginReducer.loggedIn
    console.log('store',logginState)
    return (
      <Router history={history}>
        <div className="App">
          <Provider store={store}>
            <Switch>
                <Route exact path="/" component={Login}/>
                <Route exact path="/home"  render={()=>(
                  this.props.loginReducer.loggedIn?(<Home/>):(<Redirect to="/"/>)
              )  }/>
            </Switch>
          </Provider>
        </div>
      </Router>

    );
  }
}

下面是我的减速机

const initalState={
  loggedIn:false
}
 function loginReducer(state=initalState,action){
  switch (action.type) {
    case 'success':
        return Object.assign({},state,{loggedIn:true});
      break;
    default:
    return  state;

  }

}

所以我的问题是路由器

<Route exact path="/home"  render={()=>(
                  logginState?(<Home/>):(<Redirect to="/"/>)
              )  }/>

(
logginState？（）：（）
)  }/>

logginState总是false，但一旦成功登录，它会显示true，因为我可以返回主页，但它会将我重定向回登录页面

---

谢谢

它将您重定向到

/

，因为在

获取

返回响应之前，路由已经使用

loggedIn:false

触发（顺便说一句，我假设您从状态中正确检索了

loggedIn

）。您需要做的是延迟渲染路由，可能是将另一个值存储在存储中，如：

减速器

const initalState = {
  hasFinishedAuthorization: false,
  loggedIn: false
};
function loginReducer(state = initalState, action) {
  switch (action.type) {
    case "success":
      return Object.assign({}, state, {
        loggedIn: true,
        hasFinishedAuthorization: true
      });
      break;
    default:
      return state;
  }
}

组件

{hasFinishedAuthorization &&
  <Switch>
    <Route 
      exact 
      path="/home"  
      render={()=>(logginState?(<Home/>):(<Redirect to="/"/>)
   )}/>
  </Switch> 
}

{hasFinishedAuthorization&&
（logginState？（）：（）
)}/>
}

编辑：

使用react-redux访问您的状态：

import { connect } from "react-redux";

let MyRoutes = ({ loggedIn }) => (
  <Switch>
    <Route exact path="/" component={Login} />
    <Route
      exact
      path="/home"
      render={() => (loggedIn ? <Home /> : <Redirect to="/" />)}
    />
  </Switch>
);

const mapStateToProps = state => ({
  loggedIn: state.loginReducer.loggedIn
});

MyRoutes = connect(mapStateToProps)(MyRoutes);

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div className="App">
          <Provider store={store}>
            <MyRoutes />
          </Provider>
        </div>
      </Router>
    );
  }
}

从“react redux”导入{connect}；
让MyRoutes=（{loggedIn}）=>(
（loggedIn？：）}
/>
);
常量mapStateToProps=状态=>({
loggedIn:state.loginReducer.loggedIn
});
MyRoutes=connect（MapStateTops）（MyRoutes）；
类应用程序扩展组件{
render（）{
返回(
);
}
}

如果你有一个代码笔或什么的，如果我能帮你的话，那就太好了：）Tomasz，添加另一个变量真的很重要吗。。我的logginState没有更新我已经添加了app.js的完整代码以进行检索logginstate@user3106347显示如何访问

logginState

variable我已经更新了我的问题let storelogginState=store.getState（）；让logginState=storelogginState.loginReducer.logged问题在于，当redux状态更改时，组件不会重新渲染。使用react-redux库。@user3106347查看编辑。顺便说一句，看看你是如何创建redux商店的，我不确定你是否正确访问了你的状态。

import { connect } from "react-redux";

let MyRoutes = ({ loggedIn }) => (
  <Switch>
    <Route exact path="/" component={Login} />
    <Route
      exact
      path="/home"
      render={() => (loggedIn ? <Home /> : <Redirect to="/" />)}
    />
  </Switch>
);

const mapStateToProps = state => ({
  loggedIn: state.loginReducer.loggedIn
});

MyRoutes = connect(mapStateToProps)(MyRoutes);

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div className="App">
          <Provider store={store}>
            <MyRoutes />
          </Provider>
        </div>
      </Router>
    );
  }
}