useSelector returns an undefined, but I'm not able to access to the value

Question

I'm programming this simple app in react native, but when I try to make the axios request I'm not able to concatenate the url and the "user" and "repo" const taken from the store.

console.log(apiurl) gives me "https://api.github.com/repos/undefined/undefined"

but if I type console.log(user) it gives me the actual value of user const.

How can I access create the axios request using user and repo const?

import {
  View,
  Text,
  StyleSheet
} from 'react-native';
import { useSelector, useDispatch} from 'react-redux';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import axios from 'axios';
import setResponse from '../actions';
import NetInfo from "@react-native-community/netinfo";


export default function homeScreen() {

  const apiurl = 'https://api.github.com/repos/' + user + '/' + repo;
  const user = useSelector(state => state.user);
  const repo = useSelector(state => state.repo);
  const response = useSelector(state => state.response)
  const navigation = useNavigation();
  const dispatch = useDispatch();

  const [state, setState] = useState({
      color: "",
      isConnected: true,
  });

  const check = () => {
      console.log(user);
      console.log(repo);
      console.log(apiurl);
      axios.get('https://api.github.com/repos/'+ user+ '/' + repo).then(res => {
        console.log(res.data.name);
        dispatch(setResponse(res.data.message));
      }).catch(error => console.log(error));

      if (response === "Not Found") {
        setState(prevState => {
          return { ...prevState, color: "#ffacac" };
        });
      }
      else if (state.isConnected == false) {
        dispatch(setResponse("disconnected"));
        setState(prevState => {
          return { ...prevState, color: "#ffacac" };
        });
      }
      else if (response == null) {
        setState(prevState => {
          return { ...prevState, color: "#caffda" };
        });
      }
  }

  return (
    <View style={{flex: 1, backgroundColor: state.color}}>
        <View style={styles.titleContainer}>
            <Text style={styles.title}>Set the repository address</Text>
        </View>
        <View style={styles.githubLink}>
            <Text style={styles.link1}>github.com</Text>
            <View style={styles.inputContainer}>
                <Text style={styles.link1}>/</Text>
                <Text style={styles.link2} onPress={() => navigation.navigate('User')} >{user}</Text>
            </View>
            <View style={styles.inputContainer}>
                <Text style={styles.link1}>/</Text>
                <Text style={styles.link2} onPress={() => navigation.navigate('Repo')} >{repo}</Text>
            </View>
        </View>
        <View style={styles.buttonContainer}>
            <Text style={styles.button} onPress={check}>CHECK</Text>
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flex: 1.5,
    justifyContent: "center",
    paddingLeft: 12,
  },
  title: {
    fontSize: 28,
    fontFamily: "OpenSans-SemiBold",
  },
  githubLink: {
    flex: 3,
    paddingLeft: 12,
    justifyContent: "center",
  },
  inputContainer: {
    flexDirection: "row",
  },
  link1: {
    fontSize: 38,
    fontFamily: "OpenSans-Regular",
  },
  link2: {
    fontSize: 38,
    fontFamily: "OpenSans-Regular",
    color: "grey"
  },
  buttonContainer: {
    flex: 5.5,
    justifyContent: "flex-end",
    alignItems: "flex-end",
    padding: 8,
  },
  button: {
    fontSize: 25,
    fontFamily: "OpenSans-Bold",
  }
});

Stefan Gies Stefan Gies · Accepted Answer · 2020-07-04T13:16:44

First, you need to make sure that the selector data from the state is not empty. Before actually doing the request you can check if the values are empty/undefined.

I also would advise you to more structure the way you are doing requests now. The Redux Toolkit has some nice examples for structuring your code to make it more maintainable. See their site

useSelector returns an undefined, but I'm not able to access to the value

1 Answers