Как отрефакторить условный рендеринг React с большим количеством if?

Question

[Pumba8897]

Всем привет!
Есть небольшое приложение на React (пошаговая форма). Шаги лежат на разных урлах. И для восстановления после перезагрузки, а так же для обработки дополнительной логики(например редирект юзера на нужный шаг если он не загрузил документ) было написано довольно большое количество условий в том числе вложенных. Выглядит это по понятным причинам не очень лицеприятно. Как можно поудобнее переписать все это "добро"? Может кто то сталкивался. Что если всю эту логику перенести в react-router-redux или в redux-saga-router ?
Заранее спасибо!

Comments

[WbICHA]

Что если всю эту логику перенести в react-router-redux или в redux-saga-router ?

Да.

Или ты ожидаешь внятный ответ без кода?

[Alex]

Почитайте правила сайта.

[Pumba8897]

WbICHA, ну если Вам это поможет
(Псевдокод)

const handlePopstateEvent = () => {
        if (data) {
            if (abv) {
                history.push(`/attorney?id=${orderId}`);
                dispatch(t);
            }
            if (order && isClientOwner) {
                if (window.location.pathname === '/form-email') {
                    history.goBack();
                }
            }
        }
        if (!ogrn) {
            dispatch(changeCompany({ company }));
        }
    };

    window.onpopstate = handlePopstateEvent;

    if (!order && esiaRequired === undefined) {
        return <Loader />;
    }
    if (order?.error) {
        return <ApiError />;
    }
    if (order.status === 'IN_PROGRESS' || order?.status === 'NEW') {
        history.push(`/order-prepearing`);
    }
    if (order.esiaRequired) {
        if (
            window.location.pathname === '/form-email' &&
            order.companyJson &&
            profile?.esiaVerified &&
            !localStorage.getItem('attorneyDate') &&
            !order.isClientOwner
        ) {
            history.push(`/attorney`);
        }
    }
    if (order.state === 'paid') {
        history.push(`/order-paid?id=${order?.id}`);
    }
    if (localStorage.getItem('goToIdentification')) {
        localStorage.removeItem('goToIdentification');
        history.push(`/identification?id=${order?.id}`);
    }

    return (
         <Route .../>
         <Route .../>
         <Route .../>
    )

по описанию думал и так понятно, что к чему. Тут же вопрос скорее архитектурный, а не конкретного куска кода. Возможно есть какой то подход общепринятый. Гугление не помогло(

[dmitry-toster]

Pumba8897 а где у вас прописывается вся эта логика, в каком-то общем компоненте? по хорошему у вас для каждого шага должен быть отдельный компонент, который будет прописан в роутах каждому урлу и в этом каждом компоненте должна быть проверка, что если каких-то данных не достает, то редиректить на предыдущий шаг.