CODEWITHSUNDEEP
javascriptreactjsreact-nativeredux
sanders
sanders

Reputation: 10898

Building a Higher order Component and applying it to redux connect

Please consider the React Native code:

MyForm.js

Class MyForm extends Component{
   render(){
      //Code Left out for simplicity
   }
} 

function mapStateToProps(){//code left out for simplicity}

MyForm.propTypes = {//code left out for simplicity};
export default(connect(mapStateToProps, Actions)(withHocComponent(MyForm)));

HoComponent.js

export default withHocComponent = WrappedComponent => class HoComponent extends Component {
    class HocComponent extends Component{
       render(){
         <View>
           <WrappedComponent/>
         </View>
       }
    }
}

function mapStateToProps(state) {
return {
  prop1: state.myReducer.someProp,
 };
}

export default connect(mapStateToProps)(withHocComponent);

However, I get the following error:

Cannot call class as a function.

The stack is referring to this line: export default(connect(mapStateToProps, Actions)(withHocComponent(MyForm)));

I am trying to implement an additional Higher order component besides the redux connect function.

Upvotes: 3

Views: 948

Answers (2)

Ar-51
Ar-51

Reputation: 115

Thanks @TimH, I changed it up a bit by putting the class, mapStateToProps and mapDispatchToProps inside the HOC, I could not get it to work when they were inside the HOCComponent.

const HOC = (WrappedComponent) => {

    class HOCComponent extends Component {
        constructor(props) {
            super(props);
            this.state = {
                talking: false
            };
        }
        render() {
            return (<WrappedComponent speak={this.speak} />);
        }
    }


    const mapStateToProps = state => ({
        start: state.lessonStartReducer.start,
    });


    const mapDispatchToProps = dispatch => ({
        startLesson: (payload) => {
            dispatch(startLesson(payload));
        },
    });


    return connect(
        mapStateToProps,
        mapDispatchToProps
    )(HOCComponent);
}
export default HOC;

Upvotes: 0

Tim
Tim

Reputation: 10709

Ok so i hope this is what you are looking for. If you have any questions, feel free to ask.

HOC

function withHocComponent(WrappedComponent) {
    class Wrapper extends Component {
        render() {
            // here you could pass props to your wrappedComponent
            return <WrappedComponent />;
         }

        const mapStateToProps = (state) => {
           //code left out for simplicity
        }
        //connect your HOC to the store inside the Wrapper 
        return connect(mapStateToProps, {})(Wrapper);
     }
}
export default withHocComponent;

MyForm

Class MyForm extends Component{
   render(){
      //Code Left out for simplicity
   }
} 

function mapStateToProps(){//code left out for simplicity}

MyForm.propTypes = {//code left out for simplicity};

// Here is the part where the magic happens. 
// Pass your HOC your connected component
export default withHocComponent(connect(mapStateToProps, {})(MyForm));

Upvotes: 2

Related Questions