Question

我正在学习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>

    );
  }
}

现在登录一旦我点击登录我正在发送一个动作

return (dispatch)=>{
    fetch('./data.json').then(response=>response.json()).then((data)=>{
        console.log('data'+data)
         history.push('/home')
        return dispatch(loginSuccess());
    })
  }
}

function loginSuccess(){
  return {
    type:'success',
     loginData:''
  }
}

以下是我的减速机

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总是 false ，但状态显示 true 一旦成功登录，因为我能够返回主页，但它会将我重定向回登录页面。

由于

Answer 1

它会将您重定向到/，因为在fetch返回响应之前，路由已经使用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> 
}

修改

使用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登录问题

1 个答案: