Где сохранить следующий путь при перенаправлении на логин в реагирующем маршрутизаторе?

Я использую react-router и react-router-redux, я перенаправлю пользователя на страницу входа, если он попытается посетить страницу, требующую входа в систему без входа в систему:

<Route path="/react/myprofile" component={MyProfile} onEnter={requireAuth} /></Route>


function requireAuth(nextState, replace) {
   const state_user = store.getState().auth.user;
   if (!state_user) {
     console.log('not logged in, redirect')
     replace({
       pathname: '/react/login',
       state: { nextPathname: nextState.location.pathname }
     })
   }
}

И после того, как пользователь войдет в систему, я перенаправлю пользователя на «/react/myprofile»: в моей редукционной саге я делаю следующее:

const route_state = get routing state from the store;
redirectTo(route_state.locationBeforeTransitions.state.nextPathname);

Как и выше, я должен получить информацию из route_state.locationBeforeTransitions.state.nextPathname, она слишком многословна, и это кажется странным.

Интересно, есть ли лучший способ сделать это? Спасибо.


react-router redux-saga react-router-redux
person Luke    schedule 31.07.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете создать селектор для извлечения соответствующей части состояния и использовать его с эффектом select внутри вашей саги.

// for example in some file selectors
export const nextPathSelector = state => ...

// in some sagas.js file
import { nextPathSelector } from './selectors'
import { call, select, ... } from 'redux-saga/effects'

function* saga() {
  ...
  const nextPath = yield select( nextPathSelector )
  yield call(redirectTo, nextPath)
}

Использование селекторов делает ваши саги независимыми от формы состояния. А с помощью эффекта select можно проверить логику саги, не задевая весь магазин. Например

const gen = saga()

assert.deepEqual(
   gen.next().value,
  select( nextPathSelector )
)

assert.deepEqual(
   gen.next('dummy-path').value,
   call(redirectTo, 'dummy-path')
)
person Yassine Elouafi    schedule 05.08.2016