title: How Do you access function props in your class component?
body: <p>I am trying to set up react redux, also i have set it but I am getting an error <strong>TypeError: _this.props.showLoader is not a function. (In '_this.props.showLoader(true)', '_this.props.showLoader' is undefined)</strong>.</p>
  <blockquote>
  <p>this.props.showLoader(true)</p>
  </blockquote>
  <p>This function has been defined in Action.js file you can find it below.</p>
  <p>This error comes whenever I try to call a function from Root.js file, you can find it below.</p>
  <p>Below is the code what I have done so far:-&gt;</p>
  <p>I have App.js file in which I have set for provider and store</p>
  <pre><code>import React, { Component } from 'react';
  import {StyleSheet, View, Text} from 'react-native';
  
  import {Provider} from 'react-redux';
  import store from './src/redux/Store'
  import Root from './src/root/Root'
  
  
  
  function App() {
    return (
          &lt;Provider store={store}&gt;
          &lt;View style={localStyles.container}&gt;
            &lt;Root/&gt;
          &lt;/View&gt;
          &lt;/Provider&gt;
    );
  }
  
  export default App;
  
  const localStyles = StyleSheet.create({
    container: {
      flex: 1,
    },
  });
  </code></pre>
  <p>This is the Navigation Route File</p>
  <pre><code>import React from 'react'
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import TutorialSwipeScreen from '../components/viewcontrollers/onboarding/TutorialSwipeScreen'
  
  
   const Stack = createStackNavigator();
  
   function goStack() {
      return (
        &lt;NavigationContainer&gt;
          &lt;Stack.Navigator
              screenOptions={{
                  headerShown: false
              }}
          &gt;
            &lt;Stack.Screen name=&quot;Login&quot; component={Login Screen} /&gt;
          &lt;/Stack.Navigator&gt;
        &lt;/NavigationContainer&gt;
      );
    }
  
  
   export default goStack;
  </code></pre>
  <p>My Root.js file
  where I am trying to this.props.showLoader it gives me error</p>
  <pre><code>import React, {Component} from 'react'
  import {View, StyleSheet, Text} from 'react-native'
  import NavigationRoute from './NavigationRoutes'
  
  import DeviceInfo from 'react-native-device-info'
  
  class Root extends Component {
  
     constructor(props) {
         super(props)
         console.warn('props=', this.props)
     }
  
     componentDidMount() {
       this.call()
     }
  
     call = () =&gt; { 
         this.props.showLoader(true)
         
     }
  
     render () {
         return (
             &lt;View style={styles.rootContainer}&gt;
                 &lt;NavigationRoute/&gt;
             &lt;/View&gt;
         )
     }
  
  }
  
  export default Root;
  
  const styles = StyleSheet.create({
     rootContainer: {
       flex: 1,
     }
   });
  </code></pre>
  <p>My RootContainer.js File</p>
  <pre><code> import {bindActionCreators} from 'redux'
   import {connect} from 'react-redux'
  
   import * as Actions from '../redux/Actions'
  
   import Root from './Root'
  
   function mapStateToProps(state) {
       return {
          shouldShowLoader: state.dataReducer._showLoader,
          shouldChangeCounting: state.dataReducer.counter
       }
   }
  
   function mapDispatchToProps(dispatch) {
       const mergedActions = Object.assign({}, Actions);
       return bindActionCreators(mergedActions, dispatch)
   }
  
   export default connect(mapStateToProps, mapDispatchToProps)(Root);
  </code></pre>
  <p>My Store.js file</p>
  <pre><code>import {createStore} from 'redux'
  
  import reducers from './RootReducer'
  
  export default createStore(reducers);
  </code></pre>
  <p>My RootReducer.js</p>
  <pre><code> import {combineReducers} from 'redux'
   import dataReducer from './reducers/Reducer'
  
   const rootReducer = combineReducers ({
       dataReducer,
   })
  
   export default rootReducer;
  </code></pre>
  <p>My Action.js file which has a function showLoader(bool) which I try to call from Root.js which gives me an error as I have quoted above.</p>
  <pre><code>export const DISPLAY_LOADER = 'DISPLAY_LOADER';
  export const REFRESH = 'REFRESH';
  export const COUNTER = 'COUNTER';
  
   export function showLoader(bool) {
      return {
        type: DISPLAY_LOADER, data: bool,
      };
    }
  
    export function refresh() {
      return {
        type: REFRESH, data: true,
      };
    }
  
    export function counting(count) {
        return {
            type: COUNTER, data: count
        }
    }
  </code></pre>
  <p>And Finally Reducer.js file code goes here</p>
  <pre><code>import { DISPLAY_LOADER, REFRESH, WELCOME_POPUP, LOGIN_RELOAD, MESSAGE_POPUP, LOGOUT, COUNTER} from '../Actions';
  
   const initialState = {
       counter: 5,
       _showLoader: false,
       _showMessagePopup: false,
       _loginReload: false,
       _refresh: false,
       _heading: 'Message Heading',
       _message: 'PWG Custom Message',
   }
  
  
   const dataReducer = (state = initialState, action) =&gt; {
  
      switch(action.type) {
          case DISPLAY_LOADER: {
              return {...initialState, _showLoader: action.data}
          }
          case REFRESH: {
              return {...initialState, _refresh: action.data}
          }
          case LOGOUT: {
              return {...initialState, _refresh: true}
          }
          case COUNTER: {
              return {...initialState, counter: action.data}
          }
          default: {
              return state;
          }
      }
  
   }
  
   export default dataReducer;
  </code></pre>
  <p>So where my mistake is I am not able to find with what lines of code I am receiving error at my end. Please help. Also I am new to react native please bear with me.</p>
  <p>Thanks</p>