问题描述
我有一个使用react和redux构建的简单的“ post-like”应用程序。用户登录后，他应该看到一个导航栏，而当用户未登录时，他应该看到另一个导航栏。
我正在使用redux-devtools来跟踪状态变化。
问题是，当我登录时，我设置了本地存储令牌，而当我注销时，我将该令牌设置为null。这种方法很好用，当我单击注销时，在redux devtools中看到令牌null和user_authenticated为假，但是当我返回首页或单击浏览器后退按钮时，它恢复为login状态，然后我可以看到令牌值和is_authenticated设置为true。
刷新页面时，我得到用户退出的期望行为，令牌设置为null，is_authenticated设置为false。
奇怪的是，如果我执行console.log(store.getState())，我在那里获得了更新/预期状态，但是devtools显示了先前的状态，页面甚至表现得像先前的状态。
登录时也是如此，在导航中来回导航使我获得了第一次访问该页面时的旧状态。
退出首页后，从我的redux-devtools中状态。
user: {
is_authenticated: true,token: 'c80c632a6529b79d51fd3e2fc915cfb94834aa5237b4e65924c095ea58f289b3',is_loading: false
},退出注销后从同一页面上store.getState()的状态
user:
is_authenticated: false
is_loading: false
token: "null"
下面列出了我的一些组件：
routes.js
import { Switch,Route } from 'react-router-dom';
import React,{Component} from 'react';
import Homepage from './components/homepage';
import Scammer from './components/scammer';
import ScammerCreate from './components/scammer_create'
import Navbar from './components/navbar'
import Register from './components/register'
import Login from './components/login'
import logout from './components/logout'
import {store} from './index'
class Routes extends Component {
componentwillMount() {
store.dispatch({
type: 'get_user',})
store.getState()
}
render(){
return(
<div>
<Navbar />
<Switch>
<Route path="/" exact component={Homepage}/>
<Route path="/scammer/create" exact component={ScammerCreate}></Route>
<Route path="/scammer/:id" exact component={Scammer}/>
<Route path="/auth/register" exact component={Register}></Route>
<Route path="/auth/login" exact component={Login}></Route>
<Route path="/auth/logout" exact component={logout}></Route>
</Switch>
</div>
)
}
}
export default Routes;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { browserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore,applyMiddleware,compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import promiseMiddleware from 'redux-promise';
import thunkMiddleware from 'redux-thunk'
import Routes from './routes'
import rootReducer from './reducers/index';
//const createStoreWithMiddleware = applyMiddleware(promiseMiddleware)(createStore)
const middleware = [promiseMiddleware,thunkMiddleware]
export const store = createStore(
rootReducer,composeWithDevTools(applyMiddleware(...middleware))
)
ReactDOM.render(
<Provider store={store}>
<browserRouter>
<Routes/>
</browserRouter>
</Provider>,document.getElementById('root'));
user_reducer
let initialState = {
}
if (localStorage.getItem('token') != null && localStorage.getItem('token') != 'null'){
initialState['is_authenticated'] = true;
initialState['token'] = localStorage.getItem('token');
initialState['is_loading'] = false;
}
else{
initialState ={
'is_authenticated' : false,'token' : localStorage.getItem('token'),'is_loading' : false,}
}
export default function user(state=initialState,action){
if (action.type == "registered") {
localStorage.setItem('token',action.payload.token);
return {...state,'user_details': action.payload.user,'token':localStorage.getItem('token'),'is_authenticated':true,'is_loading':false}
}
else if ( action.type == "login" ){
console.log(action.payload)
localStorage.setItem('token',action.payload.token)
return {
...state,'is_authenticated' : true,'user_details' : action.payload.user,}
}
else if( action.type == "logout" ){
localStorage.setItem("token",null);
return {
...state,'is_authenticated' : false,'is_loading' : false
}
}
else if(action.type == 'get_user'){
const token = localStorage.getItem('token');
console.log(token)
if (token != null && token != 'null'){
return {
...state,token : token,is_loading : false,}
}
else {
return {
...state,is_authenticated : false,token: token,}
}
}
else{
return initialState;
}
}
解决方法
好的，因此，经过几天的调试，并从头到尾完成了redux教程，但仍然失败。
我终于意识到我正在返回initialState进行默认操作。因此，无论何时加载新组件，它都会获得initialState而不是更新状态。