Маршруты доступны только после загрузки состояния Redux, это плохая практика? - PullRequest
0 голосов
/ 18 марта 2020

Я хочу спросить, является ли создание маршрутов доступным только при загруженном состоянии 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, или я могу сохранить код таким образом?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...