Правильно ли использовать window.location.reload с React?

Question

Когда вы открываете actjs.org в заголовке «Декларативное», появляется предложение: React будет эффективно обновлять и отображать только нужные компоненты при изменении ваших данных.

Для нескольких моих приложений я использую следующую структуру: App |AppContainer (вся логика приложения, защищенная до входа в систему) |Вход (Форма входа)

Эта структура хорошо работает, если вы возвращаете 2 различных компонента внутри приложения render в соответствии с учетными данными пользователя.

render(){
   if(isUserLoggedIn()){
       return <AppContainer />;
   }

   return <Login />;
}

Внутри компонента Login яЯ обновляю страницу с помощью window.location.reload, поэтому приложение render будет запущено, и я получу компонент AppContainer.

Но это немного похоже на jQuery + Angular. Есть ли лучший (более эффективный) способ запуска функции рендеринга, или так должно быть?

Answer 1

Есть ли лучший (больше React) способ вызвать функцию рендеринга ...

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

В вашем случае, поскольку вы используете Redux, у вас, вероятно, будет там ваше состояние.

Я не использую Redux (пока?), Этосмутно, как бы это выглядело, примерно (если вы используете компонент класса таким, каким вы его представляете):

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loggedIn: /*...initial value, perhaps from web storage or cookie...*/;
        };
        this.onLogin = this.onLogin.bind(this);
        this.onLogout = this.onLogout.bind(this);
    }

    onLogin() {
        // ...probably stuff here, then:
        this.setState({loggedIn: true});
    }

    onLogout() {
        // ...probably stuff here, then:
        this.setState({loggedIn: false});
    }

    render() {
        if (this.state.logedIn) {
            return <AppComponent onLogout={this.onLogout}/>;
        }
        return <Login onLogin={this.onLogin}/>;
    }
}

или с крючками:

const App = () => {
    const [loggedIn, setLoggedIn] = useState(/*...initial value, perhaps from web storage or cookie...*/);

    const onLogin = useCallback(() => {
        // ...probably stuff here, then:
        setLoggedIn(true);
    }, [loggedIn]);

    const onLogout = useCallback(() => {
        // ...probably stuff here, then:
        setLoggedIn(false);
    }, [loggedIn]);

    if (this.state.logedIn) {
        return <AppComponent onLogout={onLogout}/>;
    }
    return <Login onLogin={onLogin}/>;
}

(опять же,примерно)

Answer 2

Если вам нужно обновить состояние компонента, вы можете передать наблюдаемое и прослушать изменения или использовать некоторую библиотеку управления состоянием.

Вот одно из возможных решений:

1. Создать наблюдаемый класс

declare type IObserverHandler = (event: any) => void;
export class Observable {
    private observers: IObserverHandler[] = [];

    public subscribe(observer: IObserverHandler) {
        if (!this.observers.includes(observer)) {
            this.observers.push(observer);
        }
    }
    public unsubscribe(observer: IObserverHandler) {
        this.observers = this.observers.filter(o => o !== observer);
    }
    public publish(event: any) {
        for (const observer of this.observers) {
            observer(event);
        }
    }
}

Создать класс Login, который будет публиковать события для таких действий, как вход или выход из системы

class Login extends Observable {

    public login() {
        this.publish({ value: true });
    }

    public logout() {
        this.publish({ value: false });
    }
}

В компоненте подписаться на наблюдателя и обновить состояние компонента, используя значение события

export abstract class Component extends React.Component<any, any> {
    private observer: IObserverHandler;
    private observable: Login;

    constructor(props: any) {
        super(props);
        this.observable = this.props.observable;
        this.state = { isAuthenticated: false }

        this.observer = (event) => {
            this.setState({ isAuthenticated: event.value })
        }
        this.observable.subscribe(this.observer);
    }

    componentWillUnmount() {
        this.observable.unsubscribe(this.observer);
    }
}