Я хочу спросить, является ли создание маршрутов доступным только при загруженном состоянии Redux плохой практикой. Я разрабатываю веб-приложение со стеком MERN. Внешний интерфейс - с React и Redux, я использую аутентификацию JWT, я проверяю в приложение. js в методе componentDidMount, если в localStorage есть токен, и если он есть, он отправляет запрос на сервер для проверки токена (я использую sagas для обработки асинхронных вызовов). Вот приложение. js код:
class App extends Component {
componentDidMount(){
console.log('app component');
const token = localStorage.getItem('token');
if(token){
this.props.verifyTokenStart(token);
}else{
this.props.logoutStart();
}
}
render(){
return (
<div className="App">
<Header/>
<Alert/>
<Route exact path="/" component={Home}/>
<Route path="/auth/activate/:token" component={ActivateAccount} />
{!this.props.tokenVerifying && (
<Switch>
<SignedInUserProtectedRoute path="/signup" component={signUp} />
<SignedInUserProtectedRoute path="/signin" component={signIn} />
<AuthRoute path="/user/:id" component={UserComponent}/>
</Switch>
)}
</div>
);
}
}
function mapStateToProps(state){
return {
tokenVerifying : state.user.tokenVerifying
}
}
function mapDispatchToProps(dispatch){
return {
verifyTokenStart : (token) => {dispatch(verifyTokenStart(token))},
logoutStart : () => {dispatch(logoutStart())}
};
}
export default connect(mapStateToProps,mapDispatchToProps)(App);
У меня для переменной tokenVerifying установлено значение true в редукторе, что в основном означает, что при запуске приложения оно начнет проверять токен, если токен есть в localStorage. , если нет, будет вызван метод logoutStart, и для этой переменной будет установлено значение false. VerifyTokenStart, который используется в componentDidMount, - это простой вызов API для сервера с токеном для проверки токена. У меня переменная tokenVerifying имеет значение true в редукторе, что в основном означает, что при запуске приложения он начнет проверять токен, если существует является токеном в localStorage, если не будет вызван метод logoutStart и эта переменная tokenVerifying установлена в значение false. VerifyTokenStart, который используется в componentDidMount, представляет собой простой вызов API для сервера с токеном для проверки токена. Вот код, в основном, если токен хорош, он обновит состояние и загрузит пользователя в редуктор, он использует sagas, как я уже говорил:
function* verifyToken(payload){
const token = payload.payload;
try{
const {data} = yield call(api.verifyToken,{token});
console.log(data);
const {user} = data.data;
yield put(verifyTokenSuccess(user));
}catch(error){
console.log(error.response.data.message);
localStorage.removeItem('token');
yield put(verifyTokenError(error.response.data.message));
}
}
function* onTokenVerify(){
yield takeLatest(UserActionTypes.VERIFY_TOKEN_START,verifyToken);
}
Я не буду показывать код редуктора, это стандарт вызовите сервер и верните пользователя и токен, если все в порядке. Возвращаясь к моему вопросу, я делаю это условно, чтобы проверить, загружено ли состояние, потому что, если я не делаю это, когда к моему UserComponent обращаются, набирая непосредственно URL в браузере, например: http://localhost: 3000 / user / dobromir , выдает исключение, потому что пользовательское состояние еще не загружено в Redux. Итак, мой вопрос, является ли это плохой практикой, я должен просто проверить в UserComponent, например, если this.props.user!==null
, а затем реализовать какой-либо лог c, или я могу сохранить код таким образом?