CODEWITHSUNDEEP
reactjsreact-redux
Veysel Turan
Veysel Turan

Reputation: 203

How to Call a Function From Another Class With React-Redux?

I want to call functions from another class in react.Js and I did it successfully. My problem is that I get Error: You must pass a component to the function returned by connect. Instead received {"refs":{},"updater":{}} if I use react-redux. Here is a basic example of algortihm

import { Component } from "react";
import { GetCityListFromActiveAddressSource } from '../Services/AddressService'
import { connect } from 'react-redux';

class FirstClass extends Component{
 constructor(props){
    super(props);
 }

 TestFunction(){
    alert("test");
 }

 render(){
    return null
 }
}

const mapStateToProps = ({ Modules }) => {
 const { GetDynamicMenuList } = Modules;
 return { GetDynamicMenuList }
}

const Address = new AddressService();

export default connect(mapStateToProps,{GetCityListFromActiveAddressSource})(Address);

//export default Address;

And My Second class...

import React, { Component } from 'react';    
import FirstClass from '../../../ServiceClient/FirstClass';

class SeconClass extends Component {
 constructor(props) {
    super(props);
 }

componentDidMount(){
    Address.TestFunction();
 }
}

If I don't use connect and react-redux then I can call my function. But I have to use react-redux.

Upvotes: 1

Views: 708

Answers (1)

Veysel Turan
Veysel Turan

Reputation: 203

I solved my problem, My problem was that I used export default with const value but react-redux(connect) needs a component or function But I unfortunatelly used const value in my example. That's why I got error. Then I exported my component in connect and I used another export for my const. It works well enough for me.

import React, { Component } from "react";
import { GetCityListFromActiveAddressSource } from '../Services/AddressService'
import { connect } from 'react-redux';

class AddressService extends Component{
constructor(props){
    super(props);
 }
 TestFunction(){
    alert("test");
 }

 render(){
    return null
 }
}

const mapStateToProps = ({ Modules }) => {
const { GetDynamicMenuList } = Modules;
return { GetDynamicMenuList }
  }

export default connect(mapStateToProps,{GetCityListFromActiveAddressSource}) 
(AddressService);

export const Address = new AddressService();

And I call my function like

import {Address} from '../../../ServiceClient/Address';

Upvotes: 1

Related Questions