State changes in a react application with mobX

Question

My task is to show the download component when data from the server has not yet arrived.

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

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

I created a state file to display the boot component.

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();

When authorizing the user, I display the download component, after receiving data from the server, I hide the download component. I made an artificial delay of two seconds.

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();

On the next screen, I check if the download flag is set, I show the download component, and if not, I hide it.

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

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

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

The problem is that the download component is always shown and when the state changes, it is not hidden. Why is the download component not hiding?

score 1 · Accepted Answer · answered Feb 11 '20 at 06:39

1

I think the reason is your ProvidersScreen is not an observer component, so try it:

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

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

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

answered Feb 11 '20 at 06:39

Yonggoo Noh

1,811
3
22
37

I get an error in my emulator `typeError: Component is not a function. (in 'Component(props, refOrContext)','Component' is an in instance of Object)` – MegaRoks Feb 11 '20 at 06:48
@MegaRoks Could you explain the situation in detail? It looks like a different problem. – Yonggoo Noh Feb 11 '20 at 06:56
I rebuilt the project and it worked, it solved my problem. Thanks – MegaRoks Feb 11 '20 at 07:03

score 1 · Answer 2 · answered Feb 11 '20 at 06:42

You forgot to add observer

Add below code:

import { observer } from "mobx-react";

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

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

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

State changes in a react application with mobX

2 Answers2