реагировать на состояние гонки на роутере

Question

Я реагирую на роутер-дом и редукс.Мой сценарий довольно прост: 1) Если у пользователя нет перенаправления токена для входа в систему 2) В противном случае перейдите на панель инструментов.Проблема в том, что проверка избыточности для токена (в локальном хранилище) приходит немного позже, поэтому, что бы я ни делал, я получаю перенаправление на вход в систему. Это мой

код:

const AsyncAuth = asyncComponent(() => import('containers/Auth/Auth'));
const AsyncDashboard = asyncComponent(() => import('containers/Dashboard/Dashboard'));
interface IProps {
  autoSignIn: () => void;
  isAuthenticated: boolean;
}
class App extends React.Component<IProps, {}> {

  public componentDidMount() {
    this.props.autoSignIn();
  }

  public render() {
    return (
      <div>
        <Switch>
          <Route path="/auth" component={AsyncAuth} />
          {this.props.isAuthenticated && <Route path="/dashboard" component={AsyncDashboard} />}
          <Redirect to="/auth" />
        </Switch>
      </div>
    );
  }
}

const mapStateToProps = (state: any) => ({
  isAuthenticated: state.auth.idToken !== null
});

const mapDispatchToProps = (dispatch: any) => ({
  autoSignIn: () => dispatch(authAutoSignIn())
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

Обычный шаблон при работе с redux-thunk (и стандартными действиями Flux) - иметь свойство requestStatus.

Обычно для HTTP-запроса вы должны иметь NotStarted, 'Initiated', 'Success' и 'Failed'.

Вы можете применить подобный стиль к вашему Redux.

Вы можете иметь свойство authCheckStatus с теми же значениями.

И в компоненте вместо рендеринга роутера вы рендерите что-то еще (ничего, если проверка достаточно быстрая), когда authCheckStatus не Success.

Это было бы отдельно отidToken сама.

Answer 2

Вы не опубликовали избыточный код, но я предполагаю, что ваш autoSignIn создатель действий выполняет асинхронное действие.То, что вы могли бы сделать, это в редукторе для state.auth сохранить некоторое состояние, например triedAutoLogin: false.

Всякий раз, когда ваше действие асинхронного входа в систему разрешается (успешно или неудачно), вы можете обновить triedAutoLogin: true.Затем включите это в ваш mapStateToProps и визуализируйте компонент <Route /> and <Redirect /> на основе обоих.