CODEWITHSUNDEEP
javascriptreactjsredux
walid Elnozahy
walid Elnozahy

Reputation: 35

React/Redux Changing Webpage language

I'm making a website that have a functionality to change languages from the homescreen, I'm using Redux to handle the state.

I keep getting TypeError: Cannot read property 'connect' of undefined, and It seems to be from Home.js, I dont know why it happens!!, Please Help !!!

import React, { Component } from 'react';
import ReactRedux from 'react-redux';

import './Home.css';
import Navbar from '../../Reusable/Navbar/Navbar.js';
import Footer from '../../Reusable/Footer/Footer.js';
import Action from '../../Reusable/Action/Action.js';
import ProjectsCarousel from '../../Reusable/ProjectsCarousel/ProjectsCarousel.js';
import Getintouch from '../../Reusable/Getintouch/Getintouch.js';
import Header from './Header/Header.js';
import Info from './Info/Info.js';
import Whyus from './Whyus/Whyus.js';
import Testimonial from './Testimonial/Testimonial.js';
let actions = require('../../../actions');

class Home extends Component {
  render() {
        const content = this.props.content;
        const switchLanguage = this.props.switchLanguage;

        if (content){
              return (
                <div className="home">
                  <Action />
                  <Navbar data={content.page.menu} switchLanguage={switchLanguage}/>
                  <Header />
                  <Info  data={content.page.home}/>
                  <ProjectsCarousel />
                  <Whyus />
                  <Testimonial />
                  <Getintouch />
                  <Footer />
                </div>
              )
        } else {
          return;
        }

  }
}


module.exports = ReactRedux.connect(
  (state) => ({content: state.content}),
  (dispatch) => ({switchLanguage: (lang) => dispatch(actions.switchLanguage(lang))})
)(Home);

export default Home;

Upvotes: 1

Views: 339

Answers (1)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36209

That's because react-redux has only named exports.

change your import to:

import * as ReactRedux from 'react-redux';

which will import every named property to ReactRedux Object. or import it like:

import { connect } from 'react-redux';

export default connect(
  (state) => ({content: state.content}),
  (dispatch) => ({switchLanguage: (lang) => dispatch(actions.switchLanguage(lang))})
)(Home);

Upvotes: 1

Related Questions