反应 redux split reducer 改变 prev 状态

Question

看图就是我的意思

我正在做一个项目，我从 react-redux-starter-kit 开始它是使用 react react-router react-router-redux redux ...

有些页面需要用户登录，所以在 route.js 1.如果没有登录我检查用户，导航到登录页面，如果用户登录成功将用户信息保存到存储
2. 如果用户登录但刷新页面，商店丢失了用户信息，所以我发送一个动作来重新加载用户信息

一切正常

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

我不知道为什么

路由器

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>
    )
}

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

   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))
        }
      })
  }
}

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必须总是是return state。

反应 redux split reducer 改变 prev 状态

react redux split reducer change prev state

reactjs

react-router

redux