Изменения состояния в приложении реакции с mobX - PullRequest
Новая
       19

Изменения состояния в приложении реакции с mobX

0 голосов
/ 11 февраля 2020

Моя задача - показать компонент загрузки, когда данные с сервера еще не поступили. 

export const LoaderComponent = () => (
    <View style={styles.center}>
        <ActivityIndicator size="large" />
    </View>
);

const styles = StyleSheet.create({
    center: {
        .....
    },
});

Я создал файл состояния для отображения загрузочного компонента. 

import { observable, action } from 'mobx';

class LoaderState {
    @observable loading: boolean = true;

    @action showLoader() {
        this.loading = true;
    }

    @action hideLoader() {
        this.loading = false;
    }
}

export default new LoaderState();

При авторизации пользователя я отображаю компонент загрузки, после получения данных с сервера скрываю компонент загрузки. Я сделал искусственную задержку в две секунды. 

class AuthState {
    @observable email: string = '';
    @observable password: string = '';

    @action authentication(data: IAuth) {
        console.log('Action authentication');

        LoaderState.showLoader();

        ....

        setTimeout(() => {
            LoaderState.hideLoader();
            console.log('Change state loader', LoaderState.loading);
        }, 2000);
    }
}

export default new AuthState();

На следующем экране я проверяю, установлен ли флаг загрузки, показываю компонент загрузки и, если нет, скрываю его. 

export const ProvidersScreen = () => {
    console.log(LoaderState.loading);

    if (LoaderState.loading) {
        return <LoaderComponent />;
    }

    return (
        <View>
            ....
        </View>
    );
};

Проблема в том, что загружаемый компонент всегда отображается, а при изменении состояния он не скрывается. Почему компонент загрузки не скрывается?

Ответы [ 2 ]

1 голос
/ 11 февраля 2020

Вы забыли добавить наблюдатель

Добавить следующий код: 

import { observer } from "mobx-react";

export const ProvidersScreen = observer(() => {
    console.log(LoaderState.loading);

    if (LoaderState.loading) {
        return <LoaderComponent />;
    }

    return (
      <View>
         ....
      </View>
    );
});
1 голос
/ 11 февраля 2020

Я думаю, причина в том, что ваш ProvidersScreen не является observer компонентом, поэтому попробуйте: 

export const ProvidersScreen = observer(() => {
    console.log(LoaderState.loading);

    if (LoaderState.loading) {
        return <LoaderComponent />;
    }

    return (
        <View>
            ....
        </View>
    );
});
...