CODEWITHSUNDEEP
javascriptreact-nativereduxreact-redux
Reshan Kumarasingam
Reshan Kumarasingam

Reputation: 453

Redux doesn't work in one component only for a react native application

I have redux integration in my app. Problem is its working just fine with other component but its having issues on specific one component. I'm getting the following error

ExceptionsManager.js:86 TypeError: _this.props.changeAlertedNetworkError is not a function

    This error is located at:
        in NetworkService (at App.js:21)
        in Provider (at App.js:20)
        in App (at renderApplication.js:40)
        in RCTView (at View.js:35)
        in View (at AppContainer.js:98)
        in ChildrenWrapper (at wrapRootComponent.js:9)
        in _class (at wrapRootComponent.js:8)
        in Root (at AppContainer.js:112)
        in RCTView (at View.js:35)
        in View (at AppContainer.js:115)
        in AppContainer (at renderApplication.js:39)

this is how the component looks

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import MiniOfflineSign from './MiniOfflineSign'
import { connect } from "react-redux";
import { setIsConnectedOnline, changeAlertedNetworkError } from '../redux/actions';

export class NetworkService extends Component {
    state = {
        isConnected: false
    }

    componentDidMount = () => {
        this.props.changeAlertedNetworkError("test me")
    }

    render() {
        const { children } = this.props
        return (<View style={{ flex: 1 }}>

        {
            this.state.isConnected ? null : <MiniOfflineSign />
        } 
        
         {children}
        
        </View>)
    }
}

    mapStateToProps = (state) => {
    return {
      isConnectedOnline:state.isConnectedOnline
    };
  }
  
   mapDispatchToProps = (dispatch) => {
    return {
      changeAlertedNetworkError: (payload) => dispatch(changeAlertedNetworkError(payload)),
      setIsConnectedOnline: (payload) => dispatch(setIsConnectedOnline(payload)),
      
    };
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(NetworkService);

and this is how the component is wrapped around app

import React from 'react';
import AppContainer from './src/navigation/AppContainer'
import { Provider } from 'react-redux'
import store from "./src/redux/store";
import PushNotificationsManager from './src/push/PushNotificationsManager'
import LocationService from './src/geolocation/LocationService';
import { NetworkService } from './src/network/NetworkService';

const App = () => {

  return (
    <Provider store={store}>
        <NetworkService>
            <LocationService>
                <PushNotificationsManager>
                    <AppContainer/>
                </PushNotificationsManager>
            </LocationService>
        </NetworkService>
    </Provider>
    );
};

export default App;

it should be noted that it works fine in PushNotificationsManager & LocationService without any issues.

Upvotes: 0

Views: 92

Answers (1)

Robin Zigmond
Robin Zigmond

Reputation: 18249

You're importing the unconnected component, rather than the (connected) default export. Just replace

import { NetworkService } from './src/network/NetworkService';

with

import NetworkService from './src/network/NetworkService';

(I'm not sure why you're doing the named export of the unconnected component. If that wasn't exported then the import statement would have given an error, making the problem easier to diagnose.)

Upvotes: 2

Related Questions