title: Redux State Problem : TypeError: undefined is not an object
body: <p>I am new to react native and redux especialy and I got an error message that I really struggle to deal with.</p>
  <p><strong>This is the error im getting</strong></p>
  <blockquote>
  <p>TypeError: undefined is not an object (evaluating '(0,
  _reactRedux.useSelector)(function (state) {
  return state.myPigeons.myPigeons;
  }).length')</p>
  </blockquote>
  <p>I will show you here all my related code I got so far and after that explain what my intention behind all this is.</p>
  <p><strong>MainScreen.js</strong></p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import {View, Text, StyleSheet, Button} from 'react-native'; 
  import { useDispatch, useSelector } from 'react-redux';
  import CustomButton from '../components/CustomButton';
  import CustomPigeonPicker from '../components/CustomPigeonsPicker';
  import { addPigeon } from '../store/actions/pigeon';
  
  
  const MainScreen = props =&gt;{
      dispatch = useDispatch();
      const availablePigeons = (useSelector(state =&gt; state.myPigeons.myPigeons)).length;
      return(
          &lt;View style={styles.screen}&gt;
              &lt;View style={styles.tophalf}&gt;
                  &lt;CustomPigeonPicker style={styles.pigeonpicker}
                      placeholder={`You have so many pigeons: ${availablePigeons}`}
                  /&gt;
              &lt;/View&gt;
              &lt;View style={styles.bottomhalf}&gt;
                  &lt;CustomButton 
                      style={styles.button} 
                      onPress={() =&gt; dispatch(addPigeon)}
                  /&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      )
  };
  
  const styles = StyleSheet.create({
      screen:{
          flexDirection: &quot;column&quot;,
          flex: 1
      },
      button:{
          fontFamily: &quot;AmaticBold&quot;,
          //Ab hier Einstellungen zum Schatten
          shadowColor: &quot;#000&quot;,
          shadowOffset: {
              width: 0,
              height: 5,
          },
          shadowOpacity: 0.34,
          shadowRadius: 6,
          elevation: 3.5,
          width: &quot;30%&quot;,
      },
      tophalf:{
          flex: 1,
          alignItems: &quot;center&quot;
      },
      bottomhalf:{
          flex:1,
          alignItems: &quot;center&quot;
      },
      pigeonpicker:{
      
      }
  });
  
  export default MainScreen;
  </code></pre>
  <p><strong>pigeon.js (action)</strong></p>
  <pre><code>export const ADD_PIGEON = 'ADD_PIGEON';
  
  export const addPigeon = () =&gt; {
      return {type: ADD_PIGEON}
  };
  </code></pre>
  <p><strong>pigeon.js (reducer)</strong></p>
  <pre><code>import {ALLPIGEONS} from '../../data/pigeons_data';
  import { ADD_PIGEON } from '../actions/pigeon';
  
  
  const initialPigeonState = () =&gt; {
      myPigeons = []
  };
  
  const pigeonReducer = (state = initialPigeonState, action) =&gt; {
      switch(action.type){
          case ADD_PIGEON:{
              var generatedPigeon = Math.floor(Math.random() * ALLPIGEONS.length);
              generatedPigeon.nickname = &quot;Kuba&quot;;
              var updatedPigeons = [...state.myPigeons, generatedPigeon]
              return{...state, myPigeons: updatedPigeons}
          }
      };
      return state;
  };
  
  export default pigeonReducer;
  </code></pre>
  <p><strong>pigeons_data.js</strong></p>
  <pre><code>import pigeon from '../models/pigeon';
  
  const ALLPIGEONS = [
      new pigeon(
          1,
          &quot;red&quot;,
          &quot;Red-billed pigeon&quot;,
          &quot; &quot;
      ),
      new pigeon(
          2,
          &quot;blue&quot;,
          &quot;Blue pigeon&quot;,
          &quot; &quot;
      ),
      new pigeon(
          3,
          &quot;white&quot;,
          &quot;Release dove&quot;,
          &quot; &quot;
      ),
      new pigeon(
          4,
          &quot;brown&quot;,
          &quot;Brown cuckoo-dove&quot;,
          &quot; &quot;
      ),
      new pigeon(
          5,
          &quot;green&quot;,
          &quot;Green pigeon&quot;,
          &quot; &quot;
      ),
  ];
  
  export default ALLPIGEONS;
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>//Automatic imports
  import { StatusBar } from 'expo-status-bar';
  import React, {useState} from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { Provider } from 'react-redux';
  
  //My imports
  import * as Font from 'expo-font';
  import {AppLoading} from 'expo';
  import ReduxThunk from 'redux-thunk';
  import { createStore, combineReducers, applyMiddleware } from 'redux';
  
  //import other screens
  import PBNavigator from './navigation/PBNavigator';
  
  //import Reducers
  import authReducer from './store/reducers/auth';
  import pigeonReducer from './store/reducers/pigeon';
  
  //Loading Fonts, returns promise
  const fetchFonts = () =&gt; {
    return Font.loadAsync({
      'Magnus' : require('./assets/fonts/MagnusText.ttf'),
      'AmaticBold' : require('./assets/fonts/Amatic-Bold.ttf'),
      'AmaticRegular' : require('./assets/fonts/AmaticSC-Regular.ttf'),
      'SEASRN' : require('./assets/fonts/SEASRN.ttf'),
    });
  };
  
  const rootReducer = combineReducers({
    auth: authReducer,
    myPigeons: pigeonReducer,
  });
  
  const store = createStore(rootReducer, applyMiddleware(ReduxThunk));
  
  export default function App() {
    const [dataLoaded, setDataLoaded] = useState(false); //are fonts loaded?
  
    if(!dataLoaded){ //will go into if clause because fonts are not loaded
      return(
        &lt;AppLoading 
          startAsync={fetchFonts} 
          onFinish={() =&gt; setDataLoaded(true)}
          onError={(err) =&gt; console.log(err)}
        /&gt;
      )
    }
    return (
      &lt;Provider store={store}&gt;
        &lt;PBNavigator/&gt;
      &lt;/Provider&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>
  <p>The problem here is basicly that I want to have a state in redux where all my pigeons I have are stored (my state should be empty right now because I did not add any pigeon to my state) and after I click the button in Mainscreen.js I add a pigeon to the state so that the text can display how many pigeons I have.</p>
  <p>Right now the app is always crashing when I make my way to the MainScreen. I am thankfull for any help!</p>
  <p><strong>EDIT: My PBNavigator File</strong> (that was requested):</p>
  <pre><code>//All modules that needs to be implemented
  import {createAppContainer, createSwitchNavigator} from 'react-navigation';
  import { createStackNavigator } from 'react-navigation-stack';
  import { Platform } from 'react-native';
  
  //All imported screens from my screens folder
  import ChatScreen from '../screens/ChatScreen';
  import ContactsScreen from '../screens/ContactsScreen';
  import MainScreen from '../screens/MainScreen';
  import LoginScreen from '../screens/LoginScreen';
  import PigeonBaseScreen from '../screens/PigeonBaseScreen';
  import PigeonLexiconScreen from '../screens/PigeonLexiconScreen';
  import ShopScreen from '../screens/ShopScreen';
  
  //Importing other recources 
  import Colors from '../constants/Colors';
  
  //Setting up stack navigator
  const PBNavigator = createStackNavigator({
      Main: {
          screen: MainScreen,
          navigationOptions:{
              headerShown: false,
          }
      },
      Chat: ChatScreen,
      Contacts: ContactsScreen,
      PigeonBase: PigeonBaseScreen,
      PigeonLexicon: PigeonLexiconScreen,
      Shop: ShopScreen
  }, {
      defaultNavigationOptions:{
          backgroundColor: Platform.OS === 'android' ? Colors.primary : ''
      },
      headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
      
      }
  );
  
  const AuthNavigator = createStackNavigator({
      Auth:{
          screen: LoginScreen,
          navigationOptions:{
              headerShown: false,
          }
      } 
  });
  
  const MainNavigator = createSwitchNavigator({
      Auth: AuthNavigator, //LoginScreen you cant go back after you passed it
      Homescreen: PBNavigator //switching so PBNavigator when you finished authentification
  });
  
  
  
  
  
  export default createAppContainer(MainNavigator);
  </code></pre>