Answer a question

I am trying to set up react redux, also i have set it but I am getting an error TypeError: _this.props.showLoader is not a function. (In '_this.props.showLoader(true)', '_this.props.showLoader' is undefined).

this.props.showLoader(true)

This function has been defined in Action.js file you can find it below.

This error comes whenever I try to call a function from Root.js file, you can find it below.

Below is the code what I have done so far:->

I have App.js file in which I have set for provider and store

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 (
        <Provider store={store}>
        <View style={localStyles.container}>
          <Root/>
        </View>
        </Provider>
  );
}

export default App;

const localStyles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

This is the Navigation Route File

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 (
      <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
                headerShown: false
            }}
        >
          <Stack.Screen name="Login" component={Login Screen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }


 export default goStack;

My Root.js file where I am trying to this.props.showLoader it gives me error

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 = () => { 
       this.props.showLoader(true)
       
   }

   render () {
       return (
           <View style={styles.rootContainer}>
               <NavigationRoute/>
           </View>
       )
   }

}

export default Root;

const styles = StyleSheet.create({
   rootContainer: {
     flex: 1,
   }
 });

My RootContainer.js File

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

My Store.js file

import {createStore} from 'redux'

import reducers from './RootReducer'

export default createStore(reducers);

My RootReducer.js

 import {combineReducers} from 'redux'
 import dataReducer from './reducers/Reducer'

 const rootReducer = combineReducers ({
     dataReducer,
 })

 export default rootReducer;

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.

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
      }
  }

And Finally Reducer.js file code goes here

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) => {

    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;

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.

Thanks

Answers

I have got the answer, I am answering my own post.

In the App.js File You need to import

RootContainer

instead of

Root

That’s it and it works Voila.

import RootContainer from './src/root/RootContainer'