Redux с приглашением: Доступные библиотеки или прослушивание вручную?

Question

Я работаю с React, Redux и React-Router-Dom. Большинство моих существующих сценариев маршрутизации могут быть покрыты тегами <Link /> и <Prompt />. Один сценарий, однако, требует, чтобы я использовал некоторый «код позади» вместо тега <Link /> (Использование ссылки в опции выбора до сих пор не удавалось.)

В этом случае, как мне обработать прослушивание подсказки? Я хочу, чтобы моя отправка (onSelect) не производилась, если пользователь отменяет запрос, но пока я не нашел способа сделать это.

<Link />, кажется, «автоматически» слушает что-то, что соответствует <Prompt />, и я хотел бы знать, что это такое, поэтому я могу слушать аналогичным образом, если не существует библиотеки для обработки этого точный сценарий.

Кроме того, я использую <Redirect />, но не могу понять, как очистить свое состояние поля state.redirectArgs после того, как произошло перенаправление, и у меня возник другой набор проблем.

Обычно, когда я не могу найти сценарий с машиной Google, это указывает на то, что я нарушаю некоторую парадигму в своих шаблонах кодирования, но мне трудно с этим смириться, поэтому любой тип ответа (библиотека, изменение шаблона и т. д.), которые приведут меня к успешному завершению (точке), будут оценены.

Answer 1

Я смог решить эту проблему, используя <Redirect /> и <Prompt />. Ключом было использование жизненного цикла componentDidUpdate() (кажется, что componentDidMount() тоже должно работать, но это не так, по крайней мере, в моем сценарии). Этот хук вызывается после метода render(), который здесь критичен.

class SomeComponent extends React.Component<SomeComponentProps, never> {


    render() {
        // state
        const { redirect } = this.props;

        // dispatch
        const { onSelect } = this.props;

        if (redirect) {
            return <Redirect push to={redirect.path} />
        }

        ... other code, including onSelect which sets redirect ...
    }

    componentDidUpdate() {
        // state
        const { redirect } = this.props;
        // dispatch
        const { cleanupRedirect } = this.props;

        if (redirect) {
            cleanupRedirect();
        }
    }
}

export interface SomeComponentState {
    redirect: { path: string }
}

export interface SomeComponentDispatch {
    cleanupRedirect: () => void
    onSelect: (key: string) => void
}

export type SomeComponentProps = SomeComponentState & SomeComponentDispatch;