React Redux登录问题
React Redux登录问题
提问于 2018-05-31 16:06:25
我正在学习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总是假，但在状态它显示真一旦成功登录，因为我能够去主页，但它将我重定向回登录页面。
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-31 17:39:56
它将您重定向到/，因为在fetch返回响应之前，路由已经使用loggedIn: false触发(顺便说一句，我假设您正确地从状态中检索到了loggedIn )。您需要做的是延迟呈现路由，可能是通过将另一个值存储在存储中，例如：
reducer
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>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50619579
复制相关文章
相似问题
腾讯云开发者
