Question

看图片我的意思

我正在开展一个项目，我从react-redux-starter-kit开始它是使用反应反应路由器react-router-redux redux ...

并且某些页面需要用户登录，所以在route.js 1.我检查用户是否登录，导航到登录页面，如果用户登录成功，则将用户信息保存到存储中 2.如果用户登录但刷新页面，则商店丢失了用户信息，因此我发送操作以重新加载用户信息

全部工作

但是当用户进入仪表板等页面时 tirgger另一个动作，商店中的用户信息将丢失

我不知道为什么

路由器

export default function (store) {
 const requireAuth = (nextState, replace, cb) => {
    function checkAuth () {
      const user = store.getState().user
      if (!user.user_id) {
        replace(__DEV__ ? SiteUrl + 'login' : '/login')
      }
      cb()
    }
    if (!isAuthLoaded(store.getState())) {
      store.dispatch(loadAuth()).then(checkAuth)
    } else {
      checkAuth()
    }
  }
  return (
      <Route path='/'} >
         <IndexRoute component={HomeView} />
        <Route path='setitems' component={SetItemsView} onEnter={requireAuth}/>
        <Route path='404' component={NotFoundView} />
        <Redirect from='*' to='404' />
      </Route>
    )
}

＆＃13;

auth.js

function requestLogin () {
  return {
    type: LOGIN_REQUEST
  }
}
function loginSuccess (user) {
  return {
    type: LOGIN_SUCCESS,
    user
  }
}

function loginError () {
  return {
    type: LOGIN_FAILURE
  }
}

export function isLoaded (globalState) {
  return globalState.user && globalState.user.user_id
}

export function getUserLoad () {
  return function (dispatch) {
    dispatch(requestLogin())
    return getUserAction()
      .then(function (response) {
        var data = response.data
        if (data.msg) {
          dispatch(loginError())
          return {}
        }
        return data.res
      })
      .then(function (user) {
        dispatch(loginSuccess(user))
      })
  }
}

function getUserAction () {
  return axios.get(GetUser)
}

userReducer.js
function user (state = {}, action) {
  switch (action.type) {
    case 'LOGIN_SUCCESS' :
      return action.user
    case 'LOGIN_REQUEST':
      console.log('LOGIN_REQUEST')
      return state
    case 'LOGIN_FAILURE':
      console.log('LOGIN_FAILURE')
      return state
    default:
      return {}
  }
}

export default user

＆＃13;

   dashboard page load items list
function requestItems (setitems) {
  return {
    type: ITEMS_REQUEST,
    items: setitems.items
  }
}
function itemsSuccess (items) {
  return {
    type: ITEMS_SUCCESS,
    items
  }
}
function itemsFailure () {
  return {
    type: ITEMS_FAILURE
  }
}

export function loadItemsAction (page) {
  return function (dispatch, getState) {
    dispatch(requestItems(getState().setitems))
    return axios.get(GetItemsUrl, page)
      .then(function (response) {
        var data = response.data
        return data
      })
      .then(function (data) {
        if (data.msg) {
          dispatch(itemsFailure())
        } else {
          dispatch(itemsSuccess(data.res.items))
        }
      })
  }
}

＆＃13;

Answer 1

问题是减速器：

function user (state = {}, action) {
  switch (action.type) {
    case 'LOGIN_SUCCESS' :
      return action.user
    case 'LOGIN_REQUEST':
      console.log('LOGIN_REQUEST')
      return state
    case 'LOGIN_FAILURE':
      console.log('LOGIN_FAILURE')
      return state
    default:
      return {} // <-- should be return state
  }
}

在任何reducer中，默认返回总是为return state。

反应还原分裂减速剂改变流行状态

1 个答案: