Global state in React Native in first load of the App

Question

so im trying to make a App that loads all the thing in the loading screen/splash/auth screen.

So I in the basic I have a Welcome, Login and Home screen for now. Welcome will be showing if the App is open for first time, Login if the user is opening the App without login or is logged out before closing the App and Home will be open if the user is logged in.

Here is the simply check:

componentDidMount() {
        AsyncStorage.getItem("alreadyLaunched").then(value => {
            if (value == null) {
                AsyncStorage.setItem('alreadyLaunched', 'true'); // No need to wait for `setItem` to finish, although you might want to handle errors
                this.setState({ firstLaunch: 'true' });
            }
            else {
                this.setState({ firstLaunch: 'false' });
            }
        })
    }

    loadApp = async () => {
        const userToken = await AsyncStorage.getItem('userToken')
        setTimeout(
            () => {
                if (this.state.firstLaunch == 'true') {
                    this.props.navigation.navigate('Welcome')
                } else {
                    if (userToken) {
                        this.props.navigation.navigate('App')
                    } else {
                    this.props.navigation.navigate('SignIn')
                    }
                }
            }, 0
        );
    }

And if the login is correct I just put this on Async: AsyncStorage.setItem("userToken", "logged");

This for now its working perfectly, but I need to get 3-4 for functions to get information to the server then State It. Here is one of the functions:

getSignalsCount = async (username, password) => {
    try {
      var DeviceInfo = require('react-native-device-info');
      //AUTH
      fetch(Config.SERVER_URL + '/mob/auth', {
        method: 'POST',
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          code: "1",
          id: "",
          sessId: "",
          data: {
            u: username,
            p: password,
          }
        })
      }).then((response) => response.json())
        .then((res) => {
          let res_code = res['code'];
          let session = "";
          let cl_id = 0;
          let name = "";
          if (res_code == 51) {
            session = res['session'];
            cl_id = res["data"]["response"]["client_id"];
            name = res["data"]["response"]["name"];
            this.setState({fullName:name});
            //GET STATS
            fetch(Config.SERVER_URL + '/mob/sport/getSignalsInfo', { //home
              method: 'POST',
              headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                code: "9",
                sessId: session,
                data: {
                  devId: '1234567890',
                  devName: DeviceInfo.getUniqueID(),
                  u: username,
                  client_id: cl_id,
                  type: {
                    nums: 50000,
                    period: 12
                  }
                }
              })
            }).then((response) => response.json())
              .then((res) => {
                var closed = res["data"]["response"]["data"]["closed"];
                var opened = res["data"]["response"]["data"]["open"];
                this.setState({ total_active_signals: opened, total_closed_signals: closed })
              })
              .done();
          }
        })
        .done()
    }
  };

So if set this function on the Auth.js and then use it on the same screen with {this.state.total_active_signals} will show me the varible.

But I need it to be show also on HOME or maybe LOGIN and other pages that I may created in future. So I basic need this state to be use on maybe every screen.

I tried to create a global.js with:

module.exports = {
    username: '',
 };

And then in HOME:

//.....
import global from '../../global'
//....
<Text>Username: {GLOBAL.username}</Text>

But the question now is how to fill the global.js with the state so that, Home/Login/Profile/Stuff screens to get it later.

Thanks!

Answer 1

You basically have two options:

1. Use Redux and create an app wide state (store) to which all components have access to (recommended). Your idea of a global state fits pretty good with the concept of redux.
2. Pass data as props between components. You can also use a navigation library to deal with this (e.g. react navigation or react native router flux)